<source id="zl0zm"></source>
  • <i id="zl0zm"></i>

    <wbr id="zl0zm"></wbr>
  • 腳手架

    Bootstrap建立在12列柵格系統、布局、組件之上。

    必須使用HTML5文檔類型

    Bootstrap使用的某些HTML元素和CSS屬性需要文檔類型為HTML5 doctype。因此這一文檔類型必須出現在項目的每個頁面的開始部分。

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

    排版和鏈接

    Bootstrap 為屏幕、排版和鏈接設置了基本的全局樣式。尤其是,我們:

    • 移除了body的 margin
    • 設置了 body 的背景顏色 background-color: white;
    • 使用 @baseFontFamily@baseFontSize@baseLineHeight 屬性作為我們排版的基礎
    • 通過 @linkColor 設置全局鏈接顏色,并且,當鏈接處于 :hover 狀態時才會帶有下劃線

    這些樣式可以在 scaffolding.less 文件中找到。

    用Normalize重置樣式

    從 Bootstrap 2 開始, 老的重置方式被 Normalize.css 取代, 這是 Nicolas GallagherJonathan Neal 共同維護的一個項目,這一項目還被 HTML5 Boilerplate 所采用。雖然我們在reset.less 文件中使用了許多Normalize的代碼,但是,我們也移除了一些不適合Bootstrap的元素。

    柵格系統示例

    Bootstrap默認的柵格系統為12列 ,形成一個940px寬的容器,默認沒有啟用 響應式布局特性 。如果加入響應式布局CSS文件,柵格系統會自動根據可視窗口的寬度從724px到1170px進行動態調整。在可視窗口低于767px寬的情況下,列將不再固定并且會在垂直方向堆疊。

    1
    1
    1
    1
    1
    1
    1
    1
    1
    2
    3
    4
    4
    5
    9

    帶有基本柵格的HTML代碼

    對于簡單的兩列式布局,創建一個 .row 容器,并在容器中加入合適數量的 .span* 列即可。由于默認是12列的柵格,所有 .span* 列所跨越的柵格數之和最多是12(或者等于其父容器的柵格數)。

    <div class="row">
      <div class="span4">...</div>
      <div class="span8">...</div>
    </div>
    

    上面的代碼展示了 .span4.span8 兩列,兩列的和總共是12個柵格。

    偏移列

    把列向右移動可使用 .offset* 類。每個類都給列的左邊距增加了指定單位的列。例如,.offset4.span4 右移了4個列的寬度。

    4
    3 offset 2
    3 offset 1
    3 offset 2
    6 offset 3
    <div class="row">
      <div class="span4">...</div>
      <div class="span3 offset2">...</div>
    </div>
    

    嵌套列

    在默認的柵格系統里, 在已有的.span*內添加一個新的 .row 并加入 .span* 列,就可實現嵌套。被嵌套列中的每列列數總和要等于父級列。

    Level 1 column
    Level 2
    Level 2
    <div class="row">
      <div class="span9">
        Level 1 column
        <div class="row">
          <div class="span6">Level 2</div>
          <div class="span3">Level 2</div>
        </div>
      </div>
    </div>
    

    流式柵格系統案例

    流式柵格系統對每一列的寬度使用百分比而不是像素數量。它和固定柵格系統一樣擁有響應式布局的能力,這就保證它能對不同的分辨率和設備做出適當的調整。

    1
    1
    1
    1
    1
    1
    1
    1
    1
    1
    1
    1
    4
    4
    4
    4
    8
    6
    6
    12

    基本的流式柵格HTML代碼片段

    .row 替換為 .row-fluid 就能讓任何一行“流動”起來。應用于每一列的類不用改變,這樣能方便的在流式與固定柵格之間切換。

    <div class="row-fluid">
      <div class="span4">...</div>
      <div class="span8">...</div>
    </div>
    

    流式柵格的偏移

    定義方式和固定網格系統相同:給任何想偏移的列添加 .offset* 即可。

    4
    4 offset 4
    3 offset 3
    3 offset 3
    6 offset 6
    <div class="row-fluid">
      <div class="span4">...</div>
      <div class="span4 offset2">...</div>
    </div>
    

    流式嵌套布局

    和固定柵格的嵌套有一點不同:被嵌套的列數之和要等于12。這是因為流式柵格使用百分比來設置每列的寬度。

    Fluid 12
    Fluid 6
    Fluid 6
    Fluid 6
    Fluid 6
    <div class="row-fluid">
      <div class="span12">
        Fluid 12
        <div class="row-fluid">
          <div class="span6">
            Fluid 6
            <div class="row-fluid">
              <div class="span6">Fluid 6</div>
              <div class="span6">Fluid 6</div>
            </div>
          </div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
    </div>
    

    固定布局

    提供了一個通用的固定寬度(也可以變為響應式)的布局方式,僅僅用 <div class="container"> 即可。

    <body>
      <div class="container">
        ...
      </div>
    </body>
    

    流式布局

    利用 <div class="container-fluid"> 代碼可以創建一個流式、兩列的頁面 — 非常適合于應用和文檔類頁面。

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span2">
          <!--Sidebar content-->
        </div>
        <div class="span10">
          <!--Body content-->
        </div>
      </div>
    </div>
    

    啟用響應式特性

    通過在文檔中的 <head> 標簽里添加合適的meta標簽并引入一個額外的樣式表即可啟用響應式CSS。如果你已經在定制頁面編譯好一個Bootstrap, 那么只需添加一個meta標簽。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    

    注意! Bootstrap在默認情況下是沒有引入響應式特性的,因為不是任何情況都需要使用到。我們并不是鼓勵開發者移除此功能, 而是在需要使用的時候才啟用它。

    關于響應式Bootstrap

    Responsive devices

    Media queries允許在一些條件基礎上自定義CSS 例如:—ratios、widths、display type, etc— 但通常都是圍繞著 min-widthmax-width 這兩者。

    • 修改柵格系統中列的寬度
    • 需要的時候, 用堆疊元素代替浮動
    • 調整標題和文本的大小以便適合各種設備

    謹慎的使用media queries,先從你的手機用戶開始吧。對于大型的項目, 應該考慮使用專門的代碼庫, 而不是構筑在media queries之上。

    被支持的設備

    Bootstrap 所支持的幾個media queries都放在了一個文件中, 可以讓你的項目更靈活的去適應不同設備和屏幕分辨率。包括:

    類型 布局寬度 列寬 間隙寬度
    大屏幕 大于等于1200px 70px 30px
    默認 大于等于980px 60px 20px
    平板 大于等于768px 42px 20px
    手機到平板 小于等于767px 流式列,無固定寬度
    手機 小于等于480px 流式列,無固定寬度
    /* 大屏幕 */
    @media (min-width: 1200px) { ... }
    
    /* 平板電腦和小屏電腦之間的分辨率 */
    @media (min-width: 768px) and (max-width: 979px) { ... }
    
    /* 橫向放置的手機和豎向放置的平板之間的分辨率 */
    @media (max-width: 767px) { ... }
    
    /* 橫向放置的手機及分辨率更小的設備 */
    @media (max-width: 480px) { ... }
    

    響應式布局輔助class

    為了更快的針對移動設備做開發, 下面列出的輔助class用于針對不同設備顯示和隱藏內容。下表是可用的class列表, 以及它們在各個media query布局下的效果。這些class可以在 responsive.less 文件中找到。

    Class 手機 767px 及以下 平板 979px 到 768px 電腦 默認
    .visible-phone 顯示
    .visible-tablet 顯示
    .visible-desktop 顯示
    .hidden-phone 顯示 顯示
    .hidden-tablet 顯示 顯示
    .hidden-desktop 顯示 顯示

    何時使用

    在有限的情況下使用, 避免創建同一個站點的不同版本。當這些class能對每種設備的展示做有益的補充的時候才使用。響應式工具不能用于table元素,而且本就不支持。

    響應式工具測試案例

    調整瀏覽器的寬度或者在不同的設備上加載該頁面用以測試上述的class。

    在...上顯示

    綠色選中標記用以指示這些class在你當前的可視窗口是可見的。

    • 手機✔ 手機
    • 平板✔ 平板
    • 電腦✔ 電腦

    在...上隱藏

    這里的綠色選中標記用以指示這些class在你當前的可視窗口是隱藏的。

    • 手機✔ 手機
    • 平板✔ 平板
    • 電腦✔ 電腦
    主播福利