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 布局。