Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
在 HTML5 的项目中，设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等属性的原因，这两种容器类不能相互嵌套。
栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12 列。通过一系列的行(row)与列(column)的组合来创建页面布局。
具体的布局特征：
列偏移
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 a col-md-offset-2">3</div>
</div>
列嵌套
<div class="row">
<div class="col-md-9 a" style="padding: 0;">
<div class="col-md-4 a">4</div>
<div class="col-md-4 a">4</div>
<div class="col-md-4 a">4</div>
</div>
<div class="col-md-3 a">3</div>
</div>
交换位置
<div class="row">
<div class="col-md-9 col-md-push-3 a">
9
</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>