我们在使用Bootstrap的时候，可以使用栅格系统对网页进行布局。接下来我们就一起来学习一下栅格系统布局的方法。

container类

特点：

• container类（class）能创建一个居中的区域，然后我们能够把其他位置的内容放到里面。
• 带有container类的div框等价于一个具有静态宽度并且margin值为auto的居中的div框。
• container类的优点在于它是响应式的,它会以当前屏幕的宽度为基础计算出最佳的宽度予以应用。
  示例：

<div class="container">
    <table width="100%">
        <tr>
            <th>考试科目：统一建模语言</th>
            <th>时间：100分钟</th>
            <th>得分：</th>
        </tr>
    </table>
</div>

效果：

container类创建居中的区域

如果，要用CSS实现上面的效果，添加的代码为：

.container{
            margin-left: 80px;
            margin-right: 80px;
        }

但是这样添加实现不了响应式的布局，因为左右的边距是给定的，如果屏幕比较小的时候就实现不了上述的效果。

栅格系统

特点：
响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
工作原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

实例：
1.基本的栅格结构
代码：

<div class="container">
    <div class="row" >
        <div class="col-md-4" style="border:1px solid grey">
            考试科目：统一建模语言
        </div>
        <div class="col-md-4" style="border:1px solid grey">
            时间：100分钟
        </div>
        <div class="col-md-4" style="border:1px solid grey">
            得分：
        </div>
    </div>
</div>

效果：

栅格的基本用法

2.偏移列
使用 .col-md-offset-* 类实现偏移。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
代码：

<div class="container">
    <h3>欢迎进入</h3>
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <p>name:</p><input type="text"/>
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <p>password:</p><input type="password"/>
        </div>
    </div>
</div>

效果：

偏移列

3.嵌套列
为了在内容中嵌套默认的栅格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）
代码：

<div class="container">
    <h3>欢迎登录</h3>
    <div class="col-md-4" style="border:1px solid grey">
        填写信息：
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-4">
                考试科目：统一建模语言
            </div>
            <div class="col-md-4">
                时间：100分钟
            </div>
            <div class="col-md-4">
                得分：
            </div>
        </div>
        <div class="row">
                <div class="col-md-4">
                    班级：<input type="text">
                </div>
                <div class="col-md-4">
                    学号：<input type="text" >
                </div>
                <div class="col-md-4">
                    姓名：<input type="text" >
                </div>
        </div>
    </div>
</div>

效果：

嵌套列