3.2　栅格系统

栅格系统是Bootstrap框架的一大特色，通过使用栅格系统使得页面布局更简单、更合理、更美观、更易于维护。

3.2.1　默认栅格系统

1．栅格系统特性

Bootstrap框架默认的栅格系统最多为12列，形成一个960px宽的容器，默认就是响应式布局特性。栅格系统会根据可视窗口的宽度从540px到1140px进行自适应的动态调整。在可视窗口小于540px宽的情况下，列将不再固定并且会在垂直方向进行自动堆叠。以上这几条描述的就是Bootstrap栅格系统的特性。

图3.1就是Bootstrap栅格系统（12列栅格）的一个示例。

图3.1　Bootstrap栅格系统

2．带有基本栅格的HTML代码

假设应用简单的列式布局，设计时创建一个类名为.row的容器，并在容器中加入合适数量的列（类名为.col）即可。Bootstrap默认是12列的栅格，所以.col列所跨越的栅格数之和应该是12（或者等于其父容器的栅格数）。.col的取值前面简单介绍过，比如.col-sm-4就是将手机屏幕分为3列，12除以4是3，而sm代表大手机（540px~720px屏幕之间）。.col-xl-3就是将大型桌面分为4列。

【代码3-3】一个基本的栅格布局设计（详见源代码ch03目录中ch03.gridBase.html文件）

    <div class="row">
      <div class="col">首页</div>
      <div class="col">文档</div>
      <div class="col">帮助</div>
    </div>

上面的代码展示了等宽3列的栅格布局，页面效果如图3.2所示，这是Bootstrap自动布局的效果。

图3.2　基本栅格系统

3．偏移列

Bootstrap栅格系统支持偏移列，可以使用offset-*-*类将列向右移动，相当于将列的左边距增加了指定单位的宽度。offset-*-*类中第一个星号（*）可以是sm、md、lg、xl，表示屏幕设备类型，第二个星号（*）可以是1~11的数字，比如offset-*-4就是往右移动4格。

【代码3-4】偏移列的栅格布局设计（详见源代码ch03目录中ch03.gridOffset.html文件）

上面的代码展示了.offsetXX的栅格布局，页面效果如图3.3所示。首列偏移后，最后一列折叠到了第2行。

图3.3　偏移列栅格系统

4．不等宽列

Bootstrap栅格系统前面都是设计的等宽列，如果有12列，前面是3格，中间是6格，是不是也可以呢？答案是可以的。

【代码3-5】不等宽的栅格布局设计（详见源代码ch03目录中ch03.gridNesting.html文件）

上面的代码展示了不等宽列的栅格布局，页面效果如图3.4所示，其中第一列宽是3格，第二列宽是6格，第三列宽是3格。

图3.4　不等宽栅格系统

3.2.2　流式栅格系统

流式栅格系统的特点是对每一列的宽度使用百分比，这是它与固定栅格系统的主要区别。流式栅格系统与固定栅格系统一样拥有响应式布局的能力，这就保证其能对不同的分辨率和设备做出适当的调整。

1．基本的流式栅格的HTML代码

流式栅格将固定栅格的.row类替换为.row-fluid类，就能让任何一行“流动”起来，应用于每一列的类不用改变，这样能方便地在流式与固定栅格之间切换。

【代码3-6】一个基本的流式栅格布局设计（详见源代码ch03目录中ch03.fluidBase.html文件）

上面的代码展示了.span1、.span2和.span4的流式栅格布局，页面效果如图3.5所示。

图3.5　基本流式栅格系统

2．流式栅格的偏移

Bootstrap流式栅格系统同样支持偏移列，使用.offsetXX类即可，相当于将列的左边距增加了指定百分比的宽度。

【代码3-7】流式栅格布局偏移设计（详见源代码ch03目录中ch03.fluidOffset.html文件）

上面的代码展示了.offsetXX的流式栅格布局，页面效果如图3.6所示。

图3.6　流式栅格系统偏移

3．流式栅格的嵌套

Bootstrap流式栅格系统同样支持嵌套列，在默认栅格系统里将已有的.spanXX列内添加一个新的.row-fluid并加入.spanXX列，就可实现嵌套。需要注意的是，被嵌套列中的每列列数总和要等于父级列。

【代码3-8】流式栅格布局嵌套设计（详见源代码ch03目录中ch03.fluidNesting.html文件）

上面的代码展示了嵌套列的流式栅格布局，页面效果如图3.7所示。

图3.7　流式栅格系统嵌套