**Bootstrap 官方文檔中有關網格系統的描述:**
Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統,可以隨著設備或視口大小的增加而適當地擴展到 12 列。它包含了用于簡單的布局選項的預定義類,也包含了用于生成更多語義布局的功能強大的混合類。
Bootstrap3是移動設備優先的,也就是Bootstrap代碼從小屏幕設備開始,然后擴展到大屏幕上的組件和網格。
###移動設備優先策略
內容:決定什么是最重要的
布局:優先設計更小的寬度,基礎的 CSS 是移動設備優先,媒體查詢是針對于平板電腦、臺式電腦
漸進增強:隨著屏幕大小的增加而添加元素
Bootstrap的網格系統會隨著屏幕尺寸的增加,自動分為最多12列。
<table border="1" cellpadding="2" cellspacing="0" style=""><tbody style="background-color:inherit"><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td></tr><tr style="background-color:inherit"><td colspan="4" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">4</span></strong></td><td colspan="4" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">4</span></strong></td><td colspan="4" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">4</span></strong></td></tr><tr style="background-color:inherit"><td colspan="4" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">4</span></strong></td><td colspan="8" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">8</span></strong></td></tr><tr style="background-color:inherit"><td colspan="6" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">6</span></strong></td><td colspan="6" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">6</span></strong></td></tr><tr style="background-color:inherit"><td colspan="12" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:29.449987792968727px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">12</span></strong></td></tr></tbody></table>
### Bootstrap 網格系統(Grid System)的工作原理
- 行必須放置在?**.container**?class 內,以便獲得適當的對齊(alignment)和內邊距(padding)。
- 使用行來創建列的水平組。
- 內容應該放置在列內,且唯有列可以是行的直接子元素。
- 預定義的網格類,比如?**.row**?和?**.col-sm-6**,可用于快速創建網格布局(row相當于是12列)。
- 列通過內邊距(padding)來創建列內容之間的間隙。該內邊距是通過?**.rows**?上的外邊距(margin)取負,表示第一列和最后一列的行偏移。
- 網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如,要創建三個相等的列,則使用三個?**.col-md-4**
### 媒體查詢
媒體查詢是"有條件的 CSS 規則"。它適用于一些基于某些規定條件的 CSS。如果滿足那些條件,則應用相應的樣式.
### 網格選項
<table border="1" cellpadding="2" cellspacing="0" style=""><tbody style="background-color:inherit"><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:47.10000000000002px; background-color:inherit; width:69.39999999999998px"><div style="min-width:2px; background-color:inherit"><span style="background-color:rgb(215,227,188)"><br style="background-color:inherit"/></span></div></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:47.10000000000002px; background-color:inherit; width:89.4000183105469px"><div style="min-width:2px; background-color:inherit"><span style="background-color:rgb(215,227,188)"><span style="font-family:微軟雅黑; color:#000000; background-color:inherit; font-size:14.399999618530273px; font-style:normal; font-weight:bold; text-align:center">超小設備手機(<768px)</span><br style="background-color:inherit"/></span></div></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:47.10000000000002px; background-color:inherit; width:121.40000610351558px"><div style="min-width:2px; background-color:inherit"><span style="background-color:rgb(215,227,188)"><span style="font-family:微軟雅黑; color:#000000; background-color:inherit; font-size:14.399999618530273px; font-style:normal; font-weight:bold; text-align:center">小型設備平板電腦(≥768px)</span><br style="background-color:inherit"/></span></div></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:47.10000000000002px; background-color:inherit; width:122.99996337890627px"><div style="min-width:2px; background-color:inherit"><span style="background-color:rgb(215,227,188)"><span style="font-family:微軟雅黑; color:#000000; background-color:inherit; font-size:14.399999618530273px; font-style:normal; font-weight:bold; text-align:center">中型設備臺式電腦(≥992px)</span><br style="background-color:inherit"/></span></div></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:47.10000000000002px; background-color:inherit; width:117.39998779296877px"><div style="min-width:2px; background-color:inherit"><span style="font-family:微軟雅黑; color:#000000; background-color:rgb(215,227,188); font-size:14.399999618530273px; font-style:normal; font-weight:bold; text-align:center">大型設備臺式電腦(≥1200px)</span><br style="background-color:inherit"/></div></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">網格行為</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px">一直是水平的</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px">以折疊開始,斷點以上是水平的</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px">以折疊開始,斷點以上是水平的</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px">以折疊開始,斷點以上是水平的</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:55.68749491373694px; background-color:inherit; width:69.39999999999998px">最大容器寬度</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:55.68749491373694px; background-color:inherit; width:89.4000183105469px">None (auto)</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:55.68749491373694px; background-color:inherit; width:121.40000610351558px">750px</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:55.68749491373694px; background-color:inherit; width:122.99996337890627px">970px</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:55.68749491373694px; background-color:inherit; width:117.39998779296877px">1170px</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">Class 前綴</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px"><strong style="background-color:inherit">.col-xs-</strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px"><strong style="background-color:inherit">.col-sm-</strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px"><strong style="background-color:inherit">.col-md-</strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px"><strong style="background-color:inherit">.col-lg-</strong></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">列數量和</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px">12</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px">12</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px">12</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px">12</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">最大列寬</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px">Auto</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px">60px</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px">78px</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px">95px</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">間隙寬度</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px">30px<br style="background-color:inherit"/>(一個列的每邊分別 15px)</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px">30px<br style="background-color:inherit"/>(一個列的每邊分別 15px)</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px">30px<br style="background-color:inherit"/>(一個列的每邊分別 15px)</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px">30px<br style="background-color:inherit"/>(一個列的每邊分別 15px)</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:28.699981689453125px; background-color:inherit; width:69.39999999999998px">可嵌套</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:28.699981689453125px; background-color:inherit; width:89.4000183105469px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:28.699981689453125px; background-color:inherit; width:121.40000610351558px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:28.699981689453125px; background-color:inherit; width:122.99996337890627px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:28.699981689453125px; background-color:inherit; width:117.39998779296877px">Yes</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">偏移量</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px">Yes</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">列排序</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px">Yes</td></tr></tbody></table>
**使用:**
堆疊的水平(手機25%/75%分割,中型設備50%/50%分割,大型設備33%/66%分割)
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Bootstrap 實例 - 上下文類</title>
<link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{padding: 20px;}
</style>
</head>
<body>
<div class = "container">
<div class = "row">
<div class = "col-xs-3 col-md-6 col-lg-4" style="border:2px solid green;">
this提供了一種優雅的方式來隱式“傳遞”一個對象引用,因此可以將API設計得更加簡潔并且易于復用。隨著使用模式越來越復雜,
顯式傳遞上下文對象會讓代碼變得混亂,而使用this則不會這樣。(this引用的是函數據以執行的環境對象)
</div>
<div class = "col-xs-9 col-md-6 col-lg-8" style="border:2px solid green;">
在調用函數時,我們會將調出處執行環境對象傳給this,如此處調用fun(2),處在全局作用域中,因此this會指向window。既然這樣,
我們可以通過強制this指向fun函數對象來解決這個問題,JS提供了兩個函數,apply()和call()函數.apply()方法接收兩個參數:
一個是在其中運行函數的作用域(可以理解為是this的值),另一個是參數數組(可以是arguments或者是數組的實例)
call()方法與apply()方法的作用相同,區別僅在于接收參數的方式不同。第一個參數都是this的值,
但是使用call()方法,必須要將傳遞的參數逐個列舉出來。
</div>
</div>
</div>
</body>
</html>
~~~
**說明:**Bootstrap 在中型設備中,會查找帶有 md 的類,并使用它們。在大型設備中,會查找帶有 lg 的類,并使用它們**
效果如下圖所示(大型設備):

