Bootstrap全局CSS样式

布局容器

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