1.背景介绍

Bootstrap是2011年由Twitter工程师们制作的一套开源框架。他可以简单、灵活的用于搭建WEB页面。是最受欢迎的HTML,CSS,JavaScript框架。

Bootstrap栅格(网格)系统是Bootstrap中的一个响应式的、移动设备优先的、不固定的网格系统。他可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

2.知识剖析

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
行(row)必须放置在 .container(固定宽度)或.container-fluid(100%宽度)内，以便获得适当的对齐(alignment)和内边距(padding)。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

Container 有两个作用： 1.在随时可能的宽度变化(响应式)中提供宽度限制。当页面宽度变化，container 的宽度也随之变化。并且其中的 column 的宽度是基于百分比，所以他们的值不需要变化。
2.提供一个水平方向的 padding，使其内部的内容不会接触到浏览器的边界，大小为15px，就是图片中粉红色的部分，作用会在下面说。
注意，不需要也不应该在 container 中嵌套另一个 container。

媒体查询

@media all and (min-width:1000px)

媒体类型
all 用于所有配置
screen 用于电脑、平板电脑、智能手机等
print 用于打印机和打印预览
speech 用于屏幕阅读等发声设备
逻辑运转符：or(或)、and（并且、和）
or:任意满足及返回true
and:任意不满足及返回false
媒体特性（有很多种）
max-width 设备中的页面最大可见区域宽度
min-width 设备中的页面最小可见区域宽度

.col-xs-:extra small      .col-sm-:small      .col-md-:medium       .col-lg-:large

3.常见问题

Bootstrap栅格布局的响应式如何实现？

4.解决方案

利用列重置，列偏移。

在<div class="col-xs-* col-sm-* col-md-* col-lg-*"></div> 通过给col附加不同的class前缀，以此对应不同的屏幕下，内容的宽度。

5.编码实战

6.扩展思考

栅格布局的源码是怎样的？

bootstrap栅格的缺点

不兼容IE8以下的浏览器，有兼容需求就不能用了

7.参考文献

8.更多讨论