2011年，twitter的“一小撮”工程師為了提高他們內(nèi)部的分析和管理能力，用業(yè)余時間為他們的產(chǎn)品構(gòu)建了一套易用、優(yōu)雅、靈活、可擴展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所設(shè)計和建立，在github上開源之后，迅速成為該站上最多人watch&fork的項目。大量工程師踴躍為該項目貢獻代碼，社區(qū)驚人地活躍，代碼版本進化非常快速，官方文檔質(zhì)量極其高(可以說是優(yōu)雅)，同時涌現(xiàn)了許多基于Bootstrap建設(shè)的網(wǎng)站：界面清新、簡潔;要素排版利落大方。如下圖所示：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?https://kippt.com/
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??http://www.fleetio.com/
? ? ?GitHub上這樣介紹 bootstrap：簡單靈活可用于架構(gòu)流行的用戶界面和交互接口的html,css,javascript工具集。基于html5、css3的bootstrap，具有大量的誘人特性：友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計，12列格網(wǎng)，樣式向?qū)臋n，自定義JQuery插件，完整的類庫，基于Less等。本系列教程遵循官方文檔結(jié)構(gòu)來介紹bootstrap，包括手腳架（Scaffolding),基礎(chǔ)CSS,組件,javascript插件，使用LESS與自定義.本文主要介紹Bootstrap的基礎(chǔ)布局--Scaffolding.
? ? ? Bootstrap建立了一個響應(yīng)式的12列格網(wǎng)布局系統(tǒng)，它引入了fixed和fluid-with兩種布局方式。我們從全局樣式(Global Style),格網(wǎng)系統(tǒng)(Grid System),流式格網(wǎng)(Fluid grid System),自定義(Customing),布局(Layouts),
響應(yīng)式設(shè)計(Responsive ?Design)這
六五個方面深入講解Boostrap的scaffolding.
- ?全局樣式(Global Style).Bootstrap要求html5的文件類型，所以必須在每個使用bootstrap頁面的開頭都引用:
<!DOCTYPE html><html lang="en">
...
</html>
- ?格網(wǎng)系統(tǒng)(Grid System).默認(rèn)的Bootstrap格網(wǎng)系統(tǒng)提供一個寬達(dá)940像素的,12列的格網(wǎng)。這意味著你頁面默認(rèn)寬度是940px,最小的單元要素寬度是940/12px.Bootstrap能夠使得你的網(wǎng)頁可以更好地適應(yīng)多種終端設(shè)備(平板電腦，智能手機等)。默認(rèn)格網(wǎng)系統(tǒng)直觀概念如圖1-1所示：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖1-1 默認(rèn)格網(wǎng)系統(tǒng)(Default Grid System) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 以下簡單的代碼則是實現(xiàn)圖1-1中，第三列的寬度為4和寬度為8的兩個div.<div class="row"><div class="span4">...</div><div class="span8">...</div></div>
2.2? 偏移列. 有時候，頁面要素前面需要一些空白，bootstrap提供了偏移列來實現(xiàn)，如圖1-2所示：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖1-２ 偏移列(Offset columns)
以下代碼實現(xiàn)了是實現(xiàn)圖1-2中，第一列的寬度為4和偏移度為4寬度為4的兩個div.
<div class="row"><div class="span4">...</div><div class="span4 offset4">...</div></div>
2.3?嵌套列. 嵌套列是容許用戶實現(xiàn)更復(fù)雜的頁面要素布局。在bootstrap中實現(xiàn)嵌套列非常簡單，只需要在原有的div中加入.row?和相應(yīng)的長度的span*?div即可。 ? ? ? 如圖1-3所示：
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖1-3 ? ??嵌套列(Nesting columns)?
以下代碼實現(xiàn)了是實現(xiàn)圖1-3中，第一層的寬度為12和第二層兩個寬度為6的兩個div.
<div class="row"><div class="span12">
Level 1 of column
<div class="row"><div class="span6">Level 2</div><div class="span6">Level 2</div></div></div></div>嵌套的div長度之和不能大于它的父div，否則會溢出疊加。各位可以試試將第一層的div長度改為其他值，看看效果。
- 流式格網(wǎng)系統(tǒng)(Fluid grid system).它使用%，而不是固定的px,來確定頁面要素的寬度.只需要簡單的將.row?改成.row-fluid?，就可以將fixed行改為fluid.如圖1-4所示： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖1-4 流式格網(wǎng)系統(tǒng)(Fluid grid system) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?以下代碼實現(xiàn)了是實現(xiàn)圖1-4中，兩個不同長度的流式頁面要素.<div class="row-fluid"><div class="span4">...</div><div class="span8">...</div></div>
嵌套的流式格網(wǎng)和嵌套的固定格網(wǎng)，稍微有些不同。嵌套流式格網(wǎng)(Fluid nesting)的子要素不用匹配父要素的寬度，子要素用100%來表示占滿父要素的頁面寬度。
- 自定義格網(wǎng)(Grid customization).Bootstrap允許通過修改variables.less的參數(shù)值來自定義格網(wǎng)系統(tǒng)。主要包括如表1-1所示的變量：
| 變量 | 默認(rèn)值 | 說明 |
|---|
@gridColumns | 12 | 列數(shù) |
@gridColumnWidth | 60px | 每列的寬度 |
@gridGutterWidth | 20px | 列間距 |
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 表1-1 格網(wǎng)變量 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 我們通過修改以上值，并重新編譯Bootstrap來實現(xiàn)自定義格網(wǎng)系統(tǒng)。如果添加新的列，需要同時修改grid.less.同樣的,需要修改responsive.less來獲得多設(shè)備兼容.
- 布局(Layout).本文最后我們討論創(chuàng)建頁面基礎(chǔ)模板的布局。如前面所言，Bootstrap提供兩種布局方式，包括固定(Fixed)和流式(Fliud)布局。如圖1-5所示，左邊為Fixed布局，右邊為Fluid布局： ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖1-5 布局(Layout) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 固定布局代碼如下：<body><div class="container">
...
</div></body>流式布局代碼如下：
<div class="container-fluid"><div class="row-fluid"><div class="span2"><!--Sidebar content--></div><div class="span10"><!--Body content--></div></div></div>
如果對Bootstrap提供的布局不夠滿意，可以參見Less Frame Work 提供的模板。
最后，再次強調(diào)，官方文檔極其優(yōu)秀，強烈推薦各位直接參考和學(xué)習(xí)之。http://twitter.github.com/bootstrap/index.html
參考文獻與延伸閱讀：
1.Bootstrap的來由和發(fā)展。http://www.alistapart.com/articles/building-twitter-bootstrap/
2.Less與Sass的介紹與對比.http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
3.Html5模板?http://html5boilerplate.com/
4.Html5與Bootstrap混合項目(H5BP)https://gist.github.com/1422879
5.20個有用的Bootstrap資源?http://www.webresourcesdepot.com/20-beautiful-resources-that-complement-twitter-bootstrap/
6.Bootstrap按鈕生成器?http://charliepark.org/bootstrap_buttons/
7.前后端結(jié)合討論 ?http://stackoverflow.com/questions/9525170/backend-technology-for-front-end-technologies-like-twitter-bootstrap
8. Bootstrap英文教程 ?http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/