腳手架

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

需要 HTML5 文檔類型

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

  1. <!DOCTYPE html>
  2. <html lang = "en" >
  3. ...
  4. </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中找到,但為了簡潔和準確,刪除了許多元素。

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

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

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


偏移列

4
4 偏移 4
3 偏移 3
3 偏移 3
8 偏移 4
  1. <div= “行” >
  2. <div class = "span4" > ... </div>
  3. <div class = "span4 offset4" > ... </div>
  4. </div>

嵌套列

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

例子

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

列的第 1 層
2級
2級
  1. <div= “行” >
  2. <div= "span6" >
  3. 1 級列
  4. <div= “行” >
  5. <div class = "span3" >級別 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

百分比,而不是像素

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

流體行

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

標記

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

流體嵌套

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

流體 12
流體 6
流體 6
  1. <div= “行流體” >
  2. <div= "span12" >
  3. 列的第 1 層
  4. <div= “行流體” >
  5. <div class = "span6" >級別 2 </div>
  6. <div class = "span6" >級別 2 </div>
  7. </div>
  8. </div>
  9. </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">.

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

流體佈局

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

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

響應式設備

他們做什麼

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

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

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

支持的設備

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

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

需要元標記

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

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

使用媒體查詢

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

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

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

  1. /* 橫向手機和向下 */
  2. @media 最大寬度480px { ... } _
  3.  
  4. /* 橫向手機到縱向平板 */
  5. @media 最大寬度767px { ... } _
  6.  
  7. /* 縱向平板到橫向和桌面 */
  8. @media 最小寬度768px 最大寬度979px { ... } _ _
  9.  
  10. /* 大桌面 */
  11. @media (最小-寬度: 1200px ) { ... }

響應式實用程序類

這些是什麼

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

何時使用

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

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

支持課程

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

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

測試用例

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

可見於...

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

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

隱藏在...

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

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