腳手架

Bootstrap 建立在響應式 12 列網格、佈局和組件之上。

需要 HTML5 文檔類型

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

  1. <!DOCTYPE html>
  2. <html lang = "en" >
  3. ...
  4. </html>

排版和鏈接

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

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

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

通過標準化重置

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

實時網格示例

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

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

基本網格 HTML

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

  1. <div= “行” >
  2. <div= "span4" > ... </div>
  3. <div= "span8" > ... </div>
  4. </div>

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

偏移列

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

4
3 偏移 2
3 偏移 1
3 偏移 2
6 偏移 3
  1. <div= “行” >
  2. <div= "span4" > ... </div>
  3. <div class = "span3 offset2" > ... </div>
  4. </div>

嵌套列

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

1 級列
2級
2級
  1. <div= “行” >
  2. <div= "span9" >
  3. 1 級列
  4. <div= “行” >
  5. <div class = "span6" >級別 2 </div>
  6. <div class = "span3" >級別 2 </div>
  7. </div>
  8. </div>
  9. </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。列類保持完全相同,便於在固定網格和流動網格之間切換。

  1. <div= “行流體” >
  2. <div= "span4" > ... </div>
  3. <div= "span8" > ... </div>
  4. </div>

流體補償

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

4
4 偏移 4
3 偏移 3
3 偏移 3
6 偏移 6
  1. <div= “行流體” >
  2. <div= "span4" > ... </div>
  3. <div class = "span4 offset2" > ... </div>
  4. </div>

流體嵌套

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

流體 12
流體 6
流體 6
流體 6
流體 6
  1. <div= “行流體” >
  2. <div= "span12" >
  3. 流體 12
  4. <div= “行流體” >
  5. <div= "span6" >
  6. 流體 6
  7. <div= “行流體” >
  8. <div class = "span6" >流體 6 </div>
  9. <div class = "span6" >流體 6 </div>
  10. </div>
  11. </div>
  12. <div class = "span6" >流體 6 </div>
  13. </div>
  14. </div>
  15. </div>

固定佈局

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

  1. <正文>
  2. <div= “容器” >
  3. ...
  4. </div>
  5. </正文>

流體佈局

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

  1. <div= “容器流體” >
  2. <div= “行流體” >
  3. <div= "span2" >
  4. <!--側邊欄內容-->
  5. </div>
  6. <div= "span10" >
  7. <!--正文內容-->
  8. </div>
  9. </div>
  10. </div>

啟用響應式功能

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

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

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

關於響應式 Bootstrap

響應式設備

媒體查詢允許基於許多條件(比率、寬度、顯示類型等)自定義 CSS,但通常集中在min-widthmax-width.

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

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

支持的設備

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

標籤 版面寬度 列寬 天溝寬度
大顯示屏 1200 像素及以上 70像素 30像素
默認 980 像素及以上 60像素 20像素
肖像平板電腦 768px及以上 42像素 20像素
手機到平板電腦 767px 及以下 流體列,無固定寬度
電話 480px及以下 流體列,無固定寬度
  1. /* 大桌面 */
  2. @media (最小-寬度: 1200px ) { ... }
  3.  
  4. /* 縱向平板到橫向和桌面 */
  5. @media 最小寬度768px 最大寬度979px { ... } _ _
  6.  
  7. /* 橫向手機到縱向平板 */
  8. @media 最大寬度767px { ... } _
  9.  
  10. /* 橫向手機和向下 */
  11. @media 最大寬度480px { ... } _

響應式實用程序類

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

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

何時使用

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

響應式實用程序測試用例

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

可見於...

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

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

隱藏在...

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

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