們都知道bootstrap3.0使用了四種柵格選項來形成柵格系統，這四種選項在官網上的介紹如下圖，很多人不理解，這裡跟大家詳解一下四種柵格選項之間的區別，其實區別只有一條就是適合不同尺寸的螢幕裝置。我們看class字首這一項，我們姑且以字首命名這四種柵格選項，他們分別是col-xs ,col-sm,col-md,col-lg，我們懂英文的就知道，lg是large的縮寫，md是mid的縮寫，sm是small的縮寫，xs是***的縮寫。這樣命名就體現了這幾種class適應的螢幕寬度不同。下面我們分別介紹這幾種class的特點。
col-xs類，用法是。它星號代表1--12的數字。我們知道柵格系統總共有12列，我們在這裡使用數字幾就代表著該div占用幾列的寬度。假如我們在給超級小螢幕開發介面，那麼我們使用該類，該類沒有任何行為，不管螢幕小到多少，都不會改變div的布局。
col-sm類，用法是。數字的意義同上，但是該類適合螢幕寬度為750的裝置，如果在螢幕寬度小於750的設別上，該div就會水平堆疊。這是在超過750螢幕上的樣式：
col-md類：該類適合970畫素以上螢幕。通上面講的道理一樣，假如使用螢幕尺寸小於970畫素的裝置檢視網頁，div就會垂直堆疊。這是大於970畫素的裝置：
col-lg的行為也是一樣的，這裡就不演示了
下面說一下如何組合使用這幾個類。我們使用這樣的方式來表示：在中等螢幕裝置上該div占用8列的寬度；在小螢幕上該div占用10列的寬度。
Bootstrap 柵格系統
目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義classe，還有強大的mixin用於生成更具語義的布局。2...
Bootstrap柵格布局
bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。柵格系統用於通過一系列的行 row 與列 column 的組合來建立頁面布局，你的內容就...
Bootstrap柵格系統
bootstrap基本模板 bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。頁面中的一行，比例可以自己定義，但必須保證是12列，如果缺少...