2011年,twitter的“一小撮”工程師爲了提高他們內部的分析和管理能力,用業餘時間爲他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所設計和建立,在github上開源之後,迅速成爲該站上最多人watch&fork的項目。大量工程師踊躍爲該項目貢獻代碼,社區驚人地活躍,代碼版本進化非常快速,官方文檔質量極其高(可以說是優雅),同時涌現了許多基於Bootstrap建設的網站:界面清新、簡潔;要素排版利落大方。
GitHub上這樣介紹 bootstrap:簡單靈活可用於架構流行的用戶界面和交互接口的html,css,javascript工具集。基於html5、css3的bootstrap,具有大量的誘人特性:友好的學習曲線,卓越的兼容性,響應式設計,12列格網,樣式嚮導文檔,自定義JQuery插件,完整的類庫,基於Less等。本系列教程遵循官方文檔結構來介紹bootstrap,包括手腳架(Scaffolding),基礎CSS,組件,javascript插件,使用LESS與自定義.本文主要介紹Bootstrap的基礎佈局--Scaffolding.
Bootstrap建立了一個響應式的12列格網布局系統,它引入了fixed和fluid-with兩種佈局方式。我們從全局樣式(Global Style),格網系統(Grid System),流式格網(Fluid grid System),自定義(Customing),佈局(Layouts),響應式設計(Responsive Design)這六五個方面深入講解Boostrap的scaffolding.
- 全局樣式(Global Style).Bootstrap要求html5的文件類型,所以必須在每個使用bootstrap頁面的開頭都引用:
<!DOCTYPE html> <html lang="en"> ... </html>
- 格網系統(Grid System).默認的Bootstrap格網系統提供一個寬達940像素的,12列的格網。這意味着你頁面默認寬度是940px,最小的單元要素寬度是940/12px.Bootstrap能夠使得你的網頁可以更好地適應多種終端設備(平板電腦,智能手機等)。默認格網系統直觀概念如圖1-1所示: 圖1-1 默認格網系統(Default Grid System) 以下簡單的代碼則是實現圖1-1中,第三列的寬度爲4和寬度爲8的兩個div.
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
2.2 偏移列. 有時候,頁面要素前面需要一些空白,bootstrap提供了偏移列來實現,如圖1-2所示:
圖1-2 偏移列(Offset columns)
以下代碼實現了是實現圖1-2中,第一列的寬度爲4和偏移度爲4寬度爲4的兩個div.
<div class="row"> <div class="span4">...</div> <div class="span4 offset4">...</div> </div>
2.3 嵌套列. 嵌套列是容許用戶實現更復雜的頁面要素佈局。在bootstrap中實現嵌套列非常簡單,只需要在原有的div中加入.row 和相應的長度的span* div即可。 如圖1-3所示:
以下代碼實現了是實現圖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長度改爲其他值,看看效果。
- 流式格網系統(Fluid grid system).它使用%,而不是固定的px,來確定頁面要素的寬度.只需要簡單的將.row 改成.row-fluid ,就可以將fixed行改爲fluid.如圖1-4所示: 圖1-4 流式格網系統(Fluid grid system) 以下代碼實現了是實現圖1-4中,兩個不同長度的流式頁面要素.
<div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>
嵌套的流式格網和嵌套的固定格網,稍微有些不同。嵌套流式格網(Fluid nesting)的子要素不用匹配父要素的寬度,子要素用100%來表示佔滿父要素的頁面寬度。
- 自定義格網(Grid customization).Bootstrap允許通過修改variables.less的參數值來自定義格網系統。主要包括如表1-1所示的變量:
變量 默認值 說明 @gridColumns
12 列數 @gridColumnWidth
60px 每列的寬度 @gridGutterWidth
20px 列間距 表1-1 格網變量 我們通過修改以上值,並重新編譯Bootstrap來實現自定義格網系統。如果添加新的列,需要同時修改grid.less.同樣的,需要修改responsive.less來獲得多設備兼容.
- 佈局(Layout).本文最後我們討論創建頁面基礎模板的佈局。如前面所言,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 提供的模板。
最後,再次強調,官方文檔極其優秀,強烈推薦各位直接參考和學習之。http://twitter.github.com/bootstrap/index.html