聲明： 本文已經首發于InfoQ中文站，版權所有，原文為《優秀的開源前端框架Bootstrap發布2.0.1版》，如需轉載，請務必附帶本聲明，謝謝。

Bootstrap是著名的社交網站、微博的先驅Twitter在2011年8月推出的開源WEB前端框架，集合CSS和HTML，使用了最新的瀏覽器技術，為快速WEB開發提供了一套前端工具包，包括布局、網格、表格、按鈕、表單、導航、提示等等。使用Bootstrap可以構建出非常優雅的前端界面，而且占用資源非常小。

Bootstrap發布時間不長，但是已經非常成熟了，目前最新版本是2.0，包括完整的CSS編譯和非編譯版本，樣例模板和Javascript插件。

歷史

早期Twitter的前端工程師幾乎采用了任何自己熟悉的庫來應對前端的開發需求，這樣的造成的問題就是維護和擴展非常困難。最終Bootstrap成為應對這些挑戰的解決方案，并開始在Twitter內部迅速成長，被twitter.com廣泛采用，形成了穩定版本。隨著工程師對其不斷的開發和完善，Bootstrap進步顯著，不僅包括基本樣式，而且有了更為優雅和持久的前端設計模式。2011年8月，Twitter將其開源，相關地址：http://twitter.github.com/bootstrap

使用Bootstrap構建優雅的Web Page

Bootstrap的核心就是基于Less框架構建的CSS。所以談到Bootstrap，就必須得說說Less。

關于Less

Less是一個動態CSS語言框架，Less擴展了CSS的動態特性，相對于傳統的CSS，Less提供了更為強大的功能和靈活性。基于Less，我們可以在編寫CSS時使用嵌入式申明、變量、混合模式、運算和顏色編輯功能函數等。簡單來說就是Less可以讓你像編程一樣編寫CSS，把程序存儲在后綴為less的文件中，Less提供了框架將其編譯為標準的css文件。舉個簡單的例子，如果你想為多個樣式設置同一個顏色，可以這樣寫：

@color: #FFFFFF;
h1 {
color: @color;
} 
#sub{
color: @color;
}

編譯后的css就是：

h1 {
  color: #ffffff;
}
#sub {
  color: #ffffff;
}

以上代碼只是Less的最簡應用。除了變量，還可以在CSS進行數學運算、傳參、文件相互引用、規則嵌套等等。可以想象，這種編寫CSS的方式會為前端開發帶來多大的改變。無論是從靈活性、擴展性和可維護性上，Less都讓CSS開發有了大幅提升，動態性增強了。

Less的官方網站是http://lesscss.org/，很奇怪這樣的網站會被我黨封掉，需要FQ才能訪問。

編譯Less的方式很簡單，有兩種方式，一種是在使用時編譯。下載less.js，在樣式中引用：

<link rel="stylesheet/less" type="text/css" href="less/mystyles.less">

<script src="js/less.js" type="text/javascript"></script>

注意要把樣式文件放到js文件申明的前面。

還有一種方式是使用前編譯好，可以通過服務器端的Node.js進行編譯，也可以到這個網站http://incident57.com/less/下載Less.app，提供了GUI方式編譯less文件，目前只支持Mac OS X。

關于Less的使用，似乎需要寫另一篇文章進行介紹，這里就不做更多的描述了。

基于Less編譯的Bootstrap

使用了Less的Bootstrap具備如下優點：

1、Bootstrap實現起來依舊很簡單，使用也很簡單，把Bootstrap.css拖入你的代碼即可。編譯less文件可以使用less.js，Less.app或Node.js等多種方案實現。

2、一旦編譯，Bootstrap框架僅包含CSS文件，這意味著沒有多余的圖片、Flash或Javascript，只有用于Web應用開發的簡潔而強大的CSS樣式。

兼容性

目前Bootstrap的最新版本是2.0，支持幾乎所有的主流瀏覽器，包括Safari、Chrome，Firefox、IE7.0及以上，最新版本還支持智能手機WebUI。

2.0的新特性

Bootstrap的版本更新很快，2011年11月剛發布了1.4，2012年2月份就再次放出新版本2.0，而且有了大幅改進。

2.0版本采用了更靈活也更受歡迎的12欄網格布局，并以此來實現其各種布局框架。增加了響應式設計，以適應各種移動終端的需求。完善和改進原有樣式庫，并提供更豐富的新樣式，包括樣式繁多的圖標（icon），漂亮易用的進度條等。改進和增加了自定義jQuery插件，完善文檔，修復bug，同時還提供了很多基于Bootstrap構建的網站樣例。

已經使用1.4的開發者也不用擔心，Bootstrap專門提供了從1.4升級到2.0的手工向導可以參考。

功能集合 

Bootstrap2.0把現有框架進行了清晰的功能劃分，主要分為框架（Scaffolding），基礎CSS，構件庫和jQuery插件庫。

Scaffolding主要提供基于網格的各種布局，包括普通網格系統、嵌入式網格，固定布局、自適應布局，同時可以對網格和布局進行自定義。Bootstrap2.0提供了響應式設計，可以通過單個文件支持各種手持設備，自適應不同的設備和屏幕變化。

基礎CSS包括各種排版樣式（標題、段落、引用塊、列表、內聯標簽等），代碼展示方面提供了基于code標簽的內嵌代碼，基于pre的塊代碼和基于Google Prettify的代碼樣式。同時提供各種表格、表單、按鈕、圖標的展示方式。

構件庫提供了基于按鈕、導航、標簽、排版、警告、進度欄、圖像網格等控件。

jQuery插件庫則提供了十幾種插件實現動態效果，例如Modal、Dropdown、Tab、Tooltip、Popover、Carousel等，開發者可以根據自己的業務需求使用不同的插件實現各種動態效果。 

采用Bootstrap作為前端框架的網站示意圖

更詳細的信息請參考Bootstrap的官方網站。