大多數Bootstrap的使用者都認為Bootstrap只提供了CSS組件 和JavaScript插件，其實CSS組件和JavaScript插件只是Bootstrap框架的表現形式而已，它們都是構建在基礎平台之上的。
本節目錄：
12柵格系統
這是整個bs最核心的功能，也是響應式設計核 心理念的一個實現形式。
基礎布局組件
bs提供了多種基礎布局組 件，比如排版、代碼、表格、按鈕、表單等
jQuery
bs所有的JavaScript插件都依賴於jQuery1.10+，如果 要使用這些插件，那就必須引用jQuery庫。
響應式設計
響應式設計是一個理念，而非功能,bs的所有內容，都是以響應式設計為設計理念來實現的。
CSS組件
bs眾多的組件，讓其使用起來非常方便，CSS和JavaScript插件中間有5個箭頭，表示這5個相關的組件（插件）是有直接關系的。
JavaScript插件
通過js插件，可以實現更復雜的頁面邏輯。
實現原理
柵格系統的實現原理非常簡單，僅僅是通過定義容器大小，平分12份，再調整內外邊距，最后再結合媒體查詢，就制作出了強大的響應式的柵格系統。
用法
- 一行數據（row）必須包含在容器中（通常在.container里）
- 使用行（row）在水平方向創建一組列（column）
- 具體內容應當放置於列（column）內
響應式柵格
在bs的柵格系統中，根據寬度將瀏覽器分為4種。其值分別是：自動（100%）、750px、970px、 1170px。
對應的樣式為超小（xs）、小型（sm）、中型屏幕 （md）、大型 （lg）
本質通過媒體查詢定義最小寬度實現。所以，向大兼容，向小不兼容！
列偏移
柵格系統的列偏移（offset）功能不必再定義margin值。使用.col-md-offset-*形式的樣式就可以將列偏移到右側。
本質通過margin-left就實現出這個效果。
列排序
列排序（push與pull）其實就是改變列的方向，也就是改變左右浮動，並且設置浮動的距離。
通過push推和pull拉，本質通過left和right來改變位置。
AO模式：A表示Append，即“附加”的意思；O表示Overwrite，即“重寫”的意思。
基礎樣式
任何一個CSS組件在剛開始都要先定義基本樣式。通過基礎樣式來定義統一的字號、背景色。
顏色樣式
5種基本顏色分別是：primary（重點藍）、success（成功綠）、info（信息藍）、warning（警告橙）、danger（危險紅）。
定義顏色與組件的特性有關，面板panel就只需要定義邊框的顏色就可以了，而按鈕不僅需要定義邊框顏色，還需要定義背景色以及文本顏色。
尺寸樣式
有4種基本尺寸：超小（xs）、小型（sm）、普通、大型（lg）。
狀態樣式
高亮可用的時候用active樣式，禁用的時候用disabled樣式
這種類型的樣式一般是處理元素的陰影、鼠標形狀、透明 度、虛框等方面的內容。
特殊元素樣式 並列元素 嵌套子元素
所謂特殊元素，即特定類型的組件一般只使用某一種或者幾種固定的元素。
比如alert警告框內一般只用警告標題、內容和關閉鏈接元素，再如導航（nav）里的經常用的li元素。
動畫樣式
在bs里，動畫樣式應用得不是很多，只在進度條組件里會使用到。（這里不包括bs的trans插件）
只需要在progress樣式上應 用一個active樣式，即可開啟動畫過渡效果。
HTML布局規則
默認情況下，所有的插件都可以通過設置特定的HTML代碼和 相應的屬性（或自定義屬性）來實現。
如：data-dismiss="alert"，data-toggle="dropdown"，data-toggle="tab"
本質實現方式大致如下
// alert插件類及原型方法的定義
// 定義選擇器,所有符合該自定義屬性的元素都可以觸發下面的事件
var dismiss = '[data-dismiss="alert"]';
var Alert = function (el) {
// 傳入元素,如果元素內部有dismiss上設置的自定義屬性,則click事件會觸發原型上的close方法
$(el).on('click', dismiss, this.close);
}
Alert.prototype.close = function (e) {
//todo close
}
實現
- 聲明立即調用的函數
- 定義插件類及相關原型方法
- 在jQuery上定義插件並重設插件構造函數
- 防沖突處理
- 綁定各種觸發事件
自定義事件
所有的事件都是命名空間化的，即單個事件都要放在某個命名空間下，比如，show.bs.modal。
所有的插件都提供了preventDefault功能，用於阻止繼續執行后續的代碼，比如，
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // 拒絕顯示彈窗
})
Bootstrap是一個移動先行的框架，默認情況下，針對不同的屏幕尺寸，會自動地調整頁面，使其在不同尺寸的屏幕上都表現得很好。
禁用步驟
- 刪除名稱為viewpot的meta元素，例如：<meta name="viewport"……/>
- 為.container設置一個固定的寬度值，從而覆蓋框架的默認width設置，例如width: 970px!important
- 如果使用了導航條組件，還需要移除所有的折疊行為和展 開行為
- 對於柵格布局，額外增加.col-xs-*樣式，或替換.col-md-* 和.col-lg-*樣式
本節地址：http://neverc.cnblogs.com/p/4779890.html