Boostrap技能点整理之【网格系统】

今天我们来串串bootstrap总的网格系统，说到网格系统，依稀记得当时教程上不叫网格，而叫栅格，我总觉得这个栅(shān )读起来不得劲，就读他的另一个音，栅（zhà）格，每次遇到就读栅（zhà）格系统栅（zhà）格系统

好了，闲言少叙，接下来我们看看bootstrap中的网（栅）格系统。

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，这12列也是可以随便拆分与组合的，即：

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。
LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。
该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。
例如，要创建三个相等的列，则使用三个 .col-xs-4。

下面我们可以来写一个基本的网格结构：

<div class="container">
      <div class="row">
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
      </div>
</div>

运行结果是这样的：

我们从图中不难看出，整个网格系统将会浏览器的宽度分为了12等分，那么这12个等分可不可以进行随便组合或者随便嵌套呢？答案是肯定的。

列组合

比如我们可以这样：

<div class="row">
        <div class="col-md-3">3等分</div>
        <div class="col-md-3">3等分</div>
        <div class="col-md-3">3等分</div>
        <div class="col-md-3">3等分</div>
      </div>

也可以这样：

<div class="row">
        <div class="col-md-5">5等分</div>
        <div class="col-md-7">7等分</div>
      </div>

列偏移

或者这样：

<div class="row">
        <div class="col-md-3">3等分</div>
        <div class="col-md-3 col-md-offset-6">3等分</div>
      </div>

上面这段代码中有个新知识点，即：col-md-offset表示列偏移，偏移多少取决于后面的数字，例如本段代码就是向右偏移6等分。（中间的空格部分为6等分，大家可以自行算算）

下面再来一个关于列偏移的案例，加深一下理解：

<div class="row">
        <div class="col-md-2">2等分</div>
        <div class="col-md-2 col-md-offset-1">2等分</div>
        <div class="col-md-2 col-md-offset-2">2等分</div>
        <div class="col-md-2 col-md-offset-1">2等分</div>
      </div>

（空格部分已经标注明白）

除了组合之外，我们还可以进行对网格的嵌套：

列嵌套

<div class="row">
        <div class="col-md-6">6等分
            <div class="col-md-12" style="background: mediumpurple;">12等分</div>
            <div class="col-md-6" style="background: green;">6等分</div>
            <div class="col-md-6" style="background: red;">6等分</div>
            <div class="col-md-4" style="background: yellow;">4等分</div>
            <div class="col-md-4" style="background: greenyellow;">4等分</div>
            <div class="col-md-4" style="background: darkgoldenrod;">4等分</div>
        </div>
        <div class="col-md-6" style="background: red;">6等分</div>
        
      </div>

说明一下：最外面的大的是两个6等分，左边的6等分里面：

第一行分为1个12等分
第二行分为2个6等分
第三行分为3个4等分
下面我相信大家会往下接了，例如4个3等分，6个2等分以及12个1等分

列排序

还可以对网格进行排序（稍微复杂点）

<div class="row">
        <div class="col-md-1">1等分</div>
        <div class="col-md-1 col-md-offset-1">3等分</div>
        <div class="col-md-1 col-md-offset-1">5等分</div>
        <div class="col-md-1 col-md-offset-1">7等分</div>
        <div class="col-md-1 col-md-offset-1">9等分</div>
        <div class="col-md-1 col-md-offset-1">11等分</div>
      </div>
      <div class="row">
        <div class="col-md-1 col-md-push-6">右推6等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1 col-md-pull-2" style="background: red;">左拉2等分</div>
        
      </div>