Bootstrap——CSS样式之栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

栅格系统就是加强了对盒子模型的应用。使用的基本流程入下：

1. 定义.container或者.container-fluid作为父元素
2. 再定义.row作为子元素
3. 通过“行（.row）”在水平方向创建一组“列（.col）

栅格参数

<!-- row类可以抵消container类的padding-->
<div class="container">
      <div class="row">
            <div class="col-lg-4">
                <h2 style="background-color: rebeccapurple">HELLO WORLD</h2>
            </div>
            <div class="col-lg-4">
                <h2 style="background-color: #25e4cd">HRLLO WOELD</h2>
            </div>
      </div>
</div>
<!--将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局-->

值得注意的是 如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

列偏移

使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>

嵌套列

在定义了一个列里面还可以进行嵌套.row新嵌套的行里的列数同样不能大于12。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列排序

列排序可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

<div class="row">
        <p>排序前</p>
        <div class="col-md-4" >
         我在左边
        </div>
        <div class="col-md-8" >
         我在右边
        </div>
    </div>
    <br>
    <div class="row">
    	<p>排序后</p>
        <div class="col-md-4 col-md-push-8" >
         我在左边
        </div>
        <div class="col-md-8 col-md-pull-4" >
         我在右边
        </div>
    </div>

Less mixin 和变量

由于预定义的栅格类已经够用，不再赘述，有兴趣可以去官网查看。