[TOC]
# 柵格系統簡介
**柵格的重點在于在排版上更好的進行適配，在不同的分辨率下能夠顯示顯示不同的效果。將所有分辨率下的網頁水平方向分成12列，那么在不同的分辨率下，水平方向顯示不同的列數進而達到適配。**
**柵格系統運用媒體查詢的原理，意義在于實現響應式設計。**
# 響應式&柵格
響應式：為同一個頁面設計多種布局形態（區塊），根據不同的屏幕尺寸情況，調整這些區塊 的排版，從而實現不同屏幕尺寸的響應（適配）。
柵格：將頁面劃分為若干等寬的列（區塊），然后通過等寬列進行一定規則的組合，從而實現響 應式的頁面。
## 柵格系統基本結構
**container（包括 container-fluid ）、row、column必須保持特定的層級關系**，柵格系統才可以正常工作（**版心>行>列**）
**重點：先有行，再有列**
```
<div class="container">
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-1">
</div>
</div>
</div>
```
### **各種設備類型排列**
平均分成12列，不同設備從堆疊到水平排列設置
>[success] col-xs-[列數]：在超小屏幕下展示幾份
> col-sm-[列數]：在小屏幕下展示幾份
> col-md-[列數]：在中等屏幕下展示幾份
> col-lg-[列數]：在大屏幕下展示幾份
> __xs__ : 超小屏幕 手機 (<768px)
> __sm__ : 小屏幕 平板 (≥768px)
> __md__ : 中等屏幕 桌面顯示器 (≥992px)
> __lg__ : 大屏幕 大桌面顯示器 (≥1200px)
### **柵格特點**
多余列（column）的元素將作為一個整體單元被另起一行排列
**一行排不滿，自動向下排列。**
## 柵格系統響應(
**列偏移**
一個柵格向右邊偏移多少個列
.col-*\-offset-*
舉例：
.col-md-offset-2 中等屏幕桌面電腦開始向右偏移2個列
**列嵌套**（了解）
如果要嵌套使用柵格，只需要在列（column）內直接續接行（row），然后再繼續接列（column） ，不再需要container。
**列嵌套這一列又被重新分成12列**
**列順序**
使用 .col- \* -push- \* 和 .col- \* -pull-\* 類可以改變列（column）的順序（注意要結合使用）
.col- \* -push- \* 往右推
.col- \* -pull-\* 往左拉
大于斷點值都生效
## 《相關案例》
柵格基礎案例
列偏移/嵌套/順序案例
柵格實現響應式案例
