Bootstrap

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

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

目錄

• 1 歷史
• 2 使用Bootstrap構(gòu)建優(yōu)雅的Web Page
  • 2.1 關(guān)于Less
• 3 基于Less編譯的Bootstrap
• 4 2.0的新特性
• 5 功能集合
• 6 相關(guān)條目
• 7 參考來源

歷史

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

使用Bootstrap構(gòu)建優(yōu)雅的Web Page

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

關(guān)于Less

Less是一個(gè)動(dòng)態(tài)CSS語言框架，官方網(wǎng)站是http://lesscss.org/。
Less擴(kuò)展了CSS的動(dòng)態(tài)特性，相對(duì)于傳統(tǒng)的CSS，Less提供了更為強(qiáng)大的功能和靈活性?；贚ess，我們可以在編寫CSS時(shí)使用嵌入式申明、變量、混合模式、運(yùn)算和顏色編輯功能函數(shù)等。簡單來說就是Less可以讓你像編程一樣編寫CSS，把程序存儲(chǔ)在后綴為less的文件中，Less提供了框架將其編譯為標(biāo)準(zhǔn)的css文件。舉個(gè)簡單的例子，如果你想為多個(gè)樣式設(shè)置同一個(gè)顏色，可以這樣寫：

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

}編譯后的css就是：

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

以上代碼只是Less的最簡應(yīng)用。除了變量，還可以在CSS進(jìn)行數(shù)學(xué)運(yùn)算、傳參、文件相互引用、規(guī)則嵌套等等?？梢韵胂螅@種編寫CSS的方式會(huì)為前端開發(fā)帶來多大的改變。無論是從靈活性、擴(kuò)展性和可維護(hù)性上，Less都讓CSS開發(fā)有了大幅提升，動(dòng)態(tài)性增強(qiáng)了。

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

<link rel="stylesheet/less" type="text/css" href="less/mystyles.less">
<script src="js/less.js" type="text/javascript"></script>

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

基于Less編譯的Bootstrap

使用了Less的Bootstrap具備如下優(yōu)點(diǎn)：

1. Bootstrap實(shí)現(xiàn)起來依舊很簡單，使用也很簡單，把Bootstrap.css拖入你的代碼即可。編譯less文件可以使用less.js，Less.app或Node.js等多種方案實(shí)現(xiàn)。
2. 一旦編譯，Bootstrap框架僅包含CSS文件，這意味著沒有多余的圖片、Flash或Javascript，只有用于Web應(yīng)用開發(fā)的簡潔而強(qiáng)大的CSS樣式。

兼容性

目前Bootstrap的最新版本是2.0.1，支持幾乎所有的主流瀏覽器，包括Safari、Chrome，F(xiàn)irefox、IE7.0及以上，最新版本還支持智能手機(jī)WebUI。

2.0的新特性

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

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

功能集合

• Bootstrap2.0把現(xiàn)有框架進(jìn)行了清晰的功能劃分，主要分為框架（Scaffolding），基礎(chǔ)CSS，構(gòu)件庫和jQuery插件庫。

• Scaffolding主要提供基于網(wǎng)格的各種布局，包括普通網(wǎng)格系統(tǒng)、嵌入式網(wǎng)格，固定布局、自適應(yīng)布局，同時(shí)可以對(duì)網(wǎng)格和布局進(jìn)行自定義。

• Bootstrap2.0提供了響應(yīng)式設(shè)計(jì)，可以通過單個(gè)文件支持各種手持設(shè)備，自適應(yīng)不同的設(shè)備和屏幕變化。

• 基礎(chǔ)CSS包括各種排版樣式（標(biāo)題、段落、引用塊、列表、內(nèi)聯(lián)標(biāo)簽等），代碼展示方面提供了基于code標(biāo)簽的內(nèi)嵌代碼，基于pre的塊代碼和基于Google Prettify的代碼樣式。同時(shí)提供各種表格、表單、按鈕、圖標(biāo)的展示方式。

• 構(gòu)件庫提供了基于按鈕、導(dǎo)航、標(biāo)簽、排版、警告、進(jìn)度欄、圖像網(wǎng)格等控件。

• jQuery插件庫則提供了十幾種插件實(shí)現(xiàn)動(dòng)態(tài)效果，例如Modal、Dropdown、Tab、Tooltip、Popover、Carousel等，開發(fā)者可以根據(jù)自己的業(yè)務(wù)需求使用不同的插件實(shí)現(xiàn)各種動(dòng)態(tài)效果。

相關(guān)條目

• 社交網(wǎng)站
• Twitter
• Facebook
• Youtube
• Myspace

參考來源

• http://twitter.github.com/