Bootstrap的栅格系统

以下内容来自于v3中文文档

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

工作原理就不码了

记住几个重点：一行最多12个column,多余的column将另起一行排列，在这个代码中，9+4大于12所以你会看见md-4在第二行,4+6小于12，所以你会看见4和6在同一行排列;

例:

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

当个别column略高时，要使用.clearfix和响应式工具;

可以通过设置col-类别-offset-单位来控制右移

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

<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>

<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

bootstrap提供了媒体查询来使用媒体查询来创建分界点阈值.

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
/*限制在范围之内*/
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

参数表: