[Bootstrap]7天深刻Bootstrap(2)總體架構

大多數Bootstrap的使用者都認爲Bootstrap只提供了CSS組件 和JavaScript插件，其實CSS組件和JavaScript插件只是Bootstrap框架的表現形式而已，它們都是構建在基礎平臺之上的。

 

本節目錄：

• 總體架構
• 柵格系統
• CSS組件架構
• JS插件架構
• 禁用響應式佈局

 

總體架構

12柵格系統

　　這是整個bs最核心的功能，也是響應式設計核 心理念的一個實現形式。

基礎佈局組件

　　bs提供了多種基礎佈局組 件，好比排版、代碼、表格、按鈕、表單等

jQuery

　　bs全部的JavaScript插件都依賴於jQuery1.10+，若是 要使用這些插件，那就必須引用jQuery庫。

響應式設計

　　響應式設計是一個理念，而非功能,bs的全部內容，都是以響應式設計爲設計理念來實現的。

CSS組件

　　bs衆多的組件，讓其使用起來很是方便，CSS和JavaScript插件中間有5個箭頭，表示這5個相關的組件（插件）是有直接關係的。

JavaScript插件

　　經過js插件，能夠實現更復雜的頁面邏輯。

 

柵格系統

實現原理

柵格系統的實現原理很是簡單，僅僅是經過定義容器大小，平分12份，再調整內外邊距，最後再結合媒體查詢，就製做出了強大的響應式的柵格系統。

 

用法

1. 一行數據（row）必須包含在容器中（一般在.container裏）
2. 使用行（row）在水平方向建立一組列（column）
3. 具體內容應當放置於列（column）內

 

響應式柵格

在bs的柵格系統中，根據寬度將瀏覽器分爲4種。其值分別是：自動（100%）、750px、970px、 1170px。

對應的樣式爲超小（xs）、小型（sm）、中型屏幕 （md）、大型 （lg）

本質經過媒體查詢定義最小寬度實現。因此，向大兼容，向小不兼容！

 

列偏移

柵格系統的列偏移（offset）功能沒必要再定義margin值。使用.col-md-offset-*形式的樣式就能夠將列偏移到右側。

本質經過margin-left就實現出這個效果。

 

列排序

列排序（push與pull）其實就是改變列的方向，也就是改變左右浮動，而且設置浮動的距離。

經過push推和pull拉，本質經過left和right來改變位置。

 

CSS組件架構

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樣式，便可開啓動畫過渡效果。

 

JS插件架構

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
        }

 

實現

1. 聲明當即調用的函數
2. 定義插件類及相關原型方法
3. 在jQuery上定義插件並重設插件構造函數
4. 防衝突處理
5. 綁定各類觸發事件 

 

自定義事件

全部的事件都是命名空間化的，即單個事件都要放在某個命名空間下，好比，show.bs.modal。

全部的插件都提供了preventDefault功能，用於阻止繼續執行後續的代碼，好比，

$('#myModal').on('show.bs.modal', function (e) {   
 if (!data) return e.preventDefault()        // 拒絕顯示彈窗 
})

 

 

禁用響應式佈局

Bootstrap是一個移動先行的框架，默認狀況下，針對不一樣的屏幕尺寸，會自動地調整頁面，使其在不一樣尺寸的屏幕上都表現得很好。

 

禁用步驟

1. 刪除名稱爲viewpot的meta元素，例如：<meta name="viewport"……/>
2. 爲.container設置一個固定的寬度值，從而覆蓋框架的默認width設置，例如width: 970px!important
3. 若是使用了導航條組件，還須要移除全部的摺疊行爲和展 開行爲
4. 對於柵格佈局，額外增長.col-xs-*樣式，或替換.col-md-* 和.col-lg-*樣式

 

本節地址：http://neverc.cnblogs.com/p/4779890.html