响应式分栏

Bootstrap 12栏网格系统

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

• 小屏幕断点
• @screen-sm-min 768px
• 中屏幕断点
• @screen-sm-min 992px
• 大屏幕断点 1200px

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

示例代码：

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

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

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

响应式导航条的断点调整

当加入Logo等较宽的图标时，会出现原本Logo和文字在一行却被挤到了上面的情况，原因是在介于@screen-sm-min和@screen-md-min之间时出现了断点情况
变量@grid-float-breakpoint决定了导航条在窗口多宽是会折叠，所以在variables.less中查找Navbar

// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

更改为：@screen-md-min

成功！

将链接变成按钮

使用按钮所需要的类：

• btn类用于把链接变成按钮的样式
• btn-primary类用于把按钮变成主品牌颜色
• pull-right类用于把链接浮动到右侧，使其占据更大的空间，从而更便于发现和点击

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