BootStrap入門教程 (一)

     2011年，twitter的“一小撮”工程師為了提高他們內部的分析和管理能力，用業余時間為他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所設計和建立，在github上開源之后，迅速成為該站上最多人watch&fork的項目。大量工程師踴躍為該項目貢獻代碼，社區驚人地活躍，代碼版本進化非常快速，官方文檔質量極其高(可以說是優雅)，同時涌現了許多基於Bootstrap建設的網站：界面清新、簡潔;要素排版利落大方。如下圖所示：

                                                                           https://kippt.com/

                                                                              http://www.fleetio.com/

     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.

1.  全局樣式(Global Style).Bootstrap要求html5的文件類型，所以必須在每個使用bootstrap頁面的開頭都引用:

   <!DOCTYPE html>
   <html lang="en">
     ...
   </html>

   同時，它通過Bootstrap.less文件來設置全局的排版和連接顯示風格.其中去掉了Body的margin，使用@baseFontFamily,@baseFontSize,@linkColor等變量來控制基本排版。
2.  格網系統(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-２ 偏移列(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     嵌套列(Nesting columns) 

   以下代碼實現了是實現圖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長度改為其他值，看看效果。

3. 流式格網系統(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%來表示占滿父要素的頁面寬度。

4. 自定義格網(Grid customization).Bootstrap允許通過修改variables.less的參數值來自定義格網系統。主要包括如表1-1所示的變量：
   

   變量	默認值	說明
   @gridColumns	12	列數
   @gridColumnWidth	60px	每列的寬度
   @gridGutterWidth	20px	列間距

                                                                                                   表1-1 格網變量                                                                                                                                                                                                                                               我們通過修改以上值，並重新編譯Bootstrap來實現自定義格網系統。如果添加新的列，需要同時修改grid.less.同樣的,需要修改responsive.less來獲得多設備兼容.

5. 布局(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/

   7.前后端結合討論  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/

    

本作品由VentLam創作，采用知識共享署名-非商業性使用-相同方式共享 2.5 中國大陸許可協議進行許可。