Bootstrap3实用教程
2.2.1 工作原理
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验