布局容器
Bootstrap需要为页面内容和栅格系统包裹容器。提供了两种容器类:.container和.container-fluid,两者不能嵌套使用。
.container 类用于固定宽度并支持响应式布局的容器,宽度为不同屏幕尺寸下的固定值。
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
区别:例如当屏幕尺寸大于1170px时,.container 下宽度保持为1170,.container-fluid 占据100%宽度。
栅格系统
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
- | 超小屏幕(<768px) | 小屏幕(>768px) | 中等屏幕(>992px) | 大屏幕(>1200px) |
---|---|---|---|---|
.container最大宽度 | 自动 | 750px | 970px | 1170p |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg |
自适应设置
为了在不同屏幕尺寸下显示不同的效果,可以为相同的内容添加不同类。
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
上面的代码在超小屏幕下第一个div占第一行12列,第二个div占第二行6列;在小屏幕上第一个div占第一行6列;在中等屏幕下,第一个div占第一行8列,第二个div占第一行4列.
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。
.col-md-前缀类只有在屏幕大于992px的时候有效,同理其他前缀类
嵌套列
外层div里添加.row元素即可嵌套列。父元素再被分割成12列。
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。
.col-md-push-*:原位置往后推;
.col-md-pull-*:原位置忘前拉;
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> //往后推3格
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> //往前拉9