BootStrap入門教程 (一)

  2011年,twitter的“一小撮”工程師爲了提高他們內部的分析和管理能力,用業餘時間爲他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。Bootstrap由MARK OTTOJacob 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.

  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-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     嵌套列(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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章