bootstrap学习笔记之一

一、概要

　　bootstrap是最受欢迎的HTML、css和js框架，用于开发响应式布局，移动设备优先的WEB项目。

二、CSS部分

　　1、bootstrap已经设定了基本的全局样式，如font-family，font-size，line-height，为链接设定了基本的颜色（绿蓝色），并且当链接处于hover状态时增加下划线。

　　2、两个布局容器：container和container-fluid；如下所示，container布局容器在不同的宽度的设备中宽度是不一样的，而container-fluid的宽度始终未为100%；

 1 .container {
 2   padding-right: 15px;
 3   padding-left: 15px;
 4   margin-right: auto;
 5   margin-left: auto;
 6 }
 7 @media (min-width: 768px) {
 8   .container {
 9     width: 750px;
10   }
11 }
12 @media (min-width: 992px) {
13   .container {
14     width: 970px;
15   }
16 }
17 @media (min-width: 1200px) {
18   .container {
19     width: 1170px;
20   }
21 }
22 .container-fluid {
23   padding-right: 15px;
24   padding-left: 15px;
25   margin-right: auto;
26   margin-left: auto;
27 }

　　由上可知，第一、栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，即col-xs类的样式可以运用到平板和电脑上，但是如果文件中还设定了col-sm、col-md、col-lg类，则会覆盖col-xs的样式。

　　第二、container类在平板和电脑端都是固定宽度的，如1170px，970px，750px，所以在平板和电脑端是不会充满全屏的，而在手机端container和container-fluid类一样是充满全屏的。因为在手机端container的宽度为自动auto了。

　　第三，通过实验可以看出，container分别有左右15px的内边距，而里面的div通过row类设定margin-left：-15px,margin-right:-15px，可以实现新的row类重新得到container的宽度。而row类里边的col-md类也有默认的15px的内边距，或许大家就会疑惑，比如row类中包括两个col-md-6的div类，而且设定了border，此时他们怎么可能还在一行呢？不是撑不下了吗！没错，col-md-6的宽度都为50%，按照我们传统的想法，还设定了左右的15px的padding，还设定border，肯定是撑不下了的，原因在此。bootstrap中的所有元素box-sizing设定的是怪异模式中的border-box，而不是传统的content-box。即50%的宽度中已经包括了padding和border。

 1 * {
 2   -webkit-box-sizing: border-box;
 3      -moz-box-sizing: border-box;
 4           box-sizing: border-box;
 5 }
 6 *:before,
 7 *:after {
 8   -webkit-box-sizing: border-box;
 9      -moz-box-sizing: border-box;
10           box-sizing: border-box;
11 }

 

　3、栅格系统

 1 .row {
 2   margin-right: -15px;
 3   margin-left: -15px;
 4 }
 5 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
 6   position: relative;
 7   min-height: 1px;
 8   padding-right: 15px;
 9   padding-left: 15px;
10 }
11 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
12   float: left;
13 }
14 .col-xs-12 {
15   width: 100%;
16 }
17 .col-xs-11 {
18   width: 91.66666667%;
19 }
20 .col-xs-10 {
21   width: 83.33333333%;
22 }
23 .col-xs-2 {
24   width: 16.66666667%;
25 }
26 .col-xs-1 {
27   width: 8.33333333%;
28 }

　　由上可知，栅格系统的宽度实现就是通过百分比来实现的。上面已经说过了，此时的宽度是border-box，即包括padding又包括border。

　　4、偏移量的实现

1 .col-md-offset-2 {
2     margin-left: 16.66666667%;
3   }
4   .col-md-offset-1 {
5     margin-left: 8.33333333%;
6   }
7   .col-md-offset-0 {
8     margin-left: 0;
9   }

　　5、列排序的实现

 1 .col-md-push-1 {
 2     left: 8.33333333%;
 3   }
 4   .col-md-push-0 {
 5     left: auto;
 6   }
 7  .col-md-pull-1 {
 8     right: 8.33333333%;
 9   }
10   .col-md-pull-0 {
11     right: auto;
12   }

　　6、排版

　　　　1)small标签在和h1~h6标签中作副标题;

　　　　2)页面主体： font-size：14px; line-height: 1.428; p标签还设定了10px的底部外边距（margin）;

　　　　3).lead类名让段落p进行凸显；　　　

1 .lead {
2 margin-bottom: 20px;
3 font-size: 16px;
4 font-weight: 300;
5 line-height: 1.4;
6 }

　　　　4)mark、del、s、ins、u、small、strong、em等标签；

　　　　5)文本对齐方式类名：text-left、text-center、text-right、text-nowrap；

　　　　6)改变英文的大小写类名：text-lowercase、text-uppercase、text-capticalize；

　　　　7)有点不一样的abbr缩略语：

