栅格系统
栅格系统是Bootstrap响应式布局的框架,栅格系统通过一系列的行(row)与列(column)的组合来创建页面布局:
- 行
(.row)
必须包含在容器container或container-fluid
里; - 在行内创建一组水平排开的列
(.col)
; - 每一行被分为12格,通过类似
.col-sm-4
的类来控制每一列占位多少格(这里是4格); - 每一行的列所占格数超过12,便会引起换行;
- 可以对不同大小的屏幕定义不同的布局:
col-xs-*,col-sm-*,col-md-*,col-lg-*
分别代表手机、平板、显示器、大显示器。*
则代表所需要设置的格子数,范围1,12 - 列偏移
.col-md-offset-*
:使用.col-md-4
元素向右侧偏移了4个列的宽度;并影响后续所有的列. - 列排序 控制列左/右移动,不影响其他列
.col-lg/md/sm/xs-pull-* 拉
.col-lg/md/sm/xs-push-* 推
<div class="container bg">
<div class="row">
<!-- 只有在md尺寸的屏幕下 MD-3隐藏-->
<div class="col-md-3 bgMD3">MD-3</div>
<div class="col-md-9 bgMD9">MD-9</div>
</div>
<div class="row">
<!-- 只有在md尺寸的屏幕下,MD-3和MD—9交换出现的位置-->
<div class="col-md-3 bgMD3 col-md-push-9">MD-3</div>
<div class="col-md-9 bgMD9 col-md-pull-3">MD-9</div>
</div>
</div>