Bootstrap Web设计与开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.2 栅格系统

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

3.2.1 默认栅格系统

1．栅格系统特性

Bootstrap框架默认的栅格系统最多为12列，形成一个940px宽的容器，而且默认没有启用响应式布局特性。如果设计时加入响应式布局的CSS文件，栅格系统则会根据可视窗口的宽度从724px到1170px进行自适应的动态调整。假如在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向进行自动堆叠。以上这几条描述的就是Bootstrap栅格系统的特性。

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

图3.1 Bootstrap栅格系统

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

假设应用简单的列式布局，设计时创建一个类名为．row的容器，并在容器中加入合适数量的．spanXX列即可。由于Bootstrap默认是12列的栅格，所有．spanXX列所跨越的栅格数之和最多是12（或者等于其父容器的栅格数）。

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

        <div class="bs-docs-grid">
            <div class="row show-grid">
              <div class="span1">1</div>
            </div>
            <div class="row show-grid">
              <div class="span2">2</div>
            </div>
            <div class="row show-grid">
              <div class="span4">4</div>
            </div>
            <div class="row show-grid">
              <div class="span8">8</div>
            </div>
            <div class="row show-grid">
              <div class="span12">12</div>
            </div>
        </div>

上面的代码展示了．span1、.span2、.span4、.span8和．span12的栅格布局，页面效果如图3.2所示。

图3.2 基本栅格系统

3．偏移列

Bootstrap栅格系统支持偏移列，可以使用．offsetXX类将列向右移动，相当于将列的左边距增加了指定单位的宽度。

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

        <div class="bs-docs-grid">
            <div class="row show-grid">
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
            </div>
            <div class="row show-grid">
              <div class="span2">span2</div>
              <div class="span3 offset3">3 offset 3</div>
            </div><! -- /row -->
            <div class="row show-grid">
              <div class="span3 offset3">3 offset 3</div>
              <div class="span2 offset2">2 offset 2</div>
            </div><! -- /row -->
            <div class="row show-grid">
              <div class="span6 offset6">6 offset 6</div>
            </div><! -- /row -->
        </div>

上面的代码展示了．offsetXX的栅格布局，页面效果如图3.3所示。

图3.3 偏移列栅格系统

4．嵌套列

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

【代码3-5】是嵌套列的栅格布局设计（详见源代码ch03目录中ch03.gridNesting.html文件）：

        <div class="row show-grid">
            <div class="span12">
              level 1
              <div class="row show-grid">
                  <div class="span3">
                      level 2
                  </div>
                  <div class="span6 offset3">
                      level 2
                  </div>
              </div>
            </div>
        </div>

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

图3.4 嵌套列栅格系统

3.2.2 流式栅格系统

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

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

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

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

        <div class="bs-docs-grid">
            <div class="row-fluid show-grid">
              <div class="span1">1</div>
            </div>
            <div class="row-fluid show-grid">
              <div class="span2">2</div>
            </div>
            <div class="row-fluid show-grid">
              <div class="span4">4</div>
            </div>
        </div>

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

图3.5 基本流式栅格系统

2．流式栅格的偏移

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

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

        <div class="bs-docs-grid">
            <div class="row-fluid show-grid">
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
            </div>
            <div class="row-fluid show-grid">
              <div class="span2">span2</div>
              <div class="span3 offset3">3 offset 3</div>
            </div><! -- /row -->
            <div class="row-fluid show-grid">
              <div class="span3 offset3">3 offset 3</div>
              <div class="span2 offset2">2 offset 2</div>
            </div><! -- /row -->
            <div class="row-fluid show-grid">
                <div class="span6 offset6">6 offset 6</div>
            </div><! -- /row -->
        </div>

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

图3.6 流式栅格系统偏移

3．流式栅格的嵌套

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

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

        <div class="row-fluid show-grid">
            <div class="span12">
              level 1
              <div class="row-fluid show-grid">
                  <div class="span3">
                      level 2
                  </div>
                  <div class="span6 offset3">
                      level 2
                      <div class="row-fluid">
                        <div class="span6">Fluid 6</div>
                        <div class="span6">Fluid 6</div>
                      </div>
                  </div>
              </div>
            </div>
        </div>

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

图3.7 流式栅格系统嵌套

上一章目录下一章