如果你以前使用過bootstrap2或者了解過響應式技術，那麼肯定對bootstrap柵格系統並不陌生，由於柵格系統的引入，使得bootstrap的跨裝置布局顯示變得可能。
什麼是柵格系統
柵格系統是指，將頁面布局劃分為等寬的列，然後通過列數的定義來模組化頁面布局。
bootstrap的柵格系統採用了1-12列的模式，並且通過比例計算來設定你定義的列寬。
例如你這一行想要採用兩列的布局模式，那麼每列的寬度都為外容器的50%，不管你用什麼裝置瀏覽，它都會採用這樣的比例進行展示。
不過如果當裝置寬度小於你設定的最小寬度，那麼這兩列就會併排成為一列。
bootstrap的柵格系統
在bootstrap中使用柵格系統非常簡單方便，只需要在你的div中引入它們已經定義好的類即可。
我們先看看bootstrap有幾種柵格類可以使用：
1. .col-xs-* 這是超小螢幕類（<768px），類似手機等裝置。
2. .col-sm-* 這是小螢幕裝置類（≥768px且<992px），類似平板裝置。
3. .col-md-* 這是中型裝置類（≥992px且<1200px）。
4. .col-lg-* 這是大型裝置類（≥1200px）。
如何使用bootstrap柵格系統
你可以通過使用這些對應裝置的柵格類來決定自己應用在不同裝置上的布局樣式。
例如：
這種編碼的結果就是，這兩個div在pc端瀏覽起來是兩行（每行都佔據12列柵格），而在手機端瀏覽器來是一行兩列（每列佔據6列柵格）。
通過這種形式，就能很方便地使用柵格系統定製自己的應用布局了。
其他資訊
除了以上的使用方法之外，還能使用「列偏移類」來快速對自己的柵格進行定位，使用方法類似
按照這樣的寫法，這個div就會在pc端向右偏移 3列。
如何使用bootstrap柵格系統？
1.背景介紹 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。2 網格系統的實現原理非常簡單，僅僅是通過定義容器大小，平分12份 也有平分成24份或32份，但12份是最常見的 再調整內外邊距，最後結合 查詢，...
Bootstrap 柵格系統
目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義classe，還有強大的mixin用於生成更具語義的布局。2...
Bootstrap柵格系統
bootstrap基本模板 bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。頁面中的一行，比例可以自己定義，但必須保證是12列，如果缺少...