### 偏移列
**.col-xs=**類不支持偏移,但是它們可以簡單地通過使用一個空的單元格來實現該效果。
為了在大屏幕顯示器上使用偏移,請使用.col-md-offset-類。這些類會把一個列的左外邊距(margin)增加列,其中范圍是從1到11。
偏移列實際是指定了margin-left的值。
舉例說明:
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Bootstrap 實例 - 上下文類</title>
<link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{padding: 20px;}
</style>
</head>
<body>
<div class = "container">
<div class = "row" style="border:2px solid red;">
<div class = "col-xs-3 col-md-6 col-lg-3 col-lg-offset-3" style="border:2px solid green;">
this提供了一種優雅的方式來隱式“傳遞”一個對象引用,因此可以將API設計得更加簡潔并且易于復用。隨著使用模式越來越復雜,
顯式傳遞上下文對象會讓代碼變得混亂,而使用this則不會這樣。(this引用的是函數據以執行的環境對象)
</div>
</div>
</div>
</body>
</html>
~~~
上面實現的效果是:偏移3個列(大型設備)
效果如下:

入了設置class為row外,我們也可以設置col-lg-8,其它內容不變,效果如下:
### 嵌套列
看懂下面的例子,對于這部分內容,對于列嵌套,你就能理解了。
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Bootstrap 實例 - 上下文類</title>
<link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{padding: 20px;}
</style>
</head>
<body>
<div class = "container">
<div class = "row" style="border:2px solid red;">
<div class = "col-lg-3 " style="border:2px solid green;background:#ccc;">
this提供了一種優雅的方式來隱式“傳遞”一個對象引用,因此可以將API設計得更加簡潔并且易于復用。隨著使用模式越來越復雜,顯式傳遞上下文對象會讓代碼變得混亂,而使用this則不會這樣。(this引用的是函數據以執行的環境對象)
</div>
<div class="col-lg-9">
<div class="col-lg-2" style="background: pink;">
你好嗎?會越來越好的,對嗎?
</div>
<div class="col-lg-2" style="border:2px solid yellow;">
越努力越幸福
行動起來!
不要做語言的巨人,行動的矮子
</div>
<div class="col-lg-8">
<div class="col-lg-4" style="background:#FFD782;">
再見2015年
你好2016年
</div>
<div class="col-lg-6" style="background:#A8FFE2;">
愿時光待你溫柔一些。
最糾結的時候就是你人生最重要的時候
不要在不安中度過一生
</div>
</div>
</div>
</div>
</div>
</body>
</html>
~~~
效果如下:

說明如下:
<div class="col-lg-9">中將被分為12列
同樣<div class="col-lg-8">也是。
每一個分割之后,再進行分割時,其都是被分割為12列(當然,在使用時,您不必用完12列)
### 列排序
Bootstrap 網格系統另一個完美的特性,就是可以很容易地以一種順序編寫列,然后以另一種順序顯示列。可以很輕易地改變帶有.col-md-push-和.col-md-pull-類的內置網格列的順序,其中范圍是從1到11。當我們需要調整左右的布局順序時,這種特性能起到非常巨大的作用。
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Bootstrap 實例 - 上下文類</title>
<link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{padding: 20px;}
</style>
</head>
<body>
<div class = "container">
<div class = "row">
<div class = "col-lg-3 col-lg-push-4" style="background:#A3FF93;">
<h2>我原本在左邊</h2>
this提供了一種優雅的方式來隱式“傳遞”一個對象引用,因此可以將API設計得更加簡潔并且易于復用。隨著使用模式越來越復雜,顯式傳遞上下文對象會讓代碼變得混亂,而使用this則不會這樣。(this引用的是函數據以執行的環境對象)
</div>
<div class="col-lg-4 col-lg-pull-3" style="background:#FFAEF6;">
<h2>我原本在右邊</h2>
越努力越幸福<br/>
行動起來!<br/>
不要做語言的巨人,行動的矮子<br/>
愿時光待你溫柔一些。<br/>
最糾結的時候就是你人生最重要的時候<br/>
不要在不安中度過一生 <br/>
你生命中的大事<br/>
安心做一件事<br/>
你成為哪種人,并不取決于你的能力,而取決于你的選擇
</div>
</div>
</div>
</body>
</html>
~~~
效果如下:

可以看出來,原本在左側的內容展示到了右側,而原本在右側的內容,現在在左側展示了。
看到col-lg-push-和col-lg-pull-后的數值了嗎?起后的值,對應著你要存放過去的內容的值。4對應著要右側要顯示過來的內容的寬度,3對應著要從左側顯示過來的寬度。
關于Bootstrap網格系統就介紹這么多,看完之后,希望您自己能脫離本文或其它文檔,自己進行練習。
- 前言
- jQuery輪播圖插件
- JS模擬事件操作
- JS閉包與變量
- JS綁定事件
- HTML5之file控件
- JavaScript的this詞法
- JavaScript的this詞法(二)
- JS this詞法(三)
- JS檢測瀏覽器插件
- JS拖拽組件開發
- number輸入框
- Modernizr.js和yepnode.js
- DOM變化后事件綁定失效
- div和img之間的縫隙問題
- 詳解JavaScript作用域
- bootstrap入門
- 表單驗證(登錄/注冊)
- Bootstrap網格系統
- Bootstrap排版
- Bootstrap創建表單(一)
- Bootstrap表單(二)
- Bootstrap按鈕
- Bootstrap圖片
- Bootstrap字體圖標(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜單
- Bootstrap按鈕組
- Bootstrap按鈕菜單
- Bootstrap輸入框組
- Bootstrap導航元素
- Bootstrap導航欄
- sublimeText頻頻崩潰
- JQuery不同版本的差異(checkbox)
- Bootstrap面包屑導航、分頁、標簽、徽章
- Bootstrap警告
- Bootstrap進度條
- 前端的上傳下載
- JS字符串的相關方法
- CSS3選擇器(全)
- CSS3新增文本屬性詳述
- 利用CSS3實現圖片切換特效
- CSS3新增顏色屬性
- CSS3的border-radius屬性詳解
- JS創建對象幾種不同方法詳解
- JS實現繼承的幾種方式詳述(推薦)
- CSS3響應式布局
- JS模塊化開發(requireJS)
- 利用@font-face實現個性化字體
- 前端在html頁面之間傳遞參數的方法
- CSS自動換行、強制不換行、強制斷行、超出顯示省略號
- 如何在Html中引入外部頁面
- reactJS入門
- React組件生命周期
- 使用React實現類似快遞單號查詢效果
- ReactJS組件生命周期詳述
- React 屬性和狀態詳解