(轉帖)BootStrap入門教程 (一)
2011年，twitter的「一小撮」工程師爲了提升他們內部的分析和管理能力，用業餘時間爲他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所設計和創建，在github上開源以後，迅速成爲該站上最多人watch&fork的項目。大量工程師踊躍爲該項目貢獻代碼，社區驚人地活躍，代碼版本進化很是快速，官方文檔質量極其高(能夠說是優雅)，同時涌現了許多基於Bootstrap建設的網站：界面清新、簡潔;要素排版利落大方。以下圖所示：javascript
GitHub上這樣介紹 bootstrap：簡單靈活可用於架構流行的用戶界面和交互接口的html,css,javascript工具集。基於html五、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.html5
- 全局樣式(Global Style).Bootstrap要求html5的文件類型，因此必須在每一個使用bootstrap頁面的開頭都引用:
同時，它經過Bootstrap.less文件來設置全局的排版和鏈接顯示風格.其中去掉了Body的margin，使用@baseFontFamily,@baseFontSize,@linkColor等變量來控制基本排版。
<!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所示：java
圖1-２ 偏移列(Offset columns)css3
如下代碼實現了是實現圖1-2中，第一列的寬度爲4和偏移度爲4寬度爲4的兩個div.git
<div class="row"> <div class="span4">...</div> <div class="span4 offset4">...</div> </div>2.3 嵌套列. 嵌套列是允許用戶實現更復雜的頁面要素佈局。在bootstrap中實現嵌套列很是簡單，只須要在原有的div中加入.row 和相應的長度的span* div便可。 如圖1-3所示：github
圖1-3 嵌套列(Nesting columns)web如下代碼實現了是實現圖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所示的變量：
變量 默認值 說明 @gridColumns12 列數 @gridColumnWidth60px 每列的寬度 @gridGutterWidth20px 列間距 表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
參考文獻與延伸閱讀：
1.Bootstrap的來由和發展。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/
8. Bootstrap英文教程 http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/
- 1. (轉帖)BootStrap入門教程 (二)
- 2. BootStrap入門教程 (一)
- 3. bootstrap入門教程
- 4. BootStrap入門教程 (四)
- 5. BootStrap入門教程 (三)
- 6. 【2020版】Bootstrap入門教程
- 7. bootstrap之入門教程
- 8. BootStrap入門教程 (二)
- 9. BootStrap入門教程pdf
- 10. (轉)cordova入門教程（一）
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Neo4j數據庫入門教程 - NoSQL教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。