Bootstrap—栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统。通过定义容器的大小，平分12份，可类比table。一个数据（row）必须包含在.container中，行（row）在水平方向上创建一组列（column），就如同tr中创建td。具体的内容放在column中，而且只有列（column）可以作为行（row）的子元素。

12栅格化，每一个列（column）都有15px的左右边距；
.container样式源码：

.container {
  padding-right: 15px;/*由于row的margin设置-15px，需要这个15px进行修补*/
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {width: 750px;} /*小型屏幕时,container样式的宽度*/  
}
@media (min-width: 992px) {
  .container { width: 970px;} /*中型屏幕时,container样式的宽度,缩小min-width范围*/
}
@media (min-width: 1200px) {
 	.container { width: 1170px; }/*大型屏幕时,container样式的宽度,再次缩小min-width范围*/
}

而12份可以自由组合，可以用完12，也可以只用一部分，只需要用符号“col-md-数字”的规则就可以了。

 <div class="container">
        <div class="row">
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
        </div>
        <div class="row">
            <div class="col-md-8">.col-md-8</div>
            <div class="col-md-4">.col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-6">.col-md-6</div>
            <div class="col-md-6">.col-md-6</div>
        </div>
    </div>

效果图：

列组合的实现方式只需要涉及左浮动和宽度的百分比即可.
列组合的源码：

.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{
	float:left;/*确保12个列都是左浮动*/
}
/*定义每一个组合的宽度百分比*/
.col-md-12{width:100%;}
.col-md-11{width:91.666666666666666%;}
.col-md-10{width:83.333333333333334%;}
.col-md-9{width:75%;}
.col-md-8{width:66.666666666666666%;}
.col-md-7{width:58.333333333333336%;}
.col-md-6{width:50%;}
.col-md-5{width:41.666666666666667%;}
.col-md-4{width:33.333333333333333%;}
.col-md-3{width:25%;}
.col-md-2{width:16.666666666666664%;}
.col-md-1{width:8.333333333333332%;}

列偏移：
有时不能让两个相邻的列挨在一起，需要利用栅格系统的列偏移（offset）功能来实现，就可以不用定义margin值。
使用 .col-md-offset- 的形式的样式将列偏移到右侧。

  <div class="container">
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
    </div>

效果：
通过查看源码，我们可以发现其实列偏移就是利用了margin-left，有多少的offset,就有多少的margin-left

.col-md-offset-12{margin-left:100%;}
.col-md-offset-11{margin-left:91.666666666666666%;}
.col-md-offset-10{margin-left:83.333333333333334%;}
.col-md-offset-9{margin-left:75%;}
.col-md-offset-8{margin-left:66.666666666666666%;}
.col-md-offset-7{margin-left:58.333333333333336%;}
.col-md-offset-6{margin-left:50%;}
.col-md-offset-5{margin-left:41.666666666666667%;}
.col-md-offset-4{margin-left:33.333333333333333%;}
.col-md-offset-3{margin-left:25%;}
.col-md-offset-2{margin-left:16.666666666666664%;}
.col-md-offset-1{margin-left:8.333333333333332%;}
.col-md-offset-0{margin-left:0;}

列嵌套：就是在一个列里面再声明一个或多个行（row）

<div class="row">
    <div class="col-md-9">
        Level 1: .col-md-9
        <div class="row">
            <div class="col-md-6">Level 2: .col-md-6</div>
            <div class="col-md-6">Level 2: .col-md-6 </div>
        </div>
　　</div>
　　<div class="col-md-3"></div>
　　</div>
</div>

效果图：

可以看到，在一个列（col-md-9）里面，嵌套了一个新行（row），然后在新行里，又放置了两个等宽列的col-md-6，这时两个col-md-6加起来是12，但是总宽度和外面的col-md-9列的宽度一样。所以，在任何一个嵌套列里，不管宽度是多少，都可以再进行12等分，并可以进一步组合。
列排序：
改变列的方向，也就是改变左右浮动，并设置浮动的距离。通过.col-md-push-*和.col-md-pull-*来实现这一目的。

// 源码1125行
.col-md-pull-12 {  right: 100%;}
.col-md-pull-11 {  right: 91.66666666666666%;}
.col-md-pull-10 {  right: 83.33333333333334%;}
.col-md-pull-9 {  right: 75%;}
.col-md-pull-8 {  right: 66.66666666666666%;}
.col-md-pull-7 {  right: 58.333333333333336%;}
.col-md-pull-6 {  right: 50%;}
.col-md-pull-5 {  right: 41.66666666666667%;}
.col-md-pull-4 {  right: 33.33333333333333%;}
.col-md-pull-3 {  right: 25%;}
.col-md-pull-2 {  right: 16.666666666666664%;}
.col-md-pull-1 {  right: 8.333333333333332%;}
.col-md-pull-0 {  right: 0;}
.col-md-push-12 {  left: 100%;}
// 其他同理,上pull的设置类似,唯一不同的就是right和left的区别
.col-md-push-0 {  left: 0;}