一、bootstrap柵格
Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
Bootstrap 網格系統（Grid System）的工作原理：
網格系統通過一系列包含內容的行和列來創建頁面布局。下面列出了 Bootstrap 網格系統是如何工作的：
- 行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
- 使用行來創建列的水平組。
- 內容應該放置在列內，且唯有列可以是行的直接子元素。
- 預定義的網格類，比如 .row 和 .col-xs-4，可用於快速創建網格布局。LESS 混合類可用於更多語義布局。
- 列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最后一列的行偏移。
- 網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如，要創建三個相等的列，則使用三個 .col-xs-4。
媒體查詢
媒體查詢是非常別致的"有條件的 CSS 規則"。它只適用於一些基於某些規定條件的 CSS。如果滿足那些條件，則應用相應的樣式。
Bootstrap 中的媒體查詢允許您基於視口大小移動、顯示並隱藏內容。下面的媒體查詢在 LESS 文件中使用，用來創建 Bootstrap 網格系統中的關鍵的分界點閾值。
/* 超小設備（手機，小於 768px） */ /* Bootstrap 中默認情況下沒有媒體查詢 */ /* 小型設備（平板電腦，768px 起） */ @media (min-width: @screen-sm-min) { ... } /* 中型設備（台式電腦，992px 起） */ @media (min-width: @screen-md-min) { ... } /* 大型設備（大台式電腦，1200px 起） */ @media (min-width: @screen-lg-min) { ... }
我們有時候也會在媒體查詢代碼中包含 max-width，從而將 CSS 的影響限制在更小范圍的屏幕大小之內。
@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }
網格選項
下圖總結了 Bootstrap 網格系統如何跨多個設備工作：
基本的網格結構：
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">....
響應式的列重置
下實例包含了4個網格，但是我們在小設備瀏覽時無法確定網格顯示的位置。
為了解決這個問題，可以使用 .clearfix class和 響應式實用工具來解決，如下面實例所示：
<div class="container"> <div class="row" > <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. </p> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p> </div> </div> </div>
偏移列：為了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 范圍是從 1到 11。
嵌套列：為了在內容中嵌套默認的網格，請添加一個新的 .row，並在一個已有的 .col-md-* 列內添加一組 .col-md-* 列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須占滿12列）。
列排序：Bootstrap 網格系統另一個完美的特性，就是您可以很容易地以一種順序編寫列，然后以另一種順序顯示列。您可以很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序，其中 * 范圍是從 1 到 11。
下面給一個綜合實例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet"> <style type="text/css"> .row{margin-bottom: 20px;} .row .row{ margin-top: 10px; margin-bottom: 0; } [class*='col-']{ padding-top:15px; padding-bottom:15px; background-color: #eee; background-color: rgba(86,61,124,0.15); border:1px solid #ddd; border:1px solid rgba(86,61,124,.2); } </style> </head> <body> <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> <div class="row"> <div class="col-md-3">col-md-3</div> <div class="col-md-3">col-md-3</div> <div class="col-md-3">col-md-3</div> </div> <div class="row"> <div class="col-md-3">col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3</div> <div class="col-md-3">col-md-3</div> <div class="col-md-3">col-md-3</div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4">col-md-4</div> </div> <div class="row"> <div class="col-sm-9"> one <div class="row"> <div class="col-xs-8">first</div> <div class="col-xs-4">two</div> </div> </div> </div> <div class="row"> <div class="col-md-9 col-md-push-3">col-md-9</div> <div class="col-md-3 col-md-pull-9">col-md-3</div> </div> </div> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
實現效果：
二、bootstrap CSS代碼
主要是從內聯代碼、用戶輸入、代碼塊、變量和程序輸出方向講解對代碼的使用。
代碼：
<div class="container"> <!--code 內聯代碼--> For example<code><section></code>as inline; 我希望現在能健入<kbd>cmd</kbd>命令 <pre> same text here...; </pre> <var>x</var>=<var>y</var>+<var>z</var> <samp>hell world</samp> </div>
實現效果：
注意：請確保當您使用 <pre> 和 <code> 標簽時，開始和結束標簽使用了 unicode 變體： < 和 >。
三、bootstrap 表格
Bootstrap 表格從基本表格到條紋狀表格、帶邊框表格、鼠標懸停、緊縮表格、狀態類和響應式表格。
如圖所示，下圖樣式可用於表格中：
下圖的類可用於表格的行或者單元格：
基本表格：如果您想要一個只帶有內邊距（padding）和水平分割的基本表，請添加 class .table。
條紋表格：通過添加 .table-striped class，您將在 <tbody> 內的行上看到條紋。
邊框表格：通過添加 .table-bordered class，您將看到每個元素周圍都有邊框，且占整個表格是圓角的。
懸停表格：通過添加 .table-hover class，當指針懸停在行上時會出現淺灰色背景。
精簡表格：（也即是緊湊型的表格）通過添加 .table-condensed class，行內邊距（padding）被切為兩半，以便讓表看起來更緊湊。
狀態表格：如圖所示
這些類可被應用到 <tr>、<td> 或 <th>。
響應式表格：通過把任意的 .table 包在 .table-responsive class 內，您可以讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，您將看不到任何的差別。
總結起來就是：條紋狀表格、帶邊框表格、鼠標懸停、緊縮表格table的class分別為table-striped table-bordered table-hover table-condensed
下面舉例說明一下：
基本表格：
<div class="container"> <table class="table"> <thead> <tr> <th>表格標題</th> <th>表格標題</th> <th>表格標題</th> </tr> </thead> <tbody> <tr> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> <tr> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> </tbody> </table> </div>
實現效果：
狀態類：如代碼：
<div class="container"> <table class="table table-bordered"> <thead> <tr class="active"> <th>表格標題</th> <th>表格標題</th> <th>表格標題</th> </tr> </thead> <tbody> <tr class="success"> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> <tr class="info"> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> <tr class="warning"> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> <tr class="danger"> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> <tr> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> </tbody> </table> </div>
實現效果如圖：
實現響應式表格
代碼如下：
<div class="table-responsive"> <table class="table table-bordered"> <thead> <tr class="active"> <th>表格標題</th> <th>表格標題</th> <th>表格標題</th> </tr> </thead> <tbody> <tr class="success"> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> <tr class="info"> <td>表格單元格表格單元格表格單元格</td> <td>表格單元格表格單元格表格單元格表格單元格</td> <td>表格單元格表格單元格表格單元格</td> </tr> <tr class="warning"> <td>表格單元格表格單元格表格單元格表格單元格</td> <td>表格單元格表格單元格</td> <td>表格單元格表格單元格表格單元格</td> </tr> <tr class="danger"> <td>表格單元格表格單元格</td> <td>表格單元格表格單元格</td> <td>表格單元格表格單元格</td> </tr> <tr> <td>表格單元格表格單元格</td> <td>表格單元格表格單元格</td> <td>表格單元格表格單元格</td> </tr> </tbody> </table>
實現的效果如圖：
在圖中可以看到如果屏幕很小，那么會出現橫向滾動條，可以左右拖動查看完整的表格