栅格系统的实现原理非常简单，仅仅是通过定义容器的大小，平分12份，可类比table。一个数据（row）必须包含在.container中，行（row）在水平方向上创建一组列（column），就如同tr中创建td。具体的内容放在column中，而且只有列（column）可以作为行（row）的子元素。

ios 栅格布局 12栅格布局_Bootstrap

每个列（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
范围*/}
}

　　2号横条是，row容器的定义，在row的CSS的定义中将margin-left和margin-right都定义为-15px

　　3号横条是1号横条放入2号横条中的效果。

　　4号横条表达的12个横条可以自由组合，可以用完12，也可以只用一部分，只要用符号“col-md-数字”的规则就可以了。

列组合

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap基础模板</title>

    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
    <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>
</body>
</html>

 效果：

ios 栅格布局 12栅格布局_Bootstrap_02

　　列组合的实现方式非常简单，只涉及两个CSS特性：左浮动和宽度百分比，源码：

ios 栅格布局 12栅格布局_Bootstrap_03

 列偏移

　　有时候，我们不能让两个相邻的列挨在一起，这时候利用栅格系统的列偏移（offset）功能来实现，而不必再定义margin值。使用.col-md-offset-*形式的样式就可以将列偏移到右侧。例如.col-md-offset-4将.col-md-4列向右移动了4个列的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap基础模板</title>

    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
    <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>
</body>
</html>

效果：

ios 栅格布局 12栅格布局_ios 栅格布局_04

 

源码也非常简单，只利用了1/12的margin-left而已，有多少offset，就有多少个margin-left。

 

ios 栅格布局 12栅格布局_Bootstrap_05

列嵌套

　　同样，栅格系统也支持列嵌套，即在一个列里再声明一个或多个行(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>

运行的效果：

ios 栅格布局 12栅格布局_html_06

　　可以看到，在一个列（col-md-9）里面，嵌套了一个新行（row），然后在新行里，又放置了两个等宽列的col-md-6，这时两个col-md-6加起来是12，但是总宽度和外面的col-md-9列的宽度一样。所以，在任何一个嵌套列里，不管宽度是多少，都可以再进行12等分，并可以进一步组合。

列排列

　　列排序其实就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过.col-md-push-*和.col-md-pull-*来实现这一目的，下面将图中的.col-md-9和.col-md-3调换位置。

ios 栅格布局 12栅格布局_html_07

 

　　默认情况下，col-md-9在左边，col-md-3在右边，如果要互换位置，需要将col-md-9列向右推3个列的offset，样式用col-md-push-3;而col-md-3则需要向左移动，也就是拉9个列的offset，样式用col-md-pull-9。代码如下：

// 源码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;}

响应式设计

　　页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行响应的响应和调整。换句话说，页面应该有能力自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本，这样就可以不必为不断到来的新设备做专门的版本设计和开发了。

　　响应式设计是一个理念，而非功能，Bootstrap的所有内容，都是以响应式设计为设计理念来实现的。

　　上面说，Bootstrap为不同的屏幕尺寸（4种类型）提供了不同的栅格样式，前面例子我们使用的一直是中型屏幕(md)，其他3中样式分别是超小(xs)、小型(sm)、大型(lg)，所以组合起来样式就很多了，可以是.col-xs-1，也可以是.col-sm-offset-2，还可以是.col-lg-push-1。下面总结了一个表格用于记录不同类型浏览器的各种参数。

ios 栅格布局 12栅格布局_Bootstrap_08

　　屏幕的分界点是通过下面的样式实现：

// 超小型是默认实现
// 小型
@media (min-width: 768px) {
    .container { width: 750px;    }
}
// 中型
@media (min-width: 992px) {
    .container { width: 970px;    }
}
// 大型
@media (min-width: 1200px) {
    .container { width: 1170px;    }
}

1.跨设备组合定义

　　一种样式（比如col-md-9）在其定义的尺寸范围以外是不起作用的。比如，在小型或者大型屏幕下，所有带有md的样式都不会生效，而且没有默认值。这就是说，我们可以再一个元素上应用不同类型的样式，以适配不同尺寸的屏幕。比如下面的实例：

<div class="row">
    <div class="col-sm-12 col-md-8">.col-sm-12 .col-md-8</div>
    <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div>
    <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div>
    <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-sm-6">.col-sm-6</div>
    <div class="col-sm-6">.col-sm-6</div>
</div>

　　上述示例中，每个div元素都应用了两种样式，分别是sm类型和md类型，用于适配小型屏幕和中型屏幕。

ios 栅格布局 12栅格布局_css_09

ios 栅格布局 12栅格布局_css_10

 

　　最后一个col-sm-6，在中型屏幕上和小屏幕上都是各占50%，就是说col-sm-6在中型屏幕上面也起作用了。这是因为针对sm类型的媒体查询只用了@media(min-width:768px)，而不是@media(mid-width:768)and(max-width:992px)。所以，如果没有定义md样式的话，sm样式默认情况下依然有效。总结一句，如果只用min-width，则表示向大兼容。

2.清除浮动问题

　　如果我们想在两种屏幕上实现下面的不同效果:

ios 栅格布局 12栅格布局_css_11

ios 栅格布局 12栅格布局_ios 栅格布局_12

　　按照上述响应式栅格的建议，可能觉得应该如下设计：

<div class="row">
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

　　但是真实内容填到div里进去，下面是超小屏的会出现的一种实际效果:

ios 栅格布局 12栅格布局_Bootstrap_13

　　因为所有的col-样式都是左浮动，很明显，这是因为没有清除浮动导致的。第3个div开始换行的时候，div1的内容高度过高，所以div3就在右边紧接着显示了。

　　要解决这个问题，需要用Bootstrap提供的clearfix样式。更新代码如下(因为col-xs-6定义的宽度是百分比，浮动样式，所以不要想到6*2=12，从源码上去考虑具体的表现结果)：

<div class="row"> 
    <div class="col-xs-6 col-sm-3">div1: .col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">div2: .col-xs-6 .col-sm-3</div>
    <div class="clearfix visible-xs"></div> 
    <div class="col-xs-6 col-sm-3">div3: .col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">div4: .col-xs-6 .col-sm-3</div> 
</div>

　　利用clearfix样式清除浮动，但是前提条件是在超小屏幕上显示才行（因为其实用visible-xs样式控制的）。