腳手架

Bootstrap 建立在響應式 12 列網格之上。我們還包括基於該系統的固定寬度和流體寬度佈局。

需要 HTML5 文檔類型

Bootstrap 使用需要使用 HTML5 文檔類型的 HTML 元素和 CSS 屬性。確保將它包含在項目中每個 Bootstrapped 頁面的開頭。

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

排版和鏈接

在scaffolding.less文件中，我們設置了基本的全局顯示、排版和鏈接樣式。具體來說，我們：

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

通過標準化重置

從 Bootstrap 2 開始，傳統的 CSS 重置已經演變為使用 Normalize.css 中的元素，Normalize.css是 Nicolas Gallagher的一個項目，它也為HTML5 Boilerplate 提供支持。

新的重置仍然可以在reset.less中找到，但為了簡潔和準確，刪除了許多元素。

Bootstrap 中提供的默認網格系統使用12 列，以 724 像素、940 像素（默認不包括響應式 CSS）和 1170 像素的寬度呈現。在 767px 視口以下，列變得流暢並垂直堆疊。

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

如此處所示，可以使用兩個“列”創建基本佈局，每個“列”跨越我們定義為網格系統一部分的 12 個基本列中的一些。

偏移列

4 偏移 4

3 偏移 3

8 偏移 4

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

嵌套列

使用 Bootstrap 中的靜態（非流體）網格系統，嵌套很容易。要嵌套您的內容，只需在現有列中添加一.row組新列。.span*.span*

例子

嵌套行應包含一組列，這些列的總和與其父級的列數相同。例如，兩個嵌套.span3列應該放在一個.span6.

列的第 1 層

2級

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

流體柱

百分比，而不是像素

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

流體行

只需更改.row為即可使任何行變得流暢.row-fluid。列保持完全相同，使得在固定佈局和流動佈局之間切換變得非常簡單。

標記

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

流體嵌套

使用流體網格嵌套有點不同：嵌套列的數量不需要與父級匹配。相反，您的列會在每個級別重置，因為每一行佔用父列的 100%。

流體 12

流體 6

<div類= “行流體” > 
  <div類= "span12" > 
    列的第 1 層
    <div類= “行流體” > 
      <div class = "span6" >級別 2 </div> 
      <div class = "span6" >級別 2 </div> 
    </div>
  </div>
</div>

多變的	默認值	描述
`@gridColumns`	12	列數
`@gridColumnWidth`	60像素	每列的寬度
`@gridGutterWidth`	20像素	列之間的負空間

LESS 中的變量

Bootstrap 內置了一些用於自定義默認 940 像素網格系統的變量，如上所示。網格的所有變量都存儲在 variables.less 中。

如何定制

修改網格意味著改變三個@grid*變量並重新編譯Bootstrap。更改 variables.less 中的網格變量並使用記錄的四種方法之一重新編譯。如果要添加更多列，請務必在 grid.less 中添加 CSS。

保持響應

網格的自定義僅適用於默認級別，即 940 像素網格。要維護 Bootstrap 的響應方面，您還必須在 responsive.less 中自定義網格。

固定佈局

默認且簡單的 940 像素寬、居中佈局，適用於單個<div class="container">.

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

流體佈局

<div class="container-fluid">提供靈活的頁面結構、最小和最大寬度以及左側邊欄。它非常適合應用程序和文檔。

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

響應式設備

他們做什麼

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

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

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

支持的設備

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

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

需要元標記

為確保設備正確顯示響應頁面，請包含視口元標記。

<元名稱= “視口”內容= “寬度=設備寬度，初始比例=1.0” >

使用媒體查詢

Bootstrap 不會自動包含這些媒體查詢，但理解和添加它們非常容易，並且需要最少的設置。您有幾個選項可以包含 Bootstrap 的響應式功能：

使用編譯好的響應式版本，bootstrap-responsive.css
添加 @import "responsive.less" 並重新編譯 Bootstrap
將 responsive.less 修改並重新編譯為單獨的文件

為什麼不直接包括它？說實話，並非所有事情都需要響應。我們認為最好啟用它，而不是鼓勵開發人員刪除此功能。

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

響應式實用程序類

這些是什麼

為了更快地進行移動友好開發，請使用這些基本實用程序類按設備顯示和隱藏內容。

何時使用

在有限的基礎上使用並避免創建同一站點的完全不同版本。相反，使用它們來補充每個設備的演示文稿。

例如，您可能會<select>在移動佈局上顯示導航元素，但不會在平板電腦或台式機上顯示。

支持課程

此處顯示的是我們支持的類及其對給定媒體查詢佈局（按設備標記）的影響的表格。它們可以在responsive.less.

班級	電話480px及以下	平板電腦767px 及以下	台式機768px及以上
`.visible-phone`	可見的	隱	隱
`.visible-tablet`	隱	可見的	隱
`.visible-desktop`	隱	隱	可見的
`.hidden-phone`	隱	可見的	可見的
`.hidden-tablet`	可見的	隱	可見的
`.hidden-desktop`	可見的	可見的	隱

測試用例

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

可見於...

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

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

隱藏在...

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

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

腳手架

CSS 重置、排版和鏈接的全局樣式