系统">Bootstrap 12栏网格系统

Bootstrap 3中通过创造性的使用了媒体查询，使得网格系统具有极强的适应力。
Bootstrap内置了三个断点：

小断点一个特殊栏类命名法：col-sm-
如果我们想在小断点上使用三栏，就加上class="col-sm-4"，这样，在小断点之下分块元素会保持全宽，而之上会保持三分之一宽并肩排列。

示例代码：

<p class="container">
    <p class="row">
        <p class="col-sm-4">
            <h2>Welcome!</h2>
            <p>Suspendisse et arcu felis....</p>
            <p><a href="#">See our portfolio</a></p>
        </p>
        <p class="col-sm-4">
            <h2>Recent Updates</h2>
            <p>Suspendisse et arcu felis....</p>
            <p><a href="#">See our portfolio</a></p>
        </p>
        <p class="col-sm-4">
            <h2>Our Team</h2>
            <p>Suspendisse et arcu felis....</p>
            <p><a href="#">Meet the team!</a></p>
        </p>
    </p>
</p>

解析：
container类用于约束内容的宽度，并使其在页面内居中
row类用于包装三个栏，并为栏间留出左右外边距
container和row类都设定了清除，因此他们可以包含浮动元素，同时又清除之前的浮动元素。

效果：
当浏览器窗口超过768px时，可以看到三栏布局
当浏览器窗口小于768px时，看到三栏变成了一栏

将链接变成按钮

使用按钮所需要的类：

<p><a class="btn btn-primary pull-right" href="#">See our portfolio</a></p>