bootstrap栅格布局

首先，我们要为页面内容和栅格系统包裹一个 .container 容器：

<div class="container">
  ...
</div>

.container 类用于固定宽度和响应式布局的容器，如果占据 100% 的宽度，使用 .container-fluid 类：

<div class="container-fluid">
  ...
</div>

栅格系统会根据屏幕和视口（viewport）的尺寸，将一行分为最多 12 列，通过预设好的栅格类表示需要占多少个列宽度。比如，可以使用 3 个 .col-xs-4 可以将页面容器分成 3 个等分。使用 1 个 .col-xs-3 和 1 个 .col-xs-9 ，可以对页面容器进行 3：9 比例分割，实现一个左侧 Sidebar 的效果。比如：

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

除了指定宽度，还可以通过指定 .col-md-offset-* 等进行偏移。回到一个重要的问题，知道了大致如何布局，那如何进行移动适配呢？

上面的例子我们看到，有 .col-xs-* 和 .col-md-* 等等，其实 xs 、 md 等对应的是不同显示设备。比如：

*******************************************************************************

• .col-xs-* ：超小屏幕、手机 (<768px)

• .col-sm-* ：小屏幕 平板 (≥768px)

• .col-md-* ：中等屏幕 桌面显示器 (≥992px)

• .col-lg-* ：大屏幕 大桌面显示器 (≥1200px)

*******************************************************************************

通过给 div 定义多个 col-xx-* 的组合就可以达到不同移动设备进行布局适配的目的。

比如下面的示例：

<div class="row">
  <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
  <div class="col-xs-6 col-md-9">.col-xs-6 .col-md-9</div>
</div>

将实现在手机端进行 6：6 布局，在中等屏幕的PC端进行 3 : 9 布局。