Bootstrap3 栅格系统

栅格系统

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 上开源。