第2篇 Bootstrap框架

第3章 Bootstrap栅格系统

3.1 Bootstrap栅格系统的原理

3.1.1 栅格系统的实现原理

栅格系统的实现原理非常简单，将网页的总宽度平均分为12份，再调整内外边距，最后结合媒体查询，从而实现强大的响应式栅格系统。例如有名的960Grid System（网址https://960.gs/demo.html）就是把960像素宽的区块切分成12栏，视觉设计与网页排版时就按照所需要的大小对齐栏线，如图3-1所示。

网站应用栅格系统后的页面效果如图3-2所示。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。栅格系统使用的总宽度可以不固定，Bootstrap会按百分比进行平分。12栅格系统是整个Bootstrap的核心功能，也是响应式设计核心理念的一个实现形式。

3.1.2 栅格系统的工作原理

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，其工作原理如下。

行必须包含在.container（固定宽度）或.container-fluid（100%宽度）类中，以便为其赋予合适的对齐方式（aligment）和内边距（padding）。

通过行在水平方向创建一组列。页面内容应当放置于列内，并且，只有列可以作为行的直接子元素。

行使用样式.row，列使用样式.col-*-*，内容应当放置于列内，这种预定义的类可以用来快速创建栅格布局。例如.col-md-4就表示占4列宽度。

通过为列设置padding属性，可以创建列与列之间的间隔。通过为包含.row类的元素设置负值margin（-15px），可以抵消掉为.container元素设置的padding（15px），也就间接为行所包含的列抵消掉了padding。

栅格系统中的列通过指定1到12的值来表示其跨越的范围。例如，4个等宽的列可以使用4个.col-xs-3来创建。如果一行中包含的列数大于12，多余的列所在的元素将被作为一个整体另起一行排列。

Bootstrap 3使用了4种栅格选项来形成栅格系统，这4种栅格选项的区别在于适合不同尺寸的屏幕设备，官网上Bootstrap 3的栅格参数如表3-1所示。

Bootstrap 3的栅格设置具体含义如下。

● 手机（屏幕宽度小于768px），class语句为.col-xs-1～.col-xs-12。

● 平板（屏幕宽度大于或等于768px），class语句为.col-sm-1～.col-sm-12。

● 一般计算机小型显示器（屏幕宽度大于或等于992px），class语句为.col-md-1～.col-md-12。

● 一般计算机大型显示器（屏幕宽度大于或等于1200px），class语句为.col-lg-1～.col-lg-12。

【实例3-1】 Bootstrap栅格系统原理演示，代码如下。

运行【实例3-1】代码，页面效果如图3-3所示。

通过图3-3可以看出，本例的“<div class="container">”在屏幕中水平居中，左右两侧有同等留白，.container共包含了4个“<div class="row">”。

栅格类适用于屏幕宽度大于或等于分界点大小的设备。在栅格系统中使用的各个样式类：.container左右各有15px的内边距，.row是列的容器，最多只能放入12个列。行左右各有-15px的外边距，可以抵消.container的15px的内边距；.column左右各有15px的内容边距，可以保证内容不挨着浏览器的边缘；两个相邻的列的内容之间有30px的间距。

3.1.3 响应式栅格

在栅格系统中，.container支持响应式设计，其在媒体查询样式中进行了定义。针对不同的设备，container的宽度不同。

➢ 当屏幕宽度<768px时，.container使用最大宽度，效果和.container-fluid一样。

➢ 当768px≤屏幕宽度<992px时，.container的宽度为750px。

➢ 当992px≤屏幕宽度<1200px时，.container的宽度为970px。

➢ 当屏幕宽度≥1200px时，.container的宽度为1170px。

例如，运行【实例3-1】的页面效果，拖曳改变浏览器的宽度，可以看到不同的效果。当屏幕<992px后，所有列变成从上到下依次排列，例如在浏览器的宽度为800px和600px时呈现的效果是一样的，如图3-4所示。

在使用.col-md-*为类名时，*号表示占了多少列的宽度，例如col-md-3表示该列占了12列中3列的宽度。

栅格系统是向大兼容的，打开CSS文件夹下bootstrap.css文件中的媒体查询源码如下。

若想在不同设备上呈现一样的效果，可以针对同一行代码使用不同视口下的样式。

【实例3-2】 将【实例3-1】中的代码“<div class="col-md-1">”全部替换为“<div class="col-xs-1">”，也就是使用“xs”替换“md”。

运行【实例3-2】代码，在不同视口下可以呈现同样的效果，效果如图3-5所示。

可以针对同一元素添加不同的类来控制页面的呈现效果，进而实现响应式栅格。

例如，编写如下代码：

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">A1</div>

依据规则，可以实现在手机屏幕上（屏幕宽度小于768px）为水平的100%显示，在平板屏幕上（768px≤屏幕宽度<992px）时呈现每行可放置2个元素，在宽度大于或等于992px、小于1200px的计算机屏幕上（屏幕宽度<1200px）时每行放置3个元素，在计算机屏幕上（≥1200px）时每行放置4个元素。

【实例3-3】 使用清除浮动“.clearfix”类结合“visible-*”类解决栅格布局中的布局错位问题。

【实例3-3】中的添加样式代码如下。

【实例3-3】中的HTML代码如下。

运行【实例3-3】代码，在不同视口下呈现的效果如图3-6所示。

注意，如果如下代码中的文字多少不同，页面将会呈现出高度不一的情况。

例如，将代码：

修改为

原本的设计应该是在平板计算机状态下，为两行，每行呈现两列，各占6个栅格，如上修改代码后页面运行效果如图3-7所示。

这样呈现的结果是出乎意料的，这主要因为<col>元素都是采用左浮动，第1个<div>元素的高度过高，所以第3个<div>元素直接漂浮到第1个<div>元素的右侧，而第4个<div>元素进入第3行。如果想让第3个和第4个<div>元素在一行呈现，则需要清除浮动。

解决这个问题，需要使用Bootstrap提供的.clearfix样式，添加样式后的代码如下。

因为，只需要针对iPad屏幕清除浮动，所以还需要用visible-sm样式将其显示，页面效果如图3-8所示。

3.1.4 响应式实用工具

为了更快地实现对移动设备的友好支持，Bootstrap提供了一套辅助类，使用这些工具类可以通过媒体查询技术实现内容在不同设备上的显示与隐藏。

目前，Bootstrap提供的响应式实用工具类如表3-2所示。

响应式实用工具类目前只适用于块和表切换。

【实例3-4】 添加样式，代码如下。

HTML代码如下。

运行【实例3-4】代码，不同视口呈现的效果如图3-9所示。