2.2 瞭解Bootstrap
2.2.1 Bootstrap是html5的文檔
Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設置為 HTML5 文檔類型。在你項目中的每個頁面都要參照下面的格式進行設置。
...
2.2.2 移動設備優先
Bootstrap 3是對移動設備友好的。不是簡單的增加一些可選的針對移動設備的樣式，而是直接融合進了框架的內核中。也就是說，Bootstrap 是移動設備優先的。針對移動設備的樣式融合進了框架的每個角落，而不是增加一個額外的文件。
為了確保適當的繪製和觸屏縮放，需要在 之中添加 viewport 元數據標籤。
在移動設備瀏覽器上，通過為視口（viewport）設置 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感覺。注意，這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定。
2.2.3 柵格系統
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的佈局。
柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面佈局，你的內容就可以放入這些創建好的佈局中。下面就介紹一下 Bootstrap 柵格系統的工作原理：
“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100%
寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
通過“行（row）”在水平方向創建一組“列（column）”。
你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。
類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格佈局。Bootstrap 源碼中定義的 mixin也可以用來創建語義化的佈局。
通過為“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過為 .row 元素設置負值
margin 從而抵消掉為 .container 元素設置的
padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
負值的 margin就是下面的示例為什麼是向外突出的原因。在柵格列中的內容排成一行。
柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。
如果一“行（row）”中包含了的“列（column）”大於 12，多餘的“列（column）”所在的元素將被作為一個整體另起一行排列。
柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何
.col-md-*柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何
.col-lg-*不存在， 也影響大屏幕設備。
通過研究後面的實例，可以將這些原理應用到你的代碼中。
下面這幅圖有助於理解Bootstrap的柵格系統。
三. 在線學習的網站推薦
Bootstrap V3版本官網：http://v3.bootcss.com
菜鳥教程Bootstrap專欄：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
騰訊課堂：http://ke.qq.com
慕課網：http://www.imooc.com
閱讀更多 程序員界的彭于晏 的文章
