腳手架

必須使用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 Gallagher 和Jonathan Neal 共同維護的一個項目，這一項目還被 HTML5 Boilerplate 所采用。雖然我們在reset.less 文件中使用了許多Normalize的代碼，但是，我們也移除了一些不適合Bootstrap的元素。

柵格系統示例

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

帶有基本柵格的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個列的寬度。

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

<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>

流式柵格系統案例

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

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

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

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

流式柵格的偏移

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

4 offset 4

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

<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

Media queries允許在一些條件基礎上自定義CSS 例如：—ratios、widths、display type, etc— 但通常都是圍繞著 min-width 和 max-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在你當前的可視窗口是隱藏的。

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

全局設置