腳手架

需要 HTML5 文檔類型

Bootstrap 使用需要使用 HTML5 文檔類型的某些 HTML 元素和 CSS 屬性。將它包含在所有項目的開頭。

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

排版和鏈接

Bootstrap 設置基本的全局顯示、排版和鏈接樣式。具體來說，我們：

去除margin身體
設置background-color: white;在body
使用@baseFontFamily、@baseFontSize和@baseLineHeight屬性作為我們的排版基礎
通過設置全局鏈接顏色@linkColor並僅在上應用鏈接下劃線:hover

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

通過標準化重置

在 Bootstrap 2 中，舊的重置塊已被刪除，取而代之的是Normalize.css ，這是 Nicolas Gallagher和Jonathan Neal的一個項目，它也為HTML5 Boilerplate 提供支持。雖然我們在reset.less中使用了很多 Normalize ，但我們已經刪除了一些專門用於 Bootstrap 的元素。

實時網格示例

默認的 Bootstrap 網格系統使用12 列，從而形成一個 940 像素寬的容器，而沒有啟用響應功能。添加響應式 CSS 文件後，網格會根據您的視口調整為 724 像素和 1170 像素寬。在 767px 視口以下，列變得流暢並垂直堆疊。

基本網格 HTML

對於簡單的兩列佈局，創建一個.row並添加適當數量的.span*列。由於這是一個 12 列的網格，每個網格.span*跨越這 12 列中的許多列，並且每行（或父項中的列數）應始終加起來為 12。

<div類= “行” > 
  <div類= "span4" > ... </div> 
  <div類= "span8" > ... </div> 
</div>

給定這個例子，我們有.span4和.span8，總共有 12 列和一個完整的行。

偏移列

使用類將列向右移動.offset*。每個類將一列的左邊距增加一整列。例如，.offset4移動.span4四列。

3 偏移 2

3 偏移 1

3 偏移 2

6 偏移 3

<div類= “行” > 
  <div類= "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

嵌套列

要使用默認網格嵌套您的內容，請在現有列中添加一.row組新列。嵌套行應包含一組列，這些列的總和與其父級的列數相同。.span*.span*

1 級列

2級

<div類= “行” > 
  <div類= "span9" > 
    1 級列
    <div類= “行” > 
      <div class = "span6" >級別 2 </div> 
      <div class = "span3" >級別 2 </div> 
    </div>
  </div>
</div>

實時流體網格示例

流體網格系統使用百分比而不是像素來表示列寬。它具有與我們的固定網格系統相同的響應能力，確保關鍵屏幕分辨率和設備的適當比例。

基本流體網格 HTML

通過更改.row為使任何行“流動” .row-fluid。列類保持完全相同，便於在固定網格和流動網格之間切換。

<div類= “行流體” > 
  <div類= "span4" > ... </div> 
  <div類= "span8" > ... </div> 
</div>

流體補償

與固定網格系統偏移的操作方式相同：添加.offset*到任何列以偏移那麼多列。

4 偏移 4

3 偏移 3

6 偏移 6

<div類= “行流體” > 
  <div類= "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

流體嵌套

流體網格以不同的方式使用嵌套：每個嵌套級別的列最多應添加 12 列。這是因為流體網格使用百分比而不是像素來設置寬度。

流體 12

流體 6

<div類= “行流體” > 
  <div類= "span12" > 
    流體 12
    <div類= “行流體” > 
      <div類= "span6" > 
        流體 6
        <div類= “行流體” > 
          <div class = "span6" >流體 6 </div> 
          <div class = "span6" >流體 6 </div> 
        </div>
      </div>
      <div class = "span6" >流體 6 </div> 
    </div>
  </div>
</div>

固定佈局

提供一個通用的固定寬度（和可選的響應式）佈局，僅<div class="container">需要。

<正文>
  <div類= “容器” > 
    ...
  </div>
</正文>

流體佈局

<div class="container-fluid">使用 —非常適合應用程序和文檔創建一個流暢的兩列頁面。

<div類= “容器流體” > 
  <div類= “行流體” > 
    <div類= "span2" > 
      <!--側邊欄內容-->
    </div>
    <div類= "span10" > 
      <!--正文內容-->
    </div>
  </div>
</div>

啟用響應式功能

通過在文檔中包含正確的元標記和附加樣式表，在您的項目中啟用響應式 CSS <head>。如果您已從自定義頁面編譯 Bootstrap，則只需包含元標記。

<元名稱= “視口”內容= “寬度=設備寬度，初始比例=1.0” >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

小心！默認情況下，Bootstrap 不包含響應式功能，因為並非所有內容都需要響應式。我們認為最好根據需要啟用它，而不是鼓勵開發人員刪除此功能。

關於響應式 Bootstrap

媒體查詢允許基於許多條件（比率、寬度、顯示類型等）自定義 CSS，但通常集中在min-width和max-width.

修改我們網格中列的寬度
在必要時堆疊元素而不是浮動
調整標題和文本的大小以更適合設備

負責任地使用媒體查詢，並且僅作為移動受眾的開始。對於較大的項目，請考慮專用代碼庫而不是媒體查詢層。

支持的設備

Bootstrap 在單個文件中支持少數媒體查詢，以幫助您的項目更適合不同的設備和屏幕分辨率。以下是包含的內容：

標籤	版面寬度	列寬	天溝寬度
大顯示屏	1200 像素及以上	70像素	30像素
默認	980 像素及以上	60像素	20像素
肖像平板電腦	768px及以上	42像素	20像素
手機到平板電腦	767px 及以下	流體列，無固定寬度
電話	480px及以下	流體列，無固定寬度

/* 大桌面 */
@media (最小-寬度: 1200px ) { ... }     
 
/* 縱向平板到橫向和桌面 */
@media （最小寬度：768px ）和（最大寬度：979px ）{ ... } _ _        
 
/* 橫向手機到縱向平板 */
@media （最大寬度：767px ）{ ... } _     
 
/* 橫向手機和向下 */
@media （最大寬度：480px ）{ ... } _

響應式實用程序類

為了更快地進行移動友好型開發，請使用這些實用程序類按設備顯示和隱藏內容。下面是可用類及其對給定媒體查詢佈局（按設備標記）的影響的表格。它們可以在responsive.less.

班級	電話767px 及以下	平板電腦979 像素到 768 像素	台式機默認
`.visible-phone`	可見的	隱	隱
`.visible-tablet`	隱	可見的	隱
`.visible-desktop`	隱	隱	可見的
`.hidden-phone`	隱	可見的	可見的
`.hidden-tablet`	可見的	隱	可見的
`.hidden-desktop`	可見的	可見的	隱

何時使用

在有限的基礎上使用並避免創建同一站點的完全不同版本。相反，使用它們來補充每個設備的演示文稿。響應式實用程序不應與表一起使用，因此不受支持。

響應式實用程序測試用例

調整瀏覽器大小或在不同設備上加載以測試上述類。

可見於...

綠色複選標記表示該類在當前視口中可見。

電話✔ 電話
藥片✔ 平板電腦
桌面✔ 桌面

隱藏在...

在這裡，綠色複選標記表示該類隱藏在您當前的視口中。

電話✔ 電話
藥片✔ 平板電腦
桌面✔ 桌面

全局設置