實現原理

網格系統的實現原理非常簡單，僅僅是通過定義容器container大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調整內外邊距，最后結合媒體查詢，就制作出了強大的響應式網格系統。Bootstrap框架中的網格系統就是將容器平分成12份。

在使用的時候大家可以根據實際情況重新編譯LESS（或Sass）源碼來修改12這個數值（也就是換成24或32，當然你也可以分成更多，但不建議這樣使用）。

（這一章節注意效果要在全屏狀態下查看，鼠標滑過結果窗口時可單擊出現的全屏按鈕）

代碼示例：

<div class="container">  <div class="row">    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>    <div class="col-md-1">.col-md-1</div>  </div>
工作原理
Bootstrap框架的網格系統工作原理如下：
1、數據行(.row)必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內距(padding)。如：
<div class="container"><div class="row"></div></div>
2、在行(.row)中可以添加列(.column)，但列數之和不能超過平分的總列數，比如12。如：
<div class="container"><div class="row">  <div class="col-md-4"></div>  <div class="col-md-8"></div>
3、具體內容應當放置在列容器（column）之內，而且只有列（column）才可以作為行容器(.row)的直接子元素
4、通過設置內距（padding）從而創建列與列之間的間距。然后通過為第一列和最后一列設置負值的外距（margin）來抵消內距(padding)的影響
為了更好的理解Bootstrap框架的網格系統工作原理，我們來看一張草圖：
簡單對圖解釋一下：
1、最外邊框，帶有一大片白色區域，就是相當于瀏覽器的可視區域。在Bootstrap框架的網格系統中帶有響應式效果，其帶有四種類型的瀏覽器（超小屏，小屏，中屏和大屏），其斷點（像素的分界點）是768px、992px和1220px。
2、第二個邊框(1)相當于容器(.container)。針對不同的瀏覽器分辨率，其寬度也不一樣：自動、750px、970px和1170px。在bootstrap.CSS的第736行～第756行進行設置：
.container {  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;  @media (min-width: 768px) {  .container {    width: 750px;  }  @media (min-width: 992px) {  .container {    width: 970px;  }  @media (min-width: 1200px) {  .container {    width: 1170px;  }
3、２號橫條闡述的是，將容器的行（.row）平分了12等份，也就是列。每個列都有一個“padding-left:15px”(圖中粉紅色部分)和一個“padding-right:15px”(圖中紫色部分)。這樣也導致了第一個列的padding-left和最后一列的padding-right占據了總寬度的30px，從而致使頁面不美觀，當然，如果你需要留有一定的間距，這個做法是不錯的。如bootstrap.css中第767行~第772行所示：
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {  position: relative;  min-height: 1px;  padding-right: 15px;  padding-left: 15px;
4、３號橫條就是行容器(.row),其定義了“margin-left”和”margin-right”值為”-15px”，用來抵消第一個列的左內距和最后一列的右內距。在bootstrap.css的第763行~第767行可以看到：
.row {  margin-right: -15px;  margin-left: -15px;
5、將行與列給合在一起就能看到橫條4的效果。也就是我們期望看到的效果，第一列和最后一列與容器（.container）之間沒有間距。
橫條５只是想向大家展示，你可以根據需要，任意組合列與列，只是他們的組合數之和不要超過總列數。
試一試如果每行網格數超過12會怎么樣？如果網格數相加之和大于12，則剩余部分最大只能顯示12-最后一個網格的數量，例如兩列，一個為4，一個為12，那么4顯示正常，12顯示為8列。
基本用法
網格系統用來布局，其實就是列的組合。Bootstrap框架的網格系統中有四種基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的網格樣式，在這一節中所涉及到的示例，我們都以中屏（970px）為例進行介紹，其他屏幕的使用也類似這一種。關于屏幕尺寸如下圖：
1、列組合
列組合簡單理解就是更改數字來合并列（原則：列總和數不能超12），有點類似于表格的colspan屬性，例如：
<div class="container">  <div class="row">    <div class="col-md-4">.col-md-4</div>    <div class="col-md-8">.col-md-8</div>  </div>  <div class="row">    <div class="col-md-4">.col-md-4</div>    <div class="col-md-4">.col-md-4</div>    <div class="col-md-4">.col-md-4</div>  </div>  <div class="row">    <div class="col-md-3">.col-md-3</div>    <div class="col-md-6">.col-md-6</div>    <div class="col-md-3">.col-md-3</div> </div></div>
使用上面的結構，你將看到下圖的效果：
(在右側結果窗口中查看時需要設置為全屏)
實現列組合方式非常簡單，只涉及兩個CSS兩個特性：浮動與寬度百分比。在bootstrap.css文件的第1088行～1126行：
/*確保所有列左浮動*/
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {    float: left; }
/*定義每個列組合的寬度（使用的百分比）*/
  .col-md-12 {    width: 100%;  }  .col-md-11 {    width: 91.66666667%;  }  .col-md-10 {    width: 83.33333333%;  }  .col-md-9 {    width: 75%;  }  .col-md-8 {    width: 66.66666667%;  }  .col-md-7 {    width: 58.33333333%;  }  .col-md-6 {    width: 50%;  }  .col-md-5 {    width: 41.66666667%;  }  .col-md-4 {    width: 33.33333333%;  }  .col-md-3 {    width: 25%;  }  .col-md-2 {    width: 16.66666667%;  }  .col-md-1 {    width: 8.33333333%;  }
列偏移
有的時候，我們不希望相鄰的兩個列緊靠在一起，但又不想使用margin或者其他的技術手段來。這個時候就可以使用列偏移（offset）功能來實現。使用列偏移也非常簡單，只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數)，那么具有這個類名的列就會向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示該列向右移動4個列的寬度。
<div class="container"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-2 col-md-offset-4">列向右移動四列的間距</div><div class="col-md-2">.col-md-3</div></div><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4 col-md-offset-4">列向右移動四列的間距</div></div></div>
如上面的示例代碼，得到的效果如下或在最右側結果窗口中可以看到(鼠標移到結果窗口，單擊出現的全屏按鈕):
實現原理非常簡單，就是利用十二分之一（1/12）的margin-left。然后有多少個offset，就有多少個margin-left。在bootstrap.css中第1205行～1241行所示：
  .col-md-offset-12 {   margin-left: 100%;}  .col-md-offset-11 {    margin-left: 91.66666667%;  }  .col-md-offset-10 {    margin-left: 83.33333333%;  }  .col-md-offset-9 {    margin-left: 75%;  }  .col-md-offset-8 {    margin-left: 66.66666667%;  }  .col-md-offset-7 {    margin-left: 58.33333333%;  }  .col-md-offset-6 {    margin-left: 50%;  }  .col-md-offset-5 {    margin-left: 41.66666667%;  }  .col-md-offset-4 {    margin-left: 33.33333333%;  }  .col-md-offset-3 {    margin-left: 25%;  }  .col-md-offset-2 {    margin-left: 16.66666667%;  }  .col-md-offset-1 {    margin-left: 8.33333333%;  }  .col-md-offset-0 {    margin-left: 0;  }
注意：
不過有一個細節需要注意，使用”col-md-offset-*”對列進行向右偏移時，要保證列與偏移列的總數不超過12，不然會致列斷行顯示，如：
<div class="row">  <div class="col-md-3">.col-md-3</div>  <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>  <div class="col-md-4">col-md-4</div></div>
上面代碼中列和偏移列總數為3+3+3+4 = 13>12，所以發生了列斷行。
如上面的示例代碼，得到的效果如下或在最右側結果窗口中可以看到(鼠標移到結果窗口，單擊出現的全屏按鈕):
1、一個有4列網格。
2、第一列網格占2格寬不偏移。
3、第二列、第三列網格占2格寬，并且偏移1個網格。
4、第四列網格占3格寬，并且偏移1個網格。
效果圖如下：
<div class="row">    <div class="col-md-2">.col-md-3</div>    <div class="col-md-2 col-md-offset-1">col-md-offset-3</div>    <div class="col-md-2 col-md-offset-1">col-md-offset-3</div>    <div class="col-md-3 col-md-offset-1">col-md-4</div>  </div>
列排序
列排序其實就是改變列的方向，就是改變左右浮動，并且設置浮動的距離。在Bootstrap框架的網格系統中是通過添加類名“col-md-push-*”和“col-md-pull-*” (其中星號代表移動的列組合數)。
我們來看一個簡單的示例：
<div class="container">  <div class="row">    <div class="col-md-4">.col-md-4</div>    <div class="col-md-8">.col-md-8</div>  </div></div>
默認情況之下，上面的代碼效果如下：
“col-md-4”居左，“col-md-8”居右，如果要互換位置，需要將“col-md-4”向右移動８個列的距離，也就是8個offset ,也就是在“<div class=“col-md-4”>”添加類名“col-md-push-8”，調用其樣式。
也要將“col-md-8”向左移動４個列的距離，也就是4個offset，在“<div class=”col-md-8”>”上添加類名“col-md-pull-4”：
Bootstrap僅通過設置left和right來實現定位效果。在boostrap.css文件的第1127行~第1204行可以看到具體的代碼：
.col-md-pull-12 {    right: 100%;  }  .col-md-pull-11 {    right: 91.66666667%;  }  .col-md-pull-10 {    right: 83.33333333%;  }  .col-md-pull-9 {    right: 75%;  }  .col-md-pull-8 {    right: 66.66666667%;  }  .col-md-pull-7 {    right: 58.33333333%;  }  .col-md-pull-6 {    right: 50%;  }  .col-md-pull-5 {    right: 41.66666667%;  }  .col-md-pull-4 {    right: 33.33333333%;  }  .col-md-pull-3 {    right: 25%;  }  .col-md-pull-2 {    right: 16.66666667%;  }  .col-md-pull-1 {    right: 8.33333333%;  }  .col-md-pull-0 {    right: 0;  }  .col-md-push-12 {    left: 100%;  }  .col-md-push-11 {    left: 91.66666667%;  }  .col-md-push-10 {    left: 83.33333333%;  }  .col-md-push-9 {    left: 75%;  }  .col-md-push-8 {    left: 66.66666667%;  }  .col-md-push-7 {    left: 58.33333333%;  }  .col-md-push-6 {    left: 50%;  }  .col-md-push-5 {    left: 41.66666667%;  }  .col-md-push-4 {    left: 33.33333333%;  }  .col-md-push-3 {    left: 25%;  }  .col-md-push-2 {    left: 16.66666667%;  }  .col-md-push-1 {    left: 8.33333333%;  }  .col-md-push-0 {    left: 0;  }交換兩個網格的位置：
<div class="container">  <div class="row">    <div class="col-md-4 col-md-push-8">.col-md-4</div>    <div class="col-md-8 col-md-pull-4">.col-md-8</div>  </div></div>
列的嵌套
Bootstrap框架的網格系統還支持列的嵌套。你可以在一個列中添加一個或者多個行（row）容器，然后在這個行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（row），寬度為100%時，就是當前外部列的寬度。來看一個簡單示例：
<div class="container">    <div class="row">        <div class="col-md-8">        我的里面嵌套了一個網格            <div class="row">            <div class="col-md-6">col-md-6</div>            <div class="col-md-6">col-md-6</div>          </div>        </div>    <div class="col-md-4">col-md-4</div>    </div>    <div class="row">        <div class="col-md-4">.col-md-4</div>    <div class="col-md-8">    我的里面嵌套了一個網格        <div class="row">          <div class="col-md-4">col-md-4</div>          <div class="col-md-4">col-md-4</div>          <div class="col-md-4">col-md-4</div>        </div>    </div>    </div></div>
效果如下：
注意：嵌套的列總數也需要遵循不超過12列。不然會造成末位列換行顯示。