3.3 页面布局

Bootstrap框架设计了固定布局与流式布局两大类，下面分别针对这两类布局进行介绍。

3.3.1 固定布局

Bootstrap提供了一个通用的固定宽度，当然也可以变为响应式的布局方式，仅仅需要用<div class="container">即可。

【代码3-9】是一个Bootstrap固定布局的设计（详见源代码ch03目录中ch03.fixedLayout.html文件）：

        <div class="mini-layout">
            <div class="mini-layout-body"></div>
        </div>

上面的代码展示了Bootstrap固定布局的设计，页面效果如图3.8所示。

图3.8 固定布局

3.3.2 流式布局

Bootstrap同样提供了一个流式布局，仅仅需要利用<div class="container-fluid">代码就可以创建一个流式、两列的页面，非常适合于应用和文档类页面。

【代码3-10】是一个Bootstrap流式布局的设计（详见源代码ch03目录中ch03.fluidLayout.html文件）：

        <div class="mini-layout fluid">
            <div class="mini-layout-sidebar"></div>
            <div class="mini-layout-body"></div>
        </div>

上面的代码展示了Bootstrap流式布局的设计，页面效果如图3.9所示。

图3.9 流式布局