簡單來說，bootstrap包含一套響應式的、移動裝置優先的、不固定的網格系統，可以隨著裝置的大小增加而適當的進行擴充套件到12列。
也就是通過定義容器的大小，平分12份，在調整內外邊距，最後再結合**查詢的方式運用網格系統。
1、資料行row必須放在.container class內，這樣才能獲得適當的對齊alignment與內邊距padding。
class="container">
class="row">
......
div>
div>
2、在資料行.row class中新增列，但是列的總數不能超過12。如下**：
class="container">
class="row">
class="col-md-4">4
div>
class="col-md-8">8
div>
div>
將一行row分為比例為4：8的兩個列。
3、我們需要設定存放的內容是要放在列.column中，而不是行.row中。
在介紹網格系統的使用之前，需要了解bootstrap在不同螢幕對應的網格樣式及一些屬性。如下圖：
bootstrap基本的網格結構：
class="container">
class="row">
class="col-*-*">div>
class="col-*-*">div>
div>
class="row">...div>
div>
class="container">....
bootstrap網格系統的使用其實就是通過對列的排序、列的組合、列的偏移、列的巢狀等來控制的。
1、列的組合：就是將12個格仔平均按照所需分配。可以是4-8組合，可以是4-4-4組合，可以是6-6組合等。
2、列的偏移：有時候我們不需要將兩個相鄰的列緊挨在一起，這時候就可以試用列偏移來實現。但是.col-xs-* 類不支援偏移。我們使用「col-md-offset-*」來實驗。
使用「col-md-offset-*」其中星號代表要偏移的列組合數（1-11），比如我們需要將某一列向右偏移4個列的寬度。
class="col-md-6 col-md-offset-4">列向右移動四列的間距來居中該div
3、列的排序：使用帶有 .col-md-push-* 和 .col-md-pull-* 類的內建網格列的順序。
.col-md-push-向右， .col-md-pull- 向左
排序前p>
class="col-md-8">我在左div>
class="col-md-4">我在右div>
排序後p>
class="col-md-8 col-md-push-4">我在左div>
class="col-md-4 col-md-pull-8">我在右div>
4、列的巢狀：可以在乙個列中增加多個行row，然後在行中插入列。
class="row">
class="col-md-8">
在.col-md-8巢狀乙個row(3個col-md-4)
class="row">
class="col-md-4">col-md-4
div>
class="col-md-4">col-md-4
div>
class="col-md-4">col-md-4
div>
div>
div>
class="col-md-4">在.col-md-4我沒巢狀div>
巢狀的網格也是按照父類網格的寬度分配的寬度的，是在巢狀父類.col-md-8網格的的外部的，並不是在其內部。
BootStrap 網格系統
網路系統 bootstrap 允許將頁面劃分成共12個等寬邏輯單元，既允許單獨地使用這12個等分邏輯單元，也可以將其相鄰的列合併成乙個更寬的邏輯單元，甚至在乙個邏輯單元中再劃分12個子邏輯單元。如下圖所示 網格用到的類樣式bootstrap的網路系統支援可響應式布局，當其列螢幕大小發生變化時則自動計...
Bootstrap網格系統
bootstrap是乙個用於快速開發web應用程式和 的前端框架，它包括html,css,js等。它是由twitter開發，現在成為github上最為流行的前端開發框架。它提供了一套響應式，移動裝置優先的流式柵格系統，隨著螢幕或視窗尺寸增加，系統會自動分為最多12列。柵格系統用於通過一系列的行 ro...
bootstrap網格系統回顧
bootstrap 提供了一套響應式 移動裝置優先的流式網格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。什麼是網格 grid 在平面設計中，網格是一種由一系列用於組織內容的相交的直線 垂直的 水平的 組成的結構 通常是二維的 它廣泛應用於列印設計中的設計布局和內容結...