Web前端開發(fā)者每天都與HTML、CSS、JavaScript打交道，然而不少人都是周而復(fù)始地寫模板、樣式和交互效果，并沒有想過如何將這些重復(fù)的工作整合在一起。Twitter推出的Bootstrap能夠幫助Web前端開發(fā)者擺脫這種重復(fù)勞動。
Bootstrap的歷史
為了應(yīng)對復(fù)雜的需求，早期的Twitter前端工程師在開發(fā)網(wǎng)站時幾乎采用了所有自己熟悉的前端庫。造成了網(wǎng)站維護(hù)困難、擴(kuò)展性不強(qiáng)、開發(fā)成本高等問題。此時BootStrap被提上了日程。Twitter要求前端工程師完全依靠這一單一框架進(jìn)行前端開發(fā)。
Twitter 在2011年8月將其開源，并在2012年2月3日發(fā)布了2.0版。在GitHub上，這個項目已有擁超過2萬位關(guān)注者和4000個分支。 Bootstrap的設(shè)計者、著名前端工程師Mark Otto這樣寫道：“Bootstrap是我和Jacob Thornton編寫的一個前端工具箱，目的是為了幫助設(shè)計師和Web前端開發(fā)人員快速有效地創(chuàng)建一個結(jié)構(gòu)簡單、性能優(yōu)良、頁面精致的Web應(yīng)用。它使用 了最新的瀏覽器技術(shù)，可以提供精致的網(wǎng)頁排版方式以及表單、按鈕、表格、網(wǎng)格柵格化、導(dǎo)航等諸多元素?！盉ootstrap的內(nèi)置樣式繼承了Mark Otto簡潔亮麗的設(shè)計風(fēng)格，任何開發(fā)團(tuán)隊都能使用它提供的HTML模板、CSS樣式和jQuery組件來布署或者重建一個外觀漂亮的頁面應(yīng)用。
BootStrap 2的新特性
BootStrap 2在原有特性的基礎(chǔ)上著重改進(jìn)了用戶的體驗和交互性，比如新增加的媒體展示功能，適用于智能手機(jī)上多鐘屏幕規(guī)格的響應(yīng)式布局，另外新增了12款jQuery插件，可以滿足Web頁面常用的用戶體驗和交互功能。
BootStrap 2的運用
Bootstrap的文件結(jié)構(gòu)
讀 者可以直接從GitHub下載到Bootstrap源碼，本地解壓后可以看到這樣的目錄結(jié)構(gòu)：docs、img、jquery-ui- bootstrap、js和less。其中最為重要的是“docs”下的CSS樣式文件，“l(fā)ess”中的編譯文件和“js”下的jQuery插件。
Bootstrap的安裝
關(guān)于如何應(yīng)用提取出來的文件大致有兩步：第一是如何安裝Bootstrap的基本樣式，第二是如何調(diào)用Bootstrap的jQuery插件，我們首先來看樣式的安裝。
樣式的安裝有多種方法，圖1展示的是一種常用的調(diào)用樣式方法“l(fā)ink”。
這 里有兩個關(guān)鍵點，其中“bootstrap.css”是Bootstrap中的基本樣式文件，只要使用Bootstrap就必須調(diào)用這個文件。而 “bootstrap-responsive.css”則可以根據(jù)你的愛好來選擇，如果想讓項目具有響應(yīng)式布局的效果，就必須要調(diào)用這個樣式文件，而且調(diào) 用必須遵循先后順序，“bootstrap-responsive.css”必須放置在“bootstrap.css”之后，否則便不具有響應(yīng)式布局功 能。而最后的“style.css”是項目中的自定義樣式，用來覆蓋Bootstrap中的一些默認(rèn)設(shè)置，便于開發(fā)者定制。
“CSS”樣式安裝完后，就可以進(jìn)入“js”的調(diào)用，方法很簡單，只需把想要的jQuery插件按照與上一步相似的方式加入到代碼中。
Bootstrap 2的模塊
BootStrap 2的模塊從大的方面可以分為布局框架、頁面排版、基本組件、jQuery插件以及變量編譯的Less幾個部分。與第1版相比，Bootstrap 2增加了多個新模塊，比如布局框架中的“響應(yīng)式布局”，頁面排版中的“ICON”，基本組件中的“進(jìn)度條”，而jQuery插件從以前的5個效果增加到 12個，完全可以滿足項目常用的交互效果。下面來簡單了解一下Bootstrap 2中各模塊的功能。
頁面布局
布局在每個項 目中都必不可少，Bootstrap在960gs的基礎(chǔ)上擴(kuò)展了一套優(yōu)秀的Grids布局，而在“響應(yīng)式布局”中有更強(qiáng)大的功能，能讓網(wǎng)格布局適應(yīng)各種設(shè) 備。使用也相當(dāng)簡單，只需要按照HTML模板應(yīng)用，就能輕松地構(gòu)建你所需的布局效果。此外，改變模板中的類名，就能實現(xiàn)不同的布局風(fēng)格。比如常見的“固定 布局”，只需要在HTML中添加“container”類名；而要實現(xiàn)“流體布局”，只需要在HTML中添加“container-fluid”類名。 Bootstrap還為開發(fā)者設(shè)計了“Responsive”， 令布局框架更為出色。開發(fā)者可以在此基礎(chǔ)上進(jìn)行任何樣式的覆蓋，從而實現(xiàn)理想中的響應(yīng)式設(shè)計。
頁面排版
頁面排版的好壞直接影 響產(chǎn)品風(fēng)格，說直白點就是好不好看。在Bootstrap中，頁面的排版都是從全局的概念上出發(fā)，定制了主體文本、段落文本、強(qiáng)調(diào)文本、標(biāo)題、Code風(fēng) 格、按鈕、表單、表格等格式。而Bootstrap 2中又添加了幾個新亮點。其一是“Code”使用了“Google Prettify”插件，增強(qiáng)了代碼的閱讀體驗；其二在“按鈕”中增加了組合、下拉、圖標(biāo)等效果，如圖2所示。
第三就是“Icon”的使用，Bootstrap在“Icon”部分采用了“Sprites”技術(shù)，為大家準(zhǔn)備了上百種常用的“Icon”圖標(biāo)應(yīng)用。
說 起Icon，這里有必要在向讀者推薦一個從BootStrap擴(kuò)展出來的Font Awesome項目。它是Dave Gandy在Bootstrap的基礎(chǔ)上擴(kuò)展出來的一個Icon主題，最大的特點在于，整套圖標(biāo)中沒有運用任何圖片。大家可能會覺得奇怪，沒有圖片如何制 作Icon？難道是通過純CSS編寫的嗎？是的，F(xiàn)ont Awesome項目中主要運用了CSS3的“@font-face”和“偽元素”一起實現(xiàn)。
要使用Font Awesome，首先需要在服務(wù)器上安裝“fontawesome-webfont”字體，接著在樣式中通過“@font-face”來啟用這些字體：
具備了上面的條件后，就只要樣式中調(diào)用“FontAwesome”字體，并在“偽類元素”中使用對應(yīng)的“字符編碼”：
3. 開啟“Tab”功能
對于其他組件，使用方法相近，在此不做贅述。
jQuery插件
Bootstrap中的jQuery插件主要用來幫助開發(fā)者實現(xiàn)與用戶交互的功能，在第1版中，Bootstrap就為大家提供了6種常見的插件。
1.彈出框（Modals）：進(jìn)行了動態(tài)的擴(kuò)展，使得Less具有更強(qiáng)大的功能和靈活性?；贚ess，我們 編輯CSS就可以像使用編程語言一樣，定義變量、嵌入聲明、混合模式、運算等。Bootstrap中有一套編輯好的Less框架，開發(fā)者可以將其應(yīng)用到自 己的項目，也可以通過less.js、Less.app或Node.js等方法來轉(zhuǎn)譯Less文件。Less文件一旦編譯，Bootstrap框架就僅包 含CSS樣式，這意味著沒有多余的圖片、Flash之類元素。Less好處是利于編寫，但缺點是只適合用于開發(fā)一些簡潔的CSS樣式。舉個簡單的例子，如 果你想為多個樣式設(shè)置同一個顏色，可以這樣寫。
編譯后的CSS如下所示：
以上代碼只是最簡的Less應(yīng)用示范。除了變量，還可以在CSS中進(jìn)行數(shù)學(xué)運算、傳參、文件相互引用、規(guī)則嵌套等?？梢韵胂?，這種編寫CSS的方式會為前端開發(fā)帶來多大的改變。無論是從靈活性、擴(kuò)展性還是可維護(hù)性上，Less都讓CSS開發(fā)效率有了大幅提升。
Bootstrap的jQuery UI
Bootstrap的jQuery UI其實是從框架中衍生出來的一個jQuery UI主題，受到Twitter項目的啟發(fā)，Addy Osmani也在Bootstrap的基礎(chǔ)上整理出一個jQuery UI Bootstrap主題。
jQuery UI Bootstrap除了包含Bootstrap各個方面功能之外，還在其基礎(chǔ)上補(bǔ)充了以下特性：動態(tài)添加Tabs、日期范圍選擇組件、自定義文件載入框、滑動塊、日期控件。
BootStrap 2案例
通過前面的介紹，你可能已經(jīng)體會到Bootstrap的強(qiáng)大，但能否運用到生產(chǎn)項目中，可能還存有疑問。
目 前使用Bootstrap的著名案例有NASA和MSNBC的Breaking News。此外很多CMS也在運用Bootstrap框架，比如大家熟悉的WordPress、Drupal等。如果你還想了解更多Bootstrap案 例，可以參考Wrapbootstrap.com。
BootStrap 2的優(yōu)勢和缺點
如今的Bootstrap已包括了幾十個組件，每個組件都自然地結(jié)合了設(shè)計與開發(fā)，具有完整的實例文檔，定義了真正的組件和模板。無論處在何種技術(shù)水平的開發(fā)者，也無論處在哪個工作流程中，都可以使用Bootstrap快速、方便地構(gòu)建開發(fā)者喜歡的應(yīng)用。
難能可貴的是，Bootstrap依舊本著“并行開發(fā)”、“作為產(chǎn)品的風(fēng)格指南”和“迎合所有的技能水平”的原則幫助開發(fā)者解決實際問題，不斷完善自己，吸引更多人選擇Bootstrap應(yīng)用于自己的項目中。
然 而古人云“萬物相生相克”，有好就有壞，Bootstrap也是一樣。對于在國內(nèi)的開發(fā)者來說，最可怕的就是IE兼容問題。目前Bootstrap對 IE6到IE8的支持都不友好。另一個缺點是，采用Bootstrap的模板，網(wǎng)站結(jié)構(gòu)時常會顯得臃腫。此外，覆蓋一些樣式時會造成代碼冗余。但與其他前 端框架相比，我個人覺得Bootstrap的缺點僅此而以，至于其他方面希望有機(jī)會與大家一起探討和學(xué)習(xí)。
總結(jié)
Bootstrap是一套前端開發(fā)利器。它可以幫助我們加速項目開發(fā)，讓我們身處在一個完備的系統(tǒng)中，擁有一致的設(shè)計和實現(xiàn)方法。不需要在外觀上花費過多時間，使開發(fā)者能將精力集中于更重要的功能。
Bootstrap將改變我們的合作方式與開發(fā)進(jìn)程，任何人都可以基于Bootstrap建立可擴(kuò)展的前端工具包，或者在它的基礎(chǔ)上啟動屬于自己的框架。
如需轉(zhuǎn)載，煩請注明出處：http://www.w3cplus.com/css/twitter-bootstrap.html
收藏本文擴(kuò)展閱讀：網(wǎng)站分析：5173首頁前端性能優(yōu)化實踐
聯(lián)系客服
