基础项 —【栅格布局】

<div class="row col-xs-4">
    <button class="btn btn-block btn-info">Info</button>
</div>

以上代码表示 在这一行(row)中做12列格网布局，其中他占4分大小-->

格网布局由行（row）和列（column）构成。
使用容器包裹栅格系统:container,container-fluid

槽宽:每列左右都有15px

col-xs   超小屏幕手机(<768px)          最大列宽:自动 
col-sm   小屏幕平板(>=768px)           最大列宽:62px 
col-md   中等屏幕桌面显示器(>=992px)    最大列宽:81px 
col-lg   大屏幕桌面显示器(>=1200px)     最大列宽:97px 

<div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4 col-sm-offset-4"></div>
</div>

使用 .col-sm-offset-*类可以将列向右侧偏移。
这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<div class="row">
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

col-md-push-3的意思为让此类向后推3列;
col-md-pull-9的意思为让此类向前推9列;