02-BootStrap布局元素

一、布局容器

Bootstrap所有的容器布局都在这个里面，注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

1..container：15px拥有内外边距的父容器。

2..container-fluid：充满全屏的容器。

二、栅格系统

1、.row：定义行，一行默认12列。

1. .col-xs-*：定义手机屏幕的列宽。

   .col-sm-*：定义平板屏幕的列宽。

   .col-md-*：定义普通屏的列宽。

   .col-lg-*：定义大屏幕的列宽。

[^ *号的含义]: 代表占的列宽，不能超过12，多余的列会另起一行。col-md-4 占3列的宽。，所有的col必须包含在row中，所有的row必须包含在container中。col的水平padding为15px。，有所的列属性可以搭配使用以便于在不同的显示器不同的显示效果。

2、清除浮动：.clearfix

3、列偏移：.col-md-offset-*，

​ 列偏移通过增加左边距实现偏移。

4、嵌套列：

<div class="row">
  <div class="col-sm-9">
    <div class="row">
      <div class="col-xs-8 col-sm-6">嵌套列</div>
      <div class="col-xs-4 col-sm-6">嵌套列</div>
    </div>
  </div>
</div>

5、列排序：.col-md-push-* 和 .col-md-pull-*

​ push = left偏移 || pull = right偏移

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

6、列显示和列隐藏

​ 当大屏幕显示 小屏幕隐藏 - visible-md-8 hidden-xs