之前有粗略地看過一下Bootstrap的內容，不過那只是走馬觀花式地看下是怎么用的，以及里面有什么控件，所以就沒想着記筆記。現在由於要給部門做分享，所以不得不深入地去學習下，不然僅是簡單地說下怎么用，那就無異於“謀殺”別人（浪費別人的時間等於謀財害命——魯迅）。
1、整體架構
下圖為Bootstrap的整體架構圖，共分為六大部分：
1.1、12柵格系統
12柵格系統就是把網頁的總寬度平分為12份，我們可以自由按份組合。柵格系統使用的總寬度可以不固定，Bootstrap是按百分比進行平分。（保留15位小數點精度）
12柵格系統是整個Bootstrap的核心功能，也是響應式設計核心理念的一個實現形式。
1.2、JQuery
Bootstrap所有的JavaScript插件都依賴於jQuery1.10+，如果要使用這些插件，那就必須引用jQuery庫。如果你只用CSS組件，那就可以不引用它了。
1.3、響應式設計
響應式設計是一個理念，而非功能。Bootstrap的所有內容，都是以響應式設計為設計理念來實現的。
響應式設計的目的：讓頁面應該有能力自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端，而不是為每個終端做一個特定的版本。
實踐方式：由多方面決定，包括彈性網格和布局、圖片、CSS媒體查詢（media query）的使用等。
2、柵格系統
2.1、實現原理
通過定義容器大小，平分12份，再調整內外邊距，最后再結合媒體查詢，就制作出了強大的響應式的柵格系統。Bootstrap默認的柵格系統平分為12份，在使用的時候大家也可以根據情況通過重新編譯LESS源碼來修改12這個數值。
2.2、工作原理
- 提供寬度限制。container隨着頁面寬度變化而變化，由於column的寬度是基於百分比，所以它們的寬度不用去管。
- 提供左右padding，以至於文本內容不會觸及瀏覽器邊緣。container左右有15px的padding。如下圖：
- Row是Column的存放容器，Row中最多只能放12個左浮動的Column。
- Row有個特殊的地方就是左右-15px的margin。這樣正好抵消父容器container中的15px的padding。（剛開始我覺得這樣不是在瞎折騰嗎？但看到后面才發現這正是它的精妙之處）
Column: - column有左右15px的padding,所以位於兩邊的column有15px的padding，可以使其內容不會碰到container的邊界，而同時不同column的內容之間就有了30px的槽，如下圖：
嵌套： - 上面提到它的精妙之處就是為嵌套而設計的。由於container和column都有15px的padding，所以在嵌套時column就相當container了，這樣就可以實現任意的嵌套。
列偏移（Offset）： - 為當前元素增加了左邊距（left-margin）。
列排序（Push and Pull）
設置元素的定位，而非邊距（margin）。push和pull必須同時使用，否則會重疊。
3、結束語
主要參考：1、《深入理解boostarp》
2、http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works