Bootstrap 网格系统的学习

一、什么是Bootstrap网格系统？

简单来说，Bootstrap包含一套响应式的、移动设备优先的、不固定的网格系统，可以随着设备的大小增加而适当的进行扩展到12列。
也就是通过定义容器的大小，平分12份，在调整内外边距，最后再结合媒体查询的方式运用网格系统。

二、Bootstrap网格系统的工作原理

1、数据行row必须放在.container class内，这样才能获得适当的对齐alignment与内边距padding。

<div class="container">
    <div class="row">
    ......
    </div>
</div>

2、在数据行.row class中添加列，但是列的总数不能超过12。如下代码：

<div class="container">
<div class="row">
  <div class="col-md-4">4</div>
  <div class="col-md-8">8</div>
</div>

将一行row分为比例为4：8的两个列。
3、我们需要设置存放的内容是要放在列.column中，而不是行.row中。

三、bootstrap基本用法

在介绍网格系统的使用之前，需要了解bootstrap在不同屏幕对应的网格样式及一些属性。如下图：

bootstrap基本的网格结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

bootstrap网格系统的使用其实就是通过对列的排序、列的组合、列的偏移、列的嵌套等来控制的。
1、列的组合：就是将12个格子平均按照所需分配。可以是4-8组合，可以是4-4-4组合，可以是6-6组合等。

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</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-3">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
 </div>
</div>

2、列的偏移：有时候我们不需要将两个相邻的列紧挨在一起，这时候就可以试用列偏移来实现。但是.col-xs-* 类不支持偏移。我们使用“col-md-offset-*”来实验。
使用“col-md-offset-*”其中星号代表要偏移的列组合数（1-11），比如我们需要将某一列向右偏移4个列的宽度。

<div class="col-md-6 col-md-offset-4">列向右移动四列的间距来居中该div</div>

3、列的排序：使用带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序。

.col-md-push-向右， .col-md-pull- 向左

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

4、列的嵌套：可以在一个列中增加多个行row，然后在行中插入列。

<div class="row">
      <div class="col-md-8">
        在.col-md-8嵌套一个row(3个col-md-4)
        <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> 
      <div class="col-md-4">在.col-md-4我没嵌套</div>
    </div>

嵌套的网格也是按照父类网格的宽度分配的宽度的，是在嵌套父类.col-md-8网格的的外部的，并不是在其内部。