柵格設計系統，是一種平面設計的方法與風格。運用固定的格仔設計版面布局，其風格工整簡潔。
柵格系統的設計原理
bootstrap 網格系統
bootstrap 包含了乙個響應式的、移動裝置優先的、不固定的網格系統，可以隨著裝置或視口大小的增加而適當地擴充套件到 12 列。它包含了用於簡單的布局選項的預定義類，也包含了用於生成更多語義布局的功能強大的混合類。
bootstrap 3 是移動裝置優先的，在這個意義上，bootstrap **從小螢幕裝置（比如移動裝置、平板電腦）開始，然後擴充套件到大螢幕裝置（比如膝上型電腦、台式電腦）上的元件和網格。
移動裝置優先策略
內容：決定什麼是最重要的。
布局：優先設計更小的寬度。基礎的 css 是移動裝置優先，**查詢是針對於平板電腦、台式電腦。
漸進增強：隨著螢幕大小的增加而新增元素。
響應式網格系統隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
工作原理
(row（.row）必須位於container的內部，column（如.col-md-6）必須位於row的內部。如果要巢狀使用柵格，正確的做法是在column內直接續接row，然後再繼續接column，而不再需要container)
行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
使用行來建立列的水平組。
內容應該放置在列內，且唯有列可以是行的直接子元素。
預定義的網格類，比如 .row 和 .col-xs-4，可用於快速建立網格布局。less 混合類可用於更多語義布局。
列通過內邊距（padding）來建立列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
網格系統是通過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4。
**查詢
/* 超小裝置（手機，小於 768px） */
/* bootstrap 中預設情況下沒有**查詢 */
/* 小型裝置（平板電腦，768px 起） */
@media (min-width: @screen-sm-min)
/* 中型裝置（台式電腦，992px 起） */
@media (min-width: @screen-md-min)
/* 大型裝置（大台式電腦，1200px 起） */
@media (min-width: @screen-lg-min)
@media (max-width: @screen-xs-max)
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max)
@media (min-width: @screen-md-min) and (max-width: @screen-md-max)
@media (min-width: @screen-lg-min)
小型裝置平板電腦（≥768px）
中型裝置台式電腦（≥992px）
大型裝置台式電腦（≥1200px）
網格行為
一直是水平的
以摺疊開始，斷點以上是水平的
以摺疊開始，斷點以上是水平的
以摺疊開始，斷點以上是水平的
最大容器寬度
none (auto)
750px
970px
1170px
class 字首
.col-xs-.col-sm-.col-md-.col-lg-
列數量和
1212
1212
最大列寬
auto
60px
78px
95px
間隙寬度
30px
（乙個列的每邊分別 15px）
30px
（乙個列的每邊分別 15px）
30px
（乙個列的每邊分別 15px）
30px
（乙個列的每邊分別 15px）
可巢狀yes
yesyes
yes偏移量
yesyes
yesyes
列排序yes
yesyes
yes
基本的網格結構
...
....
例項：堆疊的水平
bootstrap柵格的column對應的類名形如.col-xx-y。y是數字，表示該元素的寬度佔據12列中的多少列。而xx只有特定的幾個值可供選擇，分別是xs、sm、md、lg，它們就是斷點型別。
為了解決這個問題，使用 可以使用 .clearfix class和 響應式實用工具來解決
lorem ipsum dolor sit amet, consectetur adipisicing
elit.
第一列
第二列 - 分為四個盒子
排序前
我在左邊
我在右邊
排序後我在左邊
我在右邊
bootstrap 柵格系統 理解與總結
最近需要寫乙個既適應pc端 又適應手機端 最重要的是還要支援手機橫屏 所以用到了布局神器 bootstrap 柵格系統 先放效果圖 pc端 然後 我的需要適應pc 手機 以及橫屏，所以類名這裡是這樣寫的 響應式網格系統隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。row 解...
Bootstrap 柵格系統
目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義classe，還有強大的mixin用於生成更具語義的布局。2...
layui柵格系統
首先，它是一種響應式的柵格系統，簡單說就是支援多種裝置，會自行改變行寬高。柵格的使用不需要js引入，單純的class樣式宣告。首先定義好頁面框架 class layui container div 其次layui定義的柵格為12等分，就是說一行被分成了12份，可以任意分割小於等於12列，但是必須滿足...