1.什麼是柵格系統:
在bootstrap中，它提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。柵格系統用於通過一系列的行(row)與列(column)的組合來建立頁面布局， 你的內容就可以放入這些建立好的布局中，bootstrap 柵格系統的步驟：
(1) "行(row)"必須包含在 .container(固定寬度)或 .container-fluid(100% 視窗寬度)中（附圖）：
(2) 列(column)必須包含在行（row）中
(3) 你所書寫的內容應當放置於"列(column)"內
(4) 如果一"行(row)"中包含了的"列(column)"大於 12，多餘的"列(column)"所在的元素將被作為乙個整體另起一行排列
**書寫及結果展示（附圖）：
chrome上的結果：
正如上圖所示，就是柵格系統的書寫格式，當containr換為container-fluid時，它的布局就是這樣的:
這就是container和container-fluid的區別，前者是在螢幕兩邊具有留白，也就是具有固定寬度（這個寬度是跟隨自己螢幕大小預設設定的，也可以自己調）；後者就是自己螢幕視口有多大，它的寬度有多大。
下面就介紹一下上圖中的col-md-是什麼---
2.柵格引數
先附張圖：
通過上圖就能明白這些md，xs是什麼了，也就是寫的col-md-3，col-md-4，col-md-5三個div的內容在解析度大於992px的時候螢幕中分別佔3/12，4/12，5/12的大小，如果解析度小於992px的時候，所有div就會自動重新另起一行（如下圖）：
如果想讓所書寫的內容在其他螢幕中不另起一行，只需要在接著寫其他引數就好了（例：class="col-md-3，col-sm-6"就是在中等螢幕中佔3列，在小螢幕中佔6列）
一些柵格系統中的其他屬性：
3.列的偏移
使用 .col-md-offset-* (md也可以為其他，*為要偏移的數字)類可以將列向右側偏移
注意:offset只能向右偏移且對後面的列會造成影響（附圖）
結果展示：
如圖所示：col-md-5就被擠到下面另起一行了
4.列的隱藏
hidden-xs/sm/md/lg: 可以對所選中的列進行隱藏（附圖）
結果：
如圖所示：當螢幕縮小到xs時，col-md-12便被隱藏了
5.列的排序
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列(column)的順序
注意:md同樣可以為其他，*代表要偏移的數字
push為向後偏移 ； pull為向前偏移
push和pull偏移時不會對其他列造成影響（附圖）
如圖所示，col-md-3向後偏移的2列，col-md-4向前偏移了2列，且它們都沒有互相造成影響
前端UI框架 Bootstrap 框架
設計前端頁面或者元件的時候，原生的html元件，比較難看，自己設計那些css樣式，非常麻煩，工作量很大，還不一定會。但是其實，網上有很多開源的元件庫，拿來使用就可以了，例如 bootstrap，easyui，layui，miniui。需要的時候，網上可以找到一大堆這種ui框架。直接使用這種現成的輪子...
Bootstrap 框架 柵格布局系統設計原理
如果你是初次接觸bootstrap，你一定會為它的柵格布局感到敬佩。事實上，這個布局系統提供了一套響應式的布局解決方案。既然這麼好用，那他是如何用css來實現的呢？首先使用這個布局之前要定義一下 這行 如果不懂，可以搜尋一下，總之大致意思就是，被定義的元素的內邊距和邊框不再會增加它的寬度，不加入的話...
Bootstrap 柵格系統
目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義classe，還有強大的mixin用於生成更具語義的布局。2...