网格容器
<!--固定宽度的网格容器-->
<div class="container">
</div>
<!--与窗口等宽的非固定宽度网格容器(横向铺满)-->
<div class="container-fluid">
</div>
网格中行与列
<!--固定宽度的网格容器-->
<div class="container">
<!--行-->
<div class="row">
<!--宽度占本行的3/12的列-->
<div class="col-md-3">第1列</div>
<div class="col-md-3">第2列</div>
<div class="col-md-3">第3列</div>
</div>
</div>
列的媒体查询
可以根据屏幕宽度自动调整列所占屏幕宽度的比例
- 超小屏幕 宽度<768px 手机 类前缀.col-xs-
- 小型屏幕 宽度>=768px 平板 类前缀.col-sm-
- 中型屏幕 宽度>=992px 桌面 类前缀.col-md-
- 大型屏幕 宽度>=1200px 桌面 类前缀.col-lg-
列的偏移
- 如.col-md-offset-1 右移动1列
- 如.col-md-pull-2 左移动2列
下面的例子会调换两列的显示位置
<div class="container">
<div class="row">
<div class="col-md-6 col-md-push-6">第1列</div>
<div class="col-md-6 col-md-pull-6">第2列</div>
</div>
</div>