栅格布局 （用12计数）
一行为12 总数为12 就是100%的意思
如果一行写2个块 就是6
col-xs-6
col-md 和col-sm用的是最多的
响应式工具
##
语法：
```
<div class="container-fluid">
<div class="row">
...
</div>
</div>
```
栅格不只是能切割页面，栅格写哪个元素就对哪个元素切分
只不过通常栅格用来切割整个页面，用来页面布局
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
## 使用栅格技巧
```
在一个<div class="row">
</div>
```
中如果超过12就会掉下去重新起一个，这个适用于图片
或者ul li标签等应用场景
如下代码（代码1）：
~~~
<!--图片-->
<div class="container">
<div class="row ">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/img47.png" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/img47.png" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/img47.png" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/img47.png" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/img31.jpg" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/img31.jpg" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/img31.jpg" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/img31.jpg" alt="...">
</a>
</div>
</div>
</div>
~~~
在此代码中（代码1），他们父集都是 class="row " 这个DIV，这里设置了 栅格在手机屏幕的时候=6 在平板屏幕=3
=6的时候 也就是显示2个图片 2*6=12
=3的时候就是显示4个图片 3*4=12
如果超出12的时候就会自动掉下去另起一行，这样就完成了一次性布局。 太好用了栅格系统
栅格案例代码（2）：
~~~
<div class="container">
<div class="row">
<!--左边-->
<div class="col-md-8 gleft">
<!--左边里的上面-->
<div class="glefttop ">
</div>
<!--左边里的中间-->
<div class="row">
<div class="col-md-6 gleftzhong1 ">
</div>
<!--左边的中间2-->
<div class="col-md-6 gleftzhong2 ">
</div>
</div>
</div>
<!--右边-->
<div class="col-md-4 gright"></div>
</div>
~~~
