栅格系统
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 上开源。