本篇主要包括：
■ Grid簡介
■ 應用Grid
■ Multiple Grids
Grid簡介
Bootstrap中，把頁面分成12等份，這就是所謂的Grid。
在Bootstrap中，用類名控制，這些類型遵循".col-xx-6"類似的形式。
2個6就占滿整個頁面。所以，類名最后面的數字表示要占幾個格子。
又比如，3個4也占滿整個頁面。
又比如，4個3也占滿整個頁面。
又比如，6個2也占滿整個頁面。
另外，類似".col-xx-10 .col-xx-offset-2"這樣的類名，offset表示偏移，2表示向右偏移2個單元格。
以上值得注意的是：在倒數第二行，當把".col--xx-3"放在".col-xx-3 .col-xx-offset-2"之后的時候，由於超過了12個單元格的大小，".col--xx-3"會自動跑到下一行的最開頭。
應用Grid
id為body的section如何應用Grid呢？
→在index.html中，給id為body的section加上class="container"屬性
→給id為main的section加上class="col-md-8"屬性
→給id為sidebar的section加上class="col-md-4"屬性
如何讓header和footer部分也應用Grid呢？
→去掉id為page的div的class="container"屬性，變為：<div id="page">
→給header加上class="container"屬性，變為：<header class="container">
→給footer加上class="container"屬性，變為：<footer class="container">
以上，header, body, footer部分都應用了Grid，body的main部分占8個單元格，body的sidebar部分占4個單元格。
so far so good。但是，如果我們把瀏覽器的寬度縮小到像智能手機屏幕般大小，一些不和諧的方面呈現了出來：
比如，本來一行的標題撐成了2行：
比如，本來可以完整呈現的圖片，現在需要滑動水平滾動條才可以窺其全貌：
還比如，原先在右邊的部分，被擠到了下方，等等。
如何解決這些問題呢？
Multiple Grids
Multiple Grids的意思是：一個頁面元素可以有多個表示單元格大小的類名。不同的頁面寬度，啟用不同的類。
在Bootstrap 3中，
".col-lg-xx"表示頁面寬度>=1200像素。
".col-md-xx"表示頁面寬度>=992像素。
".col-sm-xx"表示頁面寬度>=768像素。
".col-xs-xx"表示頁面寬度<768像素。
我們可以為一個html元素賦予多個類名，區分地表示，在ld情況下占幾個單元格，在md情況下占幾個單元格,等等。
假設我們需要考慮sm的情況，即面寬度>=768像素的情況。
→在id為main的section中，為class增加col-sm-9
→在id為sidebar的sectioin中，為class增加col-sm-3
現在，把頁面寬度調整到大概800像素的大小。
可見，這時候，正如之前設置的，id為main的section占了9個單元格，id為sidebar的sectioin占了3個單元格。
接着，我們再考慮xs的情況，即頁面寬度<768像素的情況。
→在id為main的section中，為class增加col-xs-6
→在id為sidebar的sectioin中，為class增加col-xs-6
現在，把頁面寬度調整到大概590像素的大小。
可見，這時候，正如之前設置的，id為main的section占了6個單元格，id為sidebar的sectioin占了6個單元格。
但是，當頁面寬度<768像素的時候，把左右2邊都設置成占6個單元格的做法，不太可能出現在實際項目中，以上這么做只是為了演示。我們還需要把這種情況對應的類名刪除。回到如下的狀態：
參考資料：WilderMinds
“Bootstrap 3之美”系列類包括:
Bootstrap 3之美01-下載並引入頁面
Bootstrap 3之美02-Grid簡介和應用
Bootstrap 3之美03-獨立行,文字環繞,圖片自適應,隱藏元素
Bootstrap 3之美04-自定義CSS、Theme、Package
Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form
Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模擬Select、Input Groups、Thumbnails、Panels、Wells
Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel