• <th id="stlci"><track id="stlci"></track></th>
    1. <dd id="stlci"><track id="stlci"></track></dd>
        <th id="stlci"><track id="stlci"><video id="stlci"></video></track></th>
      1. <tbody id="stlci"></tbody>

        腳手架

        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在你當前的可視窗口是隱藏的。

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