推ter Bootstrap：前端框架利器
Web 前端開發者每天都與 HTML、CSS、JavaScript 打交道，然而不少人都是周而復始地寫模板、樣式和交互效果，并沒有想過如何將這些重復的工作整合在一起。推ter 推出的 Bootstrap 能夠幫助 Web 前端開發者擺脫這種重復勞動。
Bootstrap 的歷史
為了應對復雜的需求，早期的 推ter 前端工程師在開發網站時幾乎采用了所有自己熟悉的前端庫。造成了網站維護困難、擴展性不強、開發成本高等問題。此時 BootStrap 被提上了日程。推ter 要求前端工程師完全依靠這一單一框架進行前端開發。
推ter 在 2011 年 8 月將其開源，并在 2012 年 2 月 3 日發布了2.0版。在 GitHub 上，這個項目已有擁超過 2 萬位關注者和 4000 個分支。 Bootstrap 的設計者、著名前端工程師 Mark Otto 這樣寫道：“Bootstrap 是我和 Jacob Thornton 編寫的一個前端工具箱，目的是為了幫助設計師和 Web 前端開發人員快速有效地創建一個結構簡單、性能優良、頁面精致的 Web 應用。它使用了最新的瀏覽器技術，可以提供精致的網頁排版方式以及表單、按鈕、表格、網格柵格化、導航等諸多元素。”Bootstrap 的內置樣式繼承了 Mark Otto 簡潔亮麗的設計風格，任何開發團隊都能使用它提供的 HTML 模板、CSS 樣式和 jQuery 組件來布署或者重建一個外觀漂亮的頁面應用。
BootStrap 2 的新特性
BootStrap 2 在原有特性的基礎上著重改進了用戶的體驗和交互性，比如新增加的媒體展示功能，適用于智能手機上多鐘屏幕規格的響應式布局，另外新增了 12 款 jQuery 插件，可以滿足 Web 頁面常用的用戶體驗和交互功能。
BootStrap 2 的運用
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 主題，受到 推ter 項目的啟發，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 前端、移動端、前端框架抱有濃厚興趣。