今天我们来串串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>
在分析运行结果之前，先看两个陌生词：
- push：
推的意思，向右推，后面的数字代表拉的量 - pull：
拉的意思，向左拉，后面的数字代表拉的量
上面这段代码就是：
- 将第一个网格向右推6等分，于是就到了7等分的位置；
- 将第5个等分向左拉2个网格，于是就到了3等分的位置
这样就好理解了吧。
以上就是今天整理的内容，有想法的可以留言至文章下面哦~