<abbr title="attrbute">attr</abbr>

 　　　　8)引用blockquote标签，文字前面有个小标识。

　　　 　9）清除列表ul、ol的默认样式添加类名list-unstyled；内联列表添加类名：list-inline。

　　7、表格table

　　　　table，thead、tr、th，tbody、tr、td。thead中的th默认为加粗效果。

　　　　为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线;

　　　　通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

　　　　添加 .table-bordered 类为表格和其中的每个单元格增加边框。

　　　　通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

　　　　通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的上下方向的内补（padding）会减半。

　　　　状态类出现了：

Class描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

　　　　

　　　　响应式表格：将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

　　8、表单

　　　　单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

　　　　不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。如下：

 1 <form>
 2   <div class="form-group">
 3     <label for="exampleInputEmail1">Email address</label>
 4     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
 5   </div>
 6   <div class="form-group">
 7     <label for="exampleInputPassword1">Password</label>
 8     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 9   </div>
10   <div class="form-group">
11     <label for="exampleInputFile">File input</label>
12     <input type="file" id="exampleInputFile">
13     <p class="help-block">Example block-level help text here.</p>
14   </div>
15   <div class="checkbox">
16     <label>
17       <input type="checkbox"> Check me out
18     </label>
19   </div>
20   <button type="submit" class="btn btn-default">Submit</button>
21 </form>

 　　　　内联表单：为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

一定要添加 label 标签如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。

 1 <form class="form-inline">
 2   <div class="form-group">
 3     <label for="exampleInputName2">Name</label>
 4     <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
 5   </div>
 6   <div class="form-group">
 7     <label for="exampleInputEmail2">Email</label>
 8     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
 9   </div>
10   <button type="submit" class="btn btn-default">Send invitation</button>
11 </form>

　　　　　label的sr-only类的使用

 1 <form class="form-inline">
 2   <div class="form-group">
 3     <label class="sr-only" for="exampleInputEmail3">Email address</label>
 4     <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
 5   </div>
 6   <div class="form-group">
 7     <label class="sr-only" for="exampleInputPassword3">Password</label>
 8     <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
 9   </div>
10   <div class="checkbox">
11     <label>
12       <input type="checkbox"> Remember me
13     </label>
14   </div>
15   <button type="submit" class="btn btn-default">Sign in</button>
16 </form>

　　　 水平排列的表单：通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。此时布局要变下，要在form-group外套一个div。同时此时的lable要增加一下类名control-lable以达到理想效果。

 1 <form class="form-horizontal">
 2   <div class="form-group">
 3     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 4     <div class="col-sm-10">
 5       <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
 6     </div>
 7   </div>
 8   <div class="form-group">
 9     <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
10     <div class="col-sm-10">
11       <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
12     </div>
13   </div>
14   <div class="form-group">
15     <div class="col-sm-offset-2 col-sm-10">
16       <div class="checkbox">
17         <label>
18           <input type="checkbox"> Remember me
19         </label>
20       </div>
21     </div>
22   </div>
23   <div class="form-group">
24     <div class="col-sm-offset-2 col-sm-10">
25       <button type="submit" class="btn btn-default">Sign in</button>
26     </div>
27   </div>
28 </form>

　　　被支持的控件:包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。　　

　　　　静态控件

　　　　　如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。

 1 <form class="form-horizontal">
 2   <div class="form-group">
 3     <label class="col-sm-2 control-label">Email</label>
 4     <div class="col-sm-10">
 5       <p class="form-control-static">email@example.com</p>
 6     </div>
 7   </div>
 8   <div class="form-group">
 9     <label for="inputPassword" class="col-sm-2 control-label">Password</label>
10     <div class="col-sm-10">
11       <input type="password" class="form-control" id="inputPassword" placeholder="Password">
12     </div>
13   </div>
14 </form> 

 　　　  控件大小：

　　　　　　通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

　　　　调整高度：

1 <input class="form-control input-lg" type="text" placeholder=".input-lg">
2 <input class="form-control" type="text" placeholder="Default input">
3 <input class="form-control input-sm" type="text" placeholder=".input-sm">
4 
5 <select class="form-control input-lg">...</select>
6 <select class="form-control">...</select>
7 <select class="form-control input-sm">...</select>

　　　　调整宽度：　　　　

 1 <div class="row">
 2   <div class="col-xs-2">
 3     <input type="text" class="form-control" placeholder=".col-xs-2">
 4   </div>
 5   <div class="col-xs-3">
 6     <input type="text" class="form-control" placeholder=".col-xs-3">
 7   </div>
 8   <div class="col-xs-4">
 9     <input type="text" class="form-control" placeholder=".col-xs-4">
10   </div>
11 </div>

 

posted @ 2016-03-05 17:01  wbxjiayou  阅读(357)  评论(0)  编辑  收藏  举报