柵格布局 （用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>
~~~
