栅格系统（布局）

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：

行（row）必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。使用行（row）在水平方向创建一组列（cpumn）。你的内容应当放置于列（cpumn）内，而且，只有列（cpumn）可以作为行（row）的直接子元素。类似Predefined grid classes like .row and .cp-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。通过设置padding从而创建列（cpumn）之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.cp-xs-4来创建。

DW6编码实现

Okay勒，下面开始写代码了额。首先上一张图看看我使用的编辑器，之前在学校学习Html+CSS的时候使用较多的工具。

然后新建一个HTML文档，选择类型HTML5

创建好后，另存为与上一节的讲解中js、css文件夹的同一目录下。

layout.html就是我刚刚创建的文件。Bootstrap.html也是上一节中创建的第一个html页面。

现在可以将Bootstrap.html中的代码全部Copy到layout.html页面。

然后在body标签下添加如下代码

添加完后layout.html页面所有代码如下

当然效果也很简单，我还是把截图放上，可以进行对比。

优化一：可以发现上图的页面效果占满全屏，我们可以通过Bootstrap 样式类对上面的内容进行居中。

可以发现container这个类设置了宽度，并且可以让内容显示在页面的中间。

优化二：将三个区域显示在同一排，并且平均分成三栏。

首先为三个区域添加一个容器，可以使用div，并且为div添加一个类