Twitter Bootstrap：前端框架利器

 Bootstrap 的文件結構

        讀者能夠直接從 GitHub 下載到 Bootstrap 源碼，本地解壓後能夠看到這樣的目錄結構：docs、img、jquery-ui- bootstrap、js 和 less。其中最爲重要的是「docs」下的 CSS 樣式文件，「less」中的編譯文件和「js」下的 jQuery 插件。

        Bootstrap 的安裝

        關於如何應用提取出來的文件大體有兩步：第一是如何安裝 Bootstrap 的基本樣式，第二是如何調用 Bootstrap 的 jQuery 插件，咱們首先來看樣式的安裝。

        樣式的安裝有多種方法，圖 1 展現的是一種經常使用的調用樣式方法「link」。

圖 1 Bootstrap 樣式調用方式

        這裏有兩個關鍵點，其中「bootstrap.css」是 Bootstrap 中的基本樣式文件，只要使用 Bootstrap 就必須調用這個文件。而 「bootstrap-responsive.css」則能夠根據你的愛好來選擇，若是想讓項目具備響應式佈局的效果，就必需要調用這個樣式文件，並且調 用必須遵循前後順序，「bootstrap-responsive.css」必須放置在「bootstrap.css」以後，不然便不具備響應式佈局功 能。而最後的「style.css」是項目中的自定義樣式，用來覆蓋 Bootstrap 中的一些默認設置，便於開發者定製。

        「CSS」樣式安裝完後，就能夠進入「js」的調用，方法很簡單，只需把想要的 jQuery 插件按照與上一步類似的方式加入到代碼中。

        Bootstrap 2 的模塊

        BootStrap 2 的模塊從大的方面能夠分爲佈局框架、頁面排版、基本組件、jQuery 插件以及變量編譯的 Less 幾個部分。與第 1 版相比，Bootstrap 2 增長了多個新模塊，好比佈局框架中的「響應式佈局」，頁面排版中的「ICON」，基本組件中的「進度條」，而 jQuery 插件從之前的 5 個效果增長到 12 個，徹底能夠知足項目經常使用的交互效果。下面來簡單瞭解一下 Bootstrap 2 中各模塊的功能。

        頁面佈局

        佈局在每一個項目中都必不可少，Bootstrap 在 960gs 的基礎上擴展了一套優秀的 Grids 佈局，而在「響應式佈局」中有更強大的功能，能讓網格佈局適應各類設備。使用也至關簡單，只須要按照 HTML 模板應用，就能輕鬆地構建你所需的佈局效果。此外，改變模板中的類名，就能實現不一樣的佈局風格。好比常見的「固定佈局」，只須要在 HTML 中添加「container」類名；而要實現「流體佈局」，只須要在 HTML 中添加「container-fluid」類名。 Bootstrap 還爲開發者設計了「Responsive」， 令佈局框架更爲出色。開發者能夠在此基礎上進行任何樣式的覆蓋，從而實現理想中的響應式設計。

        頁面排版

        頁面排版的好壞直接影響產品風格，說直白點就是好很差看。在 Bootstrap 中，頁面的排版都是從全局的概念上出發，定製了主體文本、段落文本、強調文本、標題、Code 風格、按鈕、表單、表格等格式。而 Bootstrap 2 中又添加了幾個新亮點。其一是「Code」使用了「Google Prettify」插件，加強了代碼的閱讀體驗；其二在「按鈕」中增長了組合、下拉、圖標等效果，如圖 2 所示。

        第三就是「Icon」的使用，Bootstrap 在「Icon」部分採用了「Sprites」技術，爲你們準備了上百種經常使用的「Icon」圖標應用。

        提及 Icon，這裏有必要在向讀者推薦一個從 BootStrap 擴展出來的 Font Awesome 項目。它是 Dave Gandy 在 Bootstrap 的基礎上擴展出來的一個 Icon 主題，最大的特色在於，整套圖標中沒有運用任何圖片。你們可能會以爲奇怪，沒有圖片如何製做 Icon？難道是經過純 CSS 編寫的嗎？是的，Font Awesome 項目中主要運用了 CSS3 的「@font-face」和「僞元素」一塊兒實現。

        要使用 Font Awesome，首先須要在服務器上安裝「fontawesome-webfont」字體，接着在樣式中經過「@font-face」來啓用這些字體：

        具有了上面的條件後，就只要樣式中調用「FontAwesome」字體，並在「僞類元素」中使用對應的「字符編碼」：

        這樣一來，就不採用任何圖片實現 Icon 效果，一塊兒來看一個效果圖吧。

        基本組件

        基本組件是 Bootstrap 2 的精華之一，裏面都是開發者平時須要的交互組件。好比「網站導航」、「Tabs」、「工具條」、「麪包屑」、「分頁欄」、「提示標籤」、「產品展現」、 「提示信息塊」和「進度條」等。這些組件都配有「jQuery」插件，運用它們能夠大幅度提升用戶的交互體驗，使產品再也不那麼呆板無吸引力。說了這麼多種 組件，具體該如何使用？下面我以常見的「Tabs」組件爲例，向你們展現使用方法。

        要想使用 BootStrap 基本組件，必須知足三點：第一，最基本的 HTML 結構要對號；第二，須要 Bootstrap 中的「jQuery」插件提供相應功能；第三，在項目中對應的「Tabs」元素上啓用「Tabs」功能。

        1. HTML Markup

        2. 調用 jQuery 插件

        3. 開啓「Tab」功能

        對於其餘組件，使用方法相近，在此不作贅述。

        jQuery 插件

        Bootstrap 中的 jQuery 插件主要用來幫助開發者實現與用戶交互的功能，在第 1 版中，Bootstrap 就爲你們提供了 6 種常見的插件。

        彈出框（Modals）：在 JavaScript 模板基礎上自定義的一款流線型、靈活性極強的彈出蒙板效果的插件；

        下拉框（Dropdowns）：Bootstrap 中一款輕巧實用的插件，可能幫助你製做具備下拉功能，好比下拉菜單、下拉按鈕、下拉工具條等效果；

        滾動條（Scrollspy）：實現滾動條位置的效果，好比在導航中有多個標籤，用戶點擊其中一個標籤，滾動條會本身動定位到導航中標籤對應的文本位置；

        Tabs：這個插件可以快速實現本地內容的轉換，動態切換標籤對應的本地內容；

        提示工具（Tooltips）：是一款優秀的 jQuery 插件，無需加載任何圖片，採用 CSS3 新技術，動態顯示「data-attributes」存儲的標題信息；

        提示面板（Popover）：在 Tooltips 的插件上擴展，用來顯示一些疊加內容的提示效果，此插件須要配合 Tooltips 一塊兒使用。

        Bootstrap 2 在前面 6 種插件的基礎上又新增長了 6 種 jQuery 插件：

        警報信息（Alert）：用來關閉警報信息塊；

        按鈕（Button）：用來控制按鈕的狀態或更多組件功能，好比「複選框」、「單選按鈕」以及「載入狀態條」等；

        手風琴（Collapse）：一款輕巧實用的手風琴插件，能夠用來製做摺疊面板或菜單等效果；

        幻燈片（Carouse）：實現圖片播放功能的插件；

        補全文本（Typeahead）：能夠記住文本框輸入的文本，下次輸入時能夠自動補全；

        動畫效果（Transitions）：BootStrap 使用這個插件，爲一些動效果增長了過渡性，使動畫效果更細膩、生動。

        上面簡單介紹了 Bootstrap 2 中的 jQuery 插件，至於如何使用，還須要根據 Bootstrap 所提供的文檔，以及各插件的參數，具體問題具體分析。由於只有充分了解，才能靈活運用。

        變量編譯 Less

        Less 是一個動態 CSS 語言框架，基於本身的 JS 引擎或者服務器端對傳統的 CSS 進行了動態的擴展，使得 Less 具備更強大的功能和靈活性。基於 Less，咱們編輯 CSS 就能夠像使用編程語言同樣，定義變量、嵌入聲明、混合模式、運算等。Bootstrap 中有一套編輯好的 Less 框架，開發者能夠將其應用到本身的項目，也能夠經過 less.js、Less.app 或 Node.js 等方法來轉譯 Less 文件。Less 文件一旦編譯，Bootstrap 框架就僅包含 CSS 樣式，這意味着沒有多餘的圖片、Flash 之類元素。Less 好處是利於編寫，但缺點是隻適合用於開發一些簡潔的 CSS 樣式。舉個簡單的例子，若是你想爲多個樣式設置同一個顏色，能夠這樣寫。

        編譯後的 CSS 以下所示：

        以上代碼只是最簡的 Less 應用示範。除了變量，還能夠在 CSS 中進行數學運算、傳參、文件相互引用、規則嵌套等。能夠想象，這種編寫 CSS 的方式會爲前端開發帶來多大的改變。不管是從靈活性、擴展性仍是可維護性上，Less 都讓 CSS 開發效率有了大幅提高。

        Bootstrap 的 jQuery UI

        Bootstrap 的 jQuery UI 實際上是從框架中衍生出來的一個 jQuery UI 主題，受到 Twitter 項目的啓發，Addy Osmani 也在 Bootstrap 的基礎上整理出一個 jQuery UI Bootstrap 主題。

        jQuery UI Bootstrap 除了包含 Bootstrap 各個方面功能以外，還在其基礎上補充瞭如下特性：動態添加 Tabs、日期範圍選擇組件、自定義文件載入框、滑動塊、日期控件。

        BootStrap 2 案例

        經過前面的介紹，你可能已經體會到 Bootstrap 的強大，但可否運用到生產項目中，可能還存有疑問。

        目前使用 Bootstrap 的著名案例有 NASA 和 MSNBC 的 Breaking News。此外不少 CMS 也在運用 Bootstrap 框架，好比你們熟悉的 WordPress、Drupal 等。若是你還想了解更多 Bootstrap 案例，能夠參考 Wrapbootstrap.com。

        BootStrap 2 的優點和缺點

        現在的 Bootstrap 已包括了幾十個組件，每一個組件都天然地結合了設計與開發，具備完整的實例文檔，定義了真正的組件和模板。不管處在何種技術水平的開發者，也不管處在哪一個工做流程中，均可以使用 Bootstrap 快速、方便地構建開發者喜歡的應用。

        難能難得的是，Bootstrap 依舊本着「並行開發」、「做爲產品的風格指南」和「迎合全部的技能水平」的原則幫助開發者解決實際問題，不斷完善本身，吸引更多人選擇 Bootstrap 應用於本身的項目中。

        然而古人云「萬物相生相剋」，有好就有壞，Bootstrap 也是同樣。對於在國內的開發者來講，最可怕的就是 IE 兼容問題。目前 Bootstrap 對 IE6 到 IE8 的支持都不友好。另外一個缺點是，採用 Bootstrap 的模板，網站結構時常會顯得臃腫。此外，覆蓋一些樣式時會形成代碼冗餘。但與其餘前端框架相比，我我的以爲 Bootstrap 的缺點僅此而以，至於其餘方面但願有機會與你們一塊兒探討和學習。

        總結

        Bootstrap 是一套前端開發利器。它能夠幫助咱們加速項目開發，讓咱們身處在一個完備的系統中，擁有一致的設計和實現方法。不須要在外觀上花費過多時間，使開發者能將精力集中於更重要的功能。

        Bootstrap 將改變咱們的合做方式與開發進程，任何人均可以基於 Bootstrap 創建可擴展的前端工具包，或者在它的基礎上啓動屬於本身的框架。

        做者廖偉華，網名大漠，目前供職於上海慕和網絡科技視覺設計部，從事 Web 前端和手機遊戲工做，對 Web 前端、移動端、前端框架抱有濃厚興趣。