栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
工作原理
Bootstrap栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。栅格系统的工作原理如下：
- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便获得合适的对齐方式（alignment）和内边距（padding）。
- 通过“行（row）”在水平方向创建一组“列（column）”。
- 内容应当放置在“列”中，并且，只有“列”可以作为行”的直接子元素。
- 系统预定义了一些栅格类，比如 .row 和 .col-xs-4（超小屏幕下，占 4 列宽度）。可以用这些栅格类来快速创建栅格布局。同时，还提供了强大的mixin，用于生成更具语义的布局。
- 通过为“列”设置 padding 属性，从而创建列与列之间的间隙。通过为第一个列和最后一个列设置负值 margin 来抵消 padding 的影响。
- 通过指定1到12的值来表示列跨越的范围。比如，可以使用三个 .col-xs-4 来创建三个等宽的列。
- 如果一“行”中包含了的“列”大于 12，多余的“列”所在的元素将被作为一个整体另起一行排列。
- 栅格类应用于屏幕宽度大于或等于分界点大小的设备，即针对小屏幕的栅格类，对大屏幕依然起作用。比如，在一个元素上应用 .col-md-* 栅格类，它不仅会影响中等屏幕，而且如果该元素没有应用任何 .col-lg-* 类，它也会影响大屏幕设备。
栅格系统根据视口的宽度，将设备分为超小屏幕设备（xs：extra small）、小屏幕设备（sm：small）、中等屏幕设备（md：middle）、大屏幕设备（lg：large），并针对每种设备定义对应的栅格类 .col-xs、.col-sm、.col-md、.col-lg。这样做的好处是，允许使用Bootstrap的开发人员针对不同的设备，分别定义布局规则。通过下表，你可以很清楚的看到Bootstrap的栅格系统在多种屏幕的设备上是如何工作的：
| 超小屏幕 手机 (<768px) |
小屏幕 平板 (≥768px) |
中等屏幕 桌面显示器 (≥992px) |
大屏幕 大桌面显示器 (≥1200px) |
|
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
| 容器最大宽度 | None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列数 | 12 | |||
| 最大列宽 | 自动 | ~62px | ~81px | ~97px |
| 间隙宽度 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 列偏移 | 是 | |||
| 列排序 | 是 | |||
上表中不同屏幕分界点，是通过媒体查询定义的，以下是在 Less 文件中创建栅格系统中关键分界点的媒体查询：
/* 超小屏幕（手机，小于 768px） */
/* 没有媒体查询，因为这是Bootstrap 中的默认情况 */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
为了将 CSS 的影响限制在更小范围的屏幕大小之内，偶尔也会在媒体查询代码中包含 max-width。如：
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
以上媒体查询是按照视口的大小，从小到大的顺序来定义栅格系统的样式，从媒体查询的定义一眼就能看出Bootstrap3移动优先的设计理念。
根据CSS后来居上的规则（即后定义的样式会覆盖先定义的相同样式），大屏幕的样式会覆盖比它小的屏幕的相同样式。但是，如果大屏幕下没有定义相同的样式，则小屏幕的样式就不会被覆盖，大屏幕就自然而然地应用小屏幕的样式，也就实现了移动优先。
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。