概覽

深入了解 Bootstrap 底層結構的關鍵部分,包括我們讓 web 開發變得更好、更快、更強壯的最佳實踐。

HTML5 文檔類型

Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設置為 HTML5 文檔類型。在你項目中的每個頁面都要參照下面的格式進行設置。

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

移動設備優先

在 Bootstrap 2 中,我們對框架中的某些關鍵部分增加了對移動設備友好的樣式。而在 Bootstrap 3 中,我們重寫了整個框架,使其一開始就是對移動設備友好的。這次不是簡單的增加一些可選的針對移動設備的樣式,而是直接融合進了框架的內核中。也就是說,Bootstrap 是移動設備優先的。針對移動設備的樣式融合進了框架的每個角落,而不是增加一個額外的文件。

為了確保適當的繪制和觸屏縮放,需要在 <head> 之中添加 viewport 元數據標簽

<meta name="viewport" content="width=device-width, initial-scale=1">

在移動設備瀏覽器上,通過為視口(viewport)設置 meta 屬性為 user-scalable=no 可以禁用其縮放(zooming)功能。這樣禁用縮放功能后,用戶只能滾動屏幕,就能讓你的網站看上去更像原生應用的感覺。注意,這種方式我們并不推薦所有網站使用,還是要看你自己的情況而定!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Bootstrap 排版、鏈接樣式設置了基本的全局樣式。分別是:

  • body 元素設置 background-color: #fff;
  • 使用 @font-family-base@font-size-base@line-height-base 變量作為排版的基本參數
  • 為所有鏈接設置了基本顏色 @link-color ,并且當鏈接處于 :hover 狀態時才添加下劃線

這些樣式都能在 scaffolding.less 文件中找到對應的源碼。

Normalize.css

為了增強跨瀏覽器表現的一致性,我們使用了 Normalize.css,這是由 Nicolas GallagherJonathan Neal 維護的一個CSS 重置樣式庫。

布局容器

Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。注意,由于 padding 等屬性的原因,這兩種 容器類不能互相嵌套。

.container 類用于固定寬度并支持響應式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 類用于 100% 寬度,占據全部視口(viewport)的容器。

<div class="container-fluid">
  ...
</div>

柵格系統

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨著屏幕或視口(viewport)尺寸的增加,系統會自動分為最多12列。它包含了易于使用的預定義類,還有強大的mixin 用于生成更具語義的布局

簡介

柵格系統用于通過一系列的行(row)與列(column)的組合來創建頁面布局,你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理:

  • “行(row)”必須包含在 .container (固定寬度)或 .container-fluid (100% 寬度)中,以便為其賦予合適的排列(aligment)和內補(padding)。
  • 通過“行(row)”在水平方向創建一組“列(column)”。
  • 你的內容應當放置于“列(column)”內,并且,只有“列(column)”可以作為行(row)”的直接子元素。
  • 類似 .row.col-xs-4 這種預定義的類,可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。
  • 通過為“列(column)”設置 padding 屬性,從而創建列與列之間的間隔(gutter)。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding,也就間接為“行(row)”所包含的“列(column)”抵消掉了padding
  • 負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。
  • 柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如,三個等寬的列可以使用三個 .col-xs-4 來創建。
  • 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素將被作為一個整體另起一行排列。
  • 柵格類適用于與屏幕寬度大于或等于分界點大小的設備 , 并且針對小屏幕設備覆蓋柵格類。 因此,在元素上應用任何 .col-md-* 柵格類適用于與屏幕寬度大于或等于分界點大小的設備 , 并且針對小屏幕設備覆蓋柵格類。 因此,在元素上應用任何 .col-lg-* 不存在, 也影響大屏幕設備。

通過研究后面的實例,可以將這些原理應用到你的代碼中。

媒體查詢

在柵格系統中,我們在 Less 文件中使用以下媒體查詢(media query)來創建關鍵的分界點閾值。

/* 超小屏幕(手機,小于 768px) */
/* 沒有任何媒體查詢相關的代碼,因為這在 Bootstrap 中是默認的(還記得 Bootstrap 是移動設備優先的嗎?) */

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕(桌面顯示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕(大桌面顯示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

我們偶爾也會在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小范圍的屏幕大小之內。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

柵格參數

通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工作的。

超小屏幕 手機 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面顯示器 (≥992px) 大屏幕 大桌面顯示器 (≥1200px)
柵格系統行為 總是水平排列 開始是堆疊在一起的,當大于這些閾值時將變為水平排列C
.container 最大寬度 None (自動) 750px 970px 1170px
類前綴 .col-xs- .col-sm- .col-md- .col-lg-
列(column)數 12
最大列(column)寬 自動 ~62px ~81px ~97px
槽(gutter)寬 30px (每列左右均有 15px)
可嵌套
偏移(Offsets)
列排序

實例:從堆疊到水平排列

使用單一的一組 .col-md-* 柵格類,就可以創建一個基本的柵格系統,在手機和平板設備上一開始是堆疊在一起的(超小屏幕到小屏幕這一范圍),在桌面(中等)屏幕設備上變為水平排列。所有“列(column)必須放在 ” .row 內。

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

實例:流式布局容器

將最外面的布局元素 .container 修改為 .container-fluid,就可以將固定寬度的柵格布局轉換為 100% 寬度的布局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

實例:移動設備和桌面屏幕

是否不希望在小屏幕設備上所有列都堆疊在一起?那就使用針對超小屏幕和中等屏幕設備所定義的類吧,即 .col-xs-*.col-md-*。請看下面的實例,研究一下這些是如何工作的。

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

實例:手機、平板、桌面

在上面案例的基礎上,通過使用針對平板設備的 .col-sm-* 類,我們來創建更加動態和強大的布局吧。

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

實例:多余的列(column)將另起一行排列

如果在一個 .row 內包含的列(column)大于12個,包含多余列(column)的元素將作為一個整體單元被另起一行排列。

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

響應式列重置

即便有上面給出的四組柵格class,你也不免會碰到一些問題,例如,在某些閾值時,某些列可能會出現比別的列高的情況。為了克服這一問題,建議聯合使用 .clearfix響應式工具類

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

除了列在分界點清除響應, 您可能需要 重置偏移, 后推或前拉某個列。請看此柵格實例

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

列偏移

使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距(margin)。例如,.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列(column)的寬度。

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

You can also override offsets from lower grid tiers with .col-*-offset-0 classes.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

嵌套列

為了使用內置的柵格系統將內容再次嵌套,可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。被嵌套的行(row)所包含的列(column)的個數不能超過12(其實,沒有要求你必須占滿12列)。

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列排序

通過使用 .col-md-push-*.col-md-pull-* 類就可以很容易的改變列(column)的順序。

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Less mixin 和變量

除了用于快速布局的預定義柵格類,Bootstrap 還包含了一組 Less 變量和 mixin 用于幫你生成簡單、語義化的布局。

變量

通過變量來定義列數、槽(gutter)寬、媒體查詢閾值(用于確定合適讓列浮動)。我們使用這些變量生成預定義的柵格類,如上所示,還有如下所示的定制 mixin。

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

mixin

mixin 用來和柵格變量一同使用,為每個列(column)生成語義化的 CSS 代碼。

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

實例展示

你可以重新修改這些變量的值,或者用默認值調用這些 mixin。下面就是一個利用默認設置生成兩列布局(列之間有間隔)的案例。

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

排版

標題

HTML 中的所有標題標簽,<h1><h6> 均可使用。另外,還提供了 .h1.h6 類,為的是給內聯(inline)屬性的文本賦予標題的樣式。

h1. Bootstrap heading

Semibold 36px

h2. Bootstrap heading

Semibold 30px

h3. Bootstrap heading

Semibold 24px

h4. Bootstrap heading

Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 12px
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

在標題內還可以包含 <small> 標簽或賦予 .small 類的元素,可以用來標記副標題。

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

頁面主體

Bootstrap 將全局 font-size 設置為 14pxline-height 設置為 1.428。這些屬性直接賦予 <body> 元素和所有段落元素。另外,<p> (段落)元素還被設置了等于 1/2 行高(即 10px)的底部外邊距(margin)。

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

中心內容

通過添加 .lead 類可以讓段落突出顯示。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

使用 Less 工具構建

variables.less 文件中定義的兩個 Less 變量決定了排版尺寸:@font-size-base@line-height-base。第一個變量定義了全局 font-size 基準,第二個變量是 line-height 基準。我們使用這些變量和一些簡單的公式計算出其它所有頁面元素的 margin、 padding 和 line-height。自定義這些變量即可改變 Bootstrap 的默認樣式。

內聯文本元素

Marked text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

被刪除的文本

對于被刪除的文本使用 <del> 標簽。

This line of text is meant to be treated as deleted text.

<del>This line of text is meant to be treated as deleted text.</del>

無用文本

對于沒用的文本使用 <s> 標簽。

This line of text is meant to be treated as no longer accurate.

<s>This line of text is meant to be treated as no longer accurate.</s>

插入文本

額外插入的文本使用 <ins> 標簽。

This line of text is meant to be treated as an addition to the document.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

帶下劃線的文本

為文本添加下劃線,使用 <u> 標簽。

This line of text will render as underlined

<u>This line of text will render as underlined</u>

利用 HTML 自帶的表示強調意味的標簽來為文本增添少量樣式。

小號文本

對于不需要強調的inline或block類型的文本,使用 <small> 標簽包裹,其內的文本將被設置為父容器字體大小的 85%。標題元素中嵌套的 <small> 元素被設置不同的 font-size

你還可以為行內元素賦予 .small 類以代替任何 <small> 元素。

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

著重

通過增加 font-weight 值強調一段文本。

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

斜體

用斜體強調一段文本。

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Alternate elements

在 HTML5 中可以放心使用 <b><i> 標簽。<b> 用于高亮單詞或短語,不帶有任何著重的意味;而 <i> 標簽主要用于發言、技術詞匯等。

對齊

通過文本對齊類,可以簡單方便的將文字重新對齊。

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改變大小寫

通過這幾個類可以改變文本的大小寫。

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

縮略語

當鼠標懸停在縮寫和縮寫詞上時就會顯示完整內容,Bootstrap 實現了對 HTML 的 <abbr> 元素的增強樣式。縮略語元素帶有 title 屬性,外觀表現為帶有較淺的虛線框,鼠標移至上面時會變成帶有“問號”的指針。如想看完整的內容可把鼠標懸停在縮略語上(對使用輔助技術的用戶也可見), 但需要包含 title 屬性。

基本縮略語

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

首字母縮略語

為縮略語添加 .initialism 類,可以讓 font-size 變得稍微小些。

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址

讓聯系信息以最接近日常使用的格式呈現。在每行結尾添加 <br> 可以保留需要的樣式。

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

引用

在你的文檔中引用其他來源的內容。

默認樣式的引用

將任何 HTML 元素包裹在 <blockquote> 中即可表現為引用樣式。對于直接引用,我們建議用 <p> 標簽。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

多種引用樣式

對于標準樣式的 <blockquote>,可以通過幾個簡單的變體就能改變風格和內容。

命名來源

添加 <footer> 用于標明引用來源。來源的名稱可以包裹進 <cite>標簽中。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

另一種展示風格

通過賦予 .blockquote-reverse 類可以讓引用呈現內容右對齊的效果。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>

列表

無序列表

排列順序無關緊要的一列元素。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

有序列表

順序至關重要的一組元素。

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

無樣式列表

移除了默認的 list-style 樣式和左側外邊距的一組元素(只針對直接子元素)。這是針對直接子元素的,也就是說,你需要對所有嵌套的列表都添加這個類才能具有同樣的樣式。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

內聯列表

通過設置 display: inline-block; 并添加少量的內補(padding),將所有元素放置于同一行。

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

描述

帶有描述的短語列表。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平排列的描述

.dl-horizontal 可以讓 <dl> 內的短語及其描述排在一行。開始是像 <dl> 的默認樣式堆疊在一起,隨著導航條逐漸展開而排列在一行。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

自動截斷

通過 text-overflow 屬性,水平排列的描述列表將會截斷左側太長的短語。在較窄的視口(viewport)內,列表將變為默認堆疊排列的布局方式。

代碼

內聯代碼

通過 <code> 標簽包裹內聯樣式的代碼片段。

For example, <section> should be wrapped as inline.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

用戶輸入

通過 <kbd> 標簽標記用戶通過鍵盤輸入的內容。

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

代碼塊

多行代碼可以使用 <pre> 標簽。為了正確的展示代碼,注意將尖括號做轉義處理。

<p>Sample text here...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

還可以使用 .pre-scrollable 類,其作用是設置 max-height 為 350px ,并在垂直方向展示滾動條。

變量

通過 <var> 標簽標記變量。

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

程序輸出

通過 <samp> 標簽來標記程序輸出的內容。

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

表格

基本實例

為任意 <table> 標簽添加 .table 類可以為其賦予基本的樣式 — 少量的內補(padding)和水平方向的分隔線。這種方式看起來很多余!?但是我們覺得,表格元素使用的很廣泛,如果我們為其賦予默認樣式可能會影響例如日歷和日期選擇之類的插件,所以我們選擇將此樣式獨立出來。

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  ...
</table>

條紋狀表格

通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。

跨瀏覽器兼容性

條紋狀表格是依賴 :nth-child CSS 選擇器實現的,而這一功能不被 Internet Explorer 8 支持。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  ...
</table>

帶邊框的表格

添加 .table-bordered 類為表格和其中的每個單元格增加邊框。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  ...
</table>

鼠標懸停

通過添加 .table-hover 類可以讓 <tbody> 中的每一行對鼠標懸停狀態作出響應。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  ...
</table>

緊縮表格

通過添加 .table-condensed 類可以讓表格更加緊湊,單元格中的內補(padding)均會減半。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed">
  ...
</table>

狀態類

通過這些狀態類可以為行或單元格設置顏色。

Class 描述
.active 鼠標懸停在行或單元格上時所設置的顏色
.success 標識成功或積極的動作
.info 標識普通的提示信息或動作
.warning 標識警告或需要用戶注意
.danger 標識危險或潛在的帶來負面影響的動作
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

向使用輔助技術的用戶傳達用意

通過為表格中的一行或一個單元格添加顏色而賦予不同的意義只是提供了一種視覺上的表現,并不能為使用輔助技術 -- 例如屏幕閱讀器 -- 瀏覽網頁的用戶提供更多信息。因此,請確保通過顏色而賦予的不同意義可以通過內容本身來表達(即在相應行或單元格中的可見的文本內容);或者通過包含額外的方式 -- 例如應用了 .sr-only 類而隱藏的文本 -- 來表達出來。

響應式表格

將任何 .table 元素包裹在 .table-responsive 元素內,即可創建響應式表格,其會在小屏幕設備上(小于768px)水平滾動。當屏幕大于 768px 寬度時,水平滾動條消失。

垂直方向的內容截斷

響應式表格使用了 overflow-y: hidden 屬性,這樣就能將超出表格底部和頂部的內容截斷。特別是,也可以截斷下拉菜單和其他第三方組件。

Firefox 和 fieldset 元素

Firefox 瀏覽器對 fieldset 元素設置了一些影響 width 屬性的樣式,導致響應式表格出現問題。可以使用下面提供的針對 Firefox 的 hack 代碼解決,但是以下代碼并未集成在 Bootstrap 中:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

更多信息請參考 this Stack Overflow answer.

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

表單

基本實例

單獨的表單控件會被自動賦予一些全局樣式。所有設置了 .form-control 類的 <input><textarea><select> 元素都將被默認設置寬度屬性為 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group 中可以獲得最好的排列。

Example block-level help text here.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

不要將表單組和輸入框組混合使用

不要將表單組直接和輸入框組混合使用。建議將輸入框組嵌套到表單組中使用。

內聯表單

<form> 元素添加 .form-inline 類可使其內容左對齊并且表現為 inline-block 級別的控件。只適用于視口(viewport)至少在 768px 寬度時(視口寬度再小的話就會使表單折疊)。

可能需要手動設置寬度

在 Bootstrap 中,輸入框和單選/多選框控件默認被設置為 width: 100%; 寬度。在內聯表單,我們將這些元素的寬度設置為 width: auto;,因此,多個控件可以排列在同一行。根據你的布局需求,可能需要一些額外的定制化組件。

一定要添加 label 標簽

如果你沒有為每個輸入控件設置 label 標簽,屏幕閱讀器將無法正確識別。對于這些內聯表單,你可以通過為 label 設置 .sr-only 類將其隱藏。還有一些輔助技術提供label標簽的替代方案,比如 aria-labelaria-labelledbytitle 屬性。如果這些都不存在,屏幕閱讀器可能會采取使用 placeholder 屬性,如果存在的話,使用占位符來替代其他的標記,但要注意,這種方法是不妥當的。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
$
.00
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

水平排列的表單

通過為表單添加 .form-horizontal 類,并聯合使用 Bootstrap 預置的柵格類,可以將 label 標簽和控件組水平并排布局。這樣做將改變 .form-group 的行為,使其表現為柵格系統中的行(row),因此就無需再額外添加 .row 了。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

被支持的控件

表單布局實例中展示了其所支持的標準表單控件。

輸入框

包括大部分表單控件、文本輸入域控件,還支持所有 HTML5 類型的輸入控件: textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor

必須添加類型聲明

只有正確設置了 type 屬性的輸入控件才能被賦予正確的樣式。

<input type="text" class="form-control" placeholder="Text input">

輸入控件組

如需在文本輸入域 <input> 前面或后面添加文本內容或按鈕控件,請參考輸入控件組

文本域

支持多行文本的表單控件。可根據需要改變 rows 屬性。

<textarea class="form-control" rows="3"></textarea>

多選和單選框

多選框(checkbox)用于選擇列表中的一個或多個選項,而單選框(radio)用于從多個選項中只選擇一個。

Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent <label>, you'll need to add the .disabled class to the parent .radio, .radio-inline, .checkbox, or .checkbox-inline.

默認外觀(堆疊在一起)


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

內聯單選和多選框

通過將 .checkbox-inline.radio-inline 類應用到一系列的多選框(checkbox)或單選框(radio)控件上,可以使這些控件排列在一行。


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

不帶label文本的Checkbox 和 radio

如果需要 <label> 內沒有文字,輸入框(input)正是你所期望的。 目前只適用于非內聯的 checkbox 和 radio。 請記住,仍然需要為使用輔助技術的用戶提供某種形式的 label(例如,使用 aria-label)。

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

下拉列表(select)

注意,很多原生選擇菜單 - 即在 Safari 和 Chrome 中 - 的圓角是無法通過修改 border-radius 屬性來改變的。

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

對于標記了 multiple 屬性的 <select> 控件來說,默認顯示多選項。

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

靜態控件

如果需要在表單中將一行純文本和 label 元素放置于同一行,為 <p> 元素添加 .form-control-static 類即可。

email@example.com

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

email@example.com

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

焦點狀態

我們將某些表單控件的默認 outline 樣式移除,然后對 :focus 狀態賦予 box-shadow 屬性。

演示:focus 狀態

在本文檔中,我們為上面實例中的輸入框賦予了自定義的樣式,用于演示 .form-control 元素的 :focus 狀態。

禁用狀態

為輸入框設置 disabled 屬性可以禁止其與用戶有任何交互(焦點、輸入等)。被禁用的輸入框顏色更淺,并且還添加了 not-allowed 鼠標狀態。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

被禁用的 fieldset

<fieldset> 設置 disabled 屬性,可以禁用 <fieldset> 中包含的所有控件。

<a> 標簽的鏈接功能不受影響

默認情況下,瀏覽器會將 <fieldset disabled> 內所有的原生的表單控件(<input><select><button> 元素)設置為禁用狀態,防止鍵盤和鼠標與他們交互。然而,如果表單中還包含 <a ... class="btn btn-*"> 元素,這些元素將只被賦予 pointer-events: none 屬性。正如在關于 禁用狀態的按鈕 章節中(尤其是關于錨點元素的子章節中)所描述的那樣,該 CSS 屬性尚不規范,并且在 Opera 18 及更低版本的瀏覽器或 Internet Explorer 11 總沒有得到全面支持,并且不會阻止鍵盤用戶能夠獲取焦點或激活這些鏈接。所以為了安全起見,建議使用自定義 JavaScript 來禁用這些鏈接。

跨瀏覽器兼容性

雖然 Bootstrap 會將這些樣式應用到所有瀏覽器上,Internet Explorer 11 及以下瀏覽器中的 <fieldset> 元素并不完全支持 disabled 屬性。因此建議在這些瀏覽器上通過 JavaScript 代碼來禁用 <fieldset>

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

只讀狀態

為輸入框設置 readonly 屬性可以禁止用戶修改輸入框中的內容。處于只讀狀態的輸入框顏色更淺(就像被禁用的輸入框一樣),但是仍然保留標準的鼠標狀態。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Help text

Block level help text for form controls.

Associating help text with form controls

Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.

A block of help text that breaks onto a new line and may extend beyond one line.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

校驗狀態

Bootstrap 對表單控件的校驗狀態,如 error、warning 和 success 狀態,都定義了樣式。使用時,添加 .has-warning.has-error.has-success 類到這些控件的父元素即可。任何包含在此元素之內的 .control-label.form-control.help-block 元素都將接受這些校驗狀態的樣式。

將驗證狀態傳達給輔助設備和盲人用戶

使用這些校驗樣式只是為表單控件提供一個可視的、基于色彩的提示,但是并不能將這種提示信息傳達給使用輔助設備的用戶 - 例如屏幕閱讀器 - 或者色盲用戶。

為了確保所有用戶都能獲取正確信息,Bootstrap 還提供了另一種提示方式。例如,你可以在表單控件的 <label> 標簽上以文本的形式顯示提示信息(就像下面代碼中所展示的);包含一個 Glyphicon 字體圖標 (還有賦予 .sr-only 類的文本信息 - 參考Glyphicon 字體圖標實例);或者提供一個額外的 輔助信息 塊。另外,對于使用輔助設備的用戶,無效的表單控件還可以賦予一個 aria-invalid="true" 屬性。

A block of help text that breaks onto a new line and may extend beyond one line.
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

添加額外的圖標

你還可以針對校驗狀態為輸入框添加額外的圖標。只需設置相應的 .has-feedback 類并添加正確的圖標即可。

反饋圖標(feedback icon)只能使用在文本輸入框 <input class="form-control"> 元素上。

圖標、label 和輸入控件組

對于不帶有 label 標簽的輸入框以及右側帶有附加組件的輸入框組,需要手動為其圖標定位。為了讓所有用戶都能訪問你的網站,我們強烈建議為所有輸入框添加 label 標簽。如果你不希望將 label 標簽展示出來,可以通過添加 .sr-only 類來實現。如果的確不能添加 label 標簽,請調整圖標的 top 值。對于輸入框組,請根據你的實際情況調整 right 值。

向輔助技術設備傳遞圖標的含義

為了確保輔助技術- 如屏幕閱讀器 - 正確傳達一個圖標的含義,額外的隱藏的文本應包含在 .sr-only 類中,并明確關聯使用了 aria-describedby 的表單控件。或者,以某些其他形式(例如,文本輸入字段有一個特定的警告信息)傳達含義,例如改變與表單控件實際相關聯的 <label> 的文本。

雖然下面的例子已經提到各自表單控件本身的 <label> 文本的驗證狀態,上述技術(使用 .sr-only 文本 和 aria-describedby) )已經包括了需要說明的目的。

(success)
(warning)
(error)
@
(success)
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

為水平排列的表單和內聯表單設置可選的圖標

(success)
@
(success)
<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>
(success)

@
(success)
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

可選的圖標與設置 .sr-only 類的 label

如果你使用 .sr-only 類來隱藏表單控件的 <label> (而不是使用其它標簽選項,如 aria-label 屬性), 一旦它被添加,Bootstrap 會自動調整圖標的位置。

(success)
@
(success)
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

控件尺寸

通過 .input-lg 類似的類可以為控件設置高度,通過 .col-lg-* 類似的類可以為控件設置寬度。

高度尺寸

創建大一些或小一些的表單控件以匹配按鈕尺寸。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

水平排列的表單組的尺寸

通過添加 .form-group-lg.form-group-sm 類,為 .form-horizontal 包裹的 label 元素和表單控件快速設置尺寸。

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

調整列(column)尺寸

用柵格系統中的列(column)包裹輸入框或其任何父元素,都可很容易的為其設置寬度。

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

按鈕

可作為按鈕使用的標簽或元素

<a><button><input> 元素添加按鈕類(button class)即可使用 Bootstrap 提供的樣式。

Link
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

針對組件的注意事項

雖然按鈕類可以應用到 <a><button> 元素上,但是,導航和導航條組件只支持 <button> 元素。

鏈接被作為按鈕使用時的注意事項

如果 <a> 元素被作為按鈕使用 -- 并用于在當前頁面觸發某些功能 -- 而不是用于鏈接其他頁面或鏈接當前頁面中的其他部分,那么,務必為其設置 role="button" 屬性。

跨瀏覽器展現

我們總結的最佳實踐是:強烈建議盡可能使用 <button> 元素來獲得在各個瀏覽器上獲得相匹配的繪制效果。

另外,我們還發現了 Firefox <30 版本的瀏覽器上出現的一個 bug,其表現是:阻止我們為基于 <input> 元素所創建的按鈕設置 line-height 屬性,這就導致在 Firefox 瀏覽器上不能完全和其他按鈕保持一致的高度。

預定義樣式

使用下面列出的類可以快速創建一個帶有預定義樣式的按鈕。

<!-- Standard button -->
<button type="button" class="btn btn-default">(默認樣式)Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首選項)Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危險)Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(鏈接)Link</button>

Conveying meaning to assistive technologies

為按鈕添加不同的顏色只是一種視覺上的信息表達方式,但是,對于使用輔助技術 -- 例如屏幕閱讀器 -- 的用戶來說,顏色是不可見的。建議,確保通過顏色表達的信息或者通過內容自身表達出來(按鈕上的文字),或者通過其他方式 -- 例如通過 .sr-only 類隱藏的額外文本 -- 表達出來。

尺寸

需要讓按鈕具有不同尺寸嗎?使用 .btn-lg.btn-sm.btn-xs 就可以獲得不同尺寸的按鈕。

<p>
  <button type="button" class="btn btn-primary btn-lg">(大按鈕)Large button</button>
  <button type="button" class="btn btn-default btn-lg">(大按鈕)Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">(默認尺寸)Default button</button>
  <button type="button" class="btn btn-default">(默認尺寸)Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">(小按鈕)Small button</button>
  <button type="button" class="btn btn-default btn-sm">(小按鈕)Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>

通過給按鈕添加 .btn-block 類可以將其拉伸至父元素100%的寬度,而且按鈕也變為了塊級(block)元素。

<button type="button" class="btn btn-primary btn-lg btn-block">(塊級元素)Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">(塊級元素)Block level button</button>

激活狀態

當按鈕處于激活狀態時,其表現為被按壓下去(底色更深、邊框夜色更深、向內投射陰影)。對于 <button> 元素,是通過 :active 狀態實現的。對于 <a> 元素,是通過 .active 類實現的。然而,你還可以將 .active 應用到 <button> 上(包含 aria-pressed="true" 屬性)),并通過編程的方式使其處于激活狀態。

button 元素

由于 :active 是偽狀態,因此無需額外添加,但是在需要讓其表現出同樣外觀的時候可以添加 .active 類。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

鏈接(<a>)元素

可以為基于 <a> 元素創建的按鈕添加 .active 類。

Primary link Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

禁用狀態

通過為按鈕的背景設置 opacity 屬性就可以呈現出無法點擊的效果。

button 元素

<button> 元素添加 disabled 屬性,使其表現出禁用狀態。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

跨瀏覽器兼容性

如果為 <button> 元素添加 disabled 屬性,Internet Explorer 9 及更低版本的瀏覽器將會把按鈕中的文本繪制為灰色,并帶有惡心的陰影,目前我們還沒有解決辦法。

鏈接(<a>)元素

為基于 <a> 元素創建的按鈕添加 .disabled 類。

Primary link Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

我們把 .disabled 作為工具類使用,就像 .active 類一樣,因此不需要增加前綴。

鏈接的原始功能不受影響

上面提到的類只是通過設置 pointer-events: none 來禁止 <a> 元素作為鏈接的原始功能,但是,這一 CSS 屬性并沒有被標準化,并且 Opera 18 及更低版本的瀏覽器并沒有完全支持這一屬性,同樣,Internet Explorer 11 也不支持。In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. 因此,為了安全起見,建議通過 JavaScript 代碼來禁止鏈接的原始功能。

圖片

響應式圖片

在 Bootstrap 版本 3 中,通過為圖片添加 .img-responsive 類可以讓圖片支持響應式布局。其實質是為圖片設置了 max-width: 100%;height: auto;display: block; 屬性,從而讓圖片在其父元素中更好的縮放。

如果需要讓使用了 .img-responsive 類的圖片水平居中,請使用 .center-block 類,不要用 .text-center請參考助手類章節 了解更多關于 .center-block 的用法。

SVG 圖像和 IE 8-10

在 Internet Explorer 8-10 中,設置為 .img-responsive 的 SVG 圖像顯示出的尺寸不勻稱。為了解決這個問題,在出問題的地方添加 width: 100% \9; 即可。Bootstrap 并沒有自動為所有圖像元素設置這一屬性,因為這會導致其他圖像格式出現錯亂。

<img src="..." class="img-responsive" alt="Responsive image">

圖片形狀

通過為 <img> 元素添加以下相應的類,可以讓圖片呈現不同的形狀。

跨瀏覽器兼容性

請時刻牢記:Internet Explorer 8 不支持 CSS3 中的圓角屬性。

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

輔助類

情境文本顏色

通過顏色來展示意圖,Bootstrap 提供了一組工具類。這些類可以應用于鏈接,并且在鼠標經過時顏色可以還可以加深,就像默認的鏈接一樣。

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

處理差異

Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the .sr-only class.

情境背景色

和情境文本顏色類一樣,使用任意情境背景色類就可以設置元素的背景。鏈接組件在鼠標經過時顏色會加深,就像上面所講的情境文本顏色類一樣。

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

處理差異

Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> with the class.

Conveying meaning to assistive technologies

As with contextual colors, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.

關閉按鈕

通過使用一個象征關閉的圖標,可以讓模態框和警告框消失。

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角符號

通過使用三角符號可以指示某個元素具有下拉菜單的功能。注意,向上彈出式菜單中的三角符號是反方向的。

<span class="caret"></span>

快速浮動

通過添加一個類,可以將任意元素向左或向右浮動。!important 被用來明確 CSS 樣式的優先級。這些類還可以作為 mixin(參見 less 文檔) 使用。

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

不能用于導航條組件中

排列導航條中的組件時可以使用這些工具類:.navbar-left.navbar-right參見導航條文檔以獲取更多信息。

讓內容塊居中

為任意元素設置 display: block 屬性并通過 margin 屬性讓其中的內容居中。下面列出的類還可以作為 mixin 使用。

<div class="center-block">...</div>
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

清除浮動

通過為父元素添加 .clearfix 類可以很容易地清除浮動(float)。這里所使用的是 Nicolas Gallagher 創造的 micro clearfix 方式。此類還可以作為 mixin 使用。

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

顯示或隱藏內容

.show.hidden 類可以強制任意元素顯示或隱藏(對于屏幕閱讀器也能起效)。這些類通過 !important 來避免 CSS 樣式優先級問題,就像 quick floats 一樣的做法。注意,這些類只對塊級元素起作用,另外,還可以作為 mixin 使用。

.hide 類仍然可用,但是它不能對屏幕閱讀器起作用,并且從 v3.0.1 版本開始就不建議使用了。請使用 .hidden.sr-only

另外,.invisible 類可以被用來僅僅影響元素的可見性,也就是說,元素的 display 屬性不被改變,并且這個元素仍然能夠影響文檔流的排布。

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

屏幕閱讀器和鍵盤導航

.sr-only 類可以對屏幕閱讀器以外的設備隱藏內容。.sr-only.sr-only-focusable 聯合使用的話可以在元素有焦點的時候再次顯示出來(例如,使用鍵盤導航的用戶)。對于遵循 可訪問性的最佳實踐 很有必要。這個類也可以作為 mixin 使用。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

圖片替換

使用 .text-hide 類或對應的 mixin 可以用來將元素的文本內容替換為一張背景圖。

<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
  .text-hide();
}

響應式工具

為了加快對移動設備友好的頁面開發工作,利用媒體查詢功能并使用這些工具類可以方便的針對不同設備展示或隱藏頁面內容。另外還包含了針對打印機顯示或隱藏內容的工具類。

有針對性的使用這類工具類,從而避免為同一個網站創建完全不同的版本。相反,通過使用這些工具類可以在不同設備上提供不同的展現形式。

可用的類

通過單獨或聯合使用以下列出的類,可以針對不同屏幕尺寸隱藏或顯示頁面內容。

超小屏幕 手機 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面 (≥992px) 大屏幕 桌面 (≥1200px)
.visible-xs-* 可見
.visible-sm-* 可見
.visible-md-* 可見
.visible-lg-* 可見
.hidden-xs 可見 可見 可見
.hidden-sm 可見 可見 可見
.hidden-md 可見 可見 可見
.hidden-lg 可見 可見 可見

從 v3.2.0 版本起,形如 .visible-*-* 的類針對每種屏幕大小都有了三種變體,每個針對 CSS 中不同的 display 屬性,列表如下:

類組 CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

因此,以超小屏幕(xs)為例,可用的 .visible-*-* 類是:.visible-xs-block.visible-xs-inline.visible-xs-inline-block

.visible-xs.visible-sm.visible-md.visible-lg 類也同時存在。但是從 v3.2.0 版本開始不再建議使用。除了 <table> 相關的元素的特殊情況外,它們與 .visible-*-block 大體相同。

打印類

和常規的響應式類一樣,使用下面的類可以針對打印機隱藏或顯示某些內容。

class 瀏覽器 打印機
.visible-print-block
.visible-print-inline
.visible-print-inline-block
可見
.hidden-print 可見

.visible-print 類也是存在的,但是從 v3.2.0 版本開始不建議使用。它與 .visible-print-block 類大致相同,除了 <table> 相關元素的特殊情況外。

測試用例

調整你的瀏覽器大小,或者用其他設備打開頁面,都可以測試這些響應式工具類。

在...上可見

帶有綠色標記的元素表示其在當前瀏覽器視口(viewport)中是可見的

✔ 在超小屏幕上可見
✔ 在小屏幕上可見
中等屏幕 ✔ 在中等屏幕上可見
✔ 在大屏幕上可見
✔ 在超小屏幕和小屏幕上可見
✔ 在中等屏幕和大屏幕上可見
✔ 在超小屏幕和中等屏幕上可見
✔ 在小屏幕和大屏幕上可見
✔ 在超小屏幕和大屏幕上可見
✔ 在小屏幕和中等屏幕上可見

在...上隱藏

帶有綠色標記的元素表示其在當前瀏覽器視口(viewport)中是隱藏的

✔ 在超小屏幕上隱藏
✔ 在小屏幕上隱藏
中等屏幕 ✔ 在中等屏幕上隱藏
✔ 在大屏幕上隱藏
✔ 在超小屏幕和小屏幕上隱藏
✔ 在 medium 和 large 上隱藏
✔ 在超小屏幕和中等屏幕上隱藏
✔ 在小屏幕和大屏幕上隱藏
✔ 在超小屏幕和大屏幕上隱藏
✔ 在小屏幕和中等屏幕上隱藏

使用 Less

Bootstrap 的 CSS 文件是通過 Less 源碼編譯而來的。Less 是一門預處理語言,支持變量、mixin、函數等額外功能。對于希望使用 Less 源碼而非編譯而來的 CSS 文件的用戶,Bootstrap 框架中包含的大量變量、mixin 將非常有價值。

針對柵格系統的變量和 mixin 包含在柵格系統章節。

編譯 Bootstrap

可以通過兩種方式使用 Bootstrap :使用編譯后的 CSS 文件或者使用 Less 源碼文件。若要編譯 Less 文件,請參考“起步”章節的內容以了解如何設置開發環境并運行必須的編譯指令。

變量

整個 Bootstrap 項目中使用了大量的變量,這些變量被用來代表顏色、空白(內部、邊距)、字體等。詳細內容請參考定制工具

顏色

Bootstrap 使用了兩種顏色模式:灰度顏色和語義顏色。灰度顏色用于快速獲取常用的黑色色調;語義顏色包含了各種賦予語義的顏色值。

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

你在項目中可以使用這些預定義的顏色變量,或者重新為其賦予別名,使其更有語義。

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Scaffolding

某幾個變量是改變網站外觀的關鍵要素。

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

僅僅通過改變一個變量,可以很容易地為鏈接賦予正確的顏色。

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

注意:@link-hover-color 使用了 Less 提供的一個內置函數,用于自動為鼠標懸停設置合適的顏色。你還可以使用 darkenlightensaturatedesaturate 等 Less 內置的函數。

排版

通過幾個變量就能輕松的設置字體、字號、行距等。Bootstrap 利用這些變量提供了簡單地定制排版的功能。

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

圖標

以下兩個變量用于設置圖標文件的位置和文件名。

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

組件

組件貫穿整個 Bootstrap 框架,他們通過一些變量來設置默認值。下面列出的是常用的幾個。

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

特定瀏覽器廠商的 mixin

特定瀏覽器廠商的 mixin 用于為不同廠商的瀏覽器使用相應的 CSS 屬性前綴來支持各廠商的瀏覽器。

Box-sizing

通過這一個 mixin 來為所有組件設置盒模型。請參考這篇 來自 Mozilla 的文章

此 mixin 從 v3.2.0 版本開始就被列為 不建議使用 了,取而代之的是使用 Autoprefixer。為了保持向后兼容,在 v4 版本之前,Bootstrap 將在內部繼續使用這些 mixin。

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

圓角

現在,所有現代瀏覽器都支持不帶廠商前綴的 border-radius 屬性了。有鑒于此,我們沒有提供 .border-radius() mixin,但是,Bootstrap does 提供了用于快速設置同一側圓角的 mixin 。

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Box (Drop) 隱形

如果你的目標用戶使用的是最新版本和更高級的瀏覽器和設備,只需單獨使用 box-shadow 屬性即可。如果你需要兼容較老的 Android (低于 v4) 和 iOS 設備 (低于 iOS 5),可以使用下面這個 不建議使用 的 mixin,便于幫你添加 -webkit 前綴。

由于 Bootstrap 并未官方提供對過時(不支持標準屬性)平臺的支持,此 mixin 從 v3.1.0 版本期就 不建議使用 了。為了保持向后兼容,Bootstrap 將繼續在內部使用此 mixin, 直到 Bootstrap v4。

在設置 box 陰影時務必使用 rgba() 顏色,這樣可以使他們盡可能地與背景無縫融入。

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

過渡效果

有多個 mixin 供你靈活使用。可以一次性設置所有的過渡效果的屬性,或者根據需要只是指定延時和持續時間。

此 mixin 從 v3.2.0 版本開始就被列為 不建議使用 了,取而代之的是使用 Autoprefixer。為了保持向后兼容,在 v4 版本之前,Bootstrap 將在內部繼續使用這些 mixin。

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

變形

旋轉、縮放、平移(移動)或傾斜任何對象。

此 mixin 從 v3.2.0 版本開始就被列為 不建議使用 了,取而代之的是使用 Autoprefixer。為了保持向后兼容,在 v4 版本之前,Bootstrap 將在內部繼續使用這些 mixin。

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

動畫

僅適用一個 mixin 就可以在一個聲明中使用所有 CSS3 所提供的動畫屬性,其他 mixin 用于設置單個屬性。

T此 mixin 從 v3.2.0 版本開始就 不建議使用 了,取而代之的是使用 Autoprefixer。為了保持向后兼容,在 v4 版本之前,Bootstrap 將在內部繼續使用這些 mixin。

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

透明度

為所有瀏覽器設置透明度,并為IE8提供 filter 備用濾鏡。

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

占位符文本

為表單控件中每個文本域提供占位符(Placeholder)文本的顏色。

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

通過CSS在一個單獨的元素中生成列。

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

漸變

便于把任何兩種顏色變成背景漸變色。想要使他更高級些,可以設置一個direction(方向),使用三種顏色,也可以使用徑向(radial)漸變。使用一個mixin(混入),你就可以得到所有需要的前綴語法。

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

你也可以為標準的里兩顏色線性漸變指定角度:

#gradient > .directional(#333; #000; 45deg);

如果你需要一個條紋風格的漸變,這也很容易。只要指定一個顏色,我們將該顏色半透明的條紋覆蓋其上。

#gradient > .striped(#333; 45deg);

再來試試三種顏色。利用此 mixin ,并為其設置第一種顏色、第二種顏色、第二種顏色的色標(例如 25%),還有第三種顏色:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

當心! 如果你想刪除某個漸變,確保將你所添加的針對 IE 的 filter 一并刪除。你可以通過使用 .reset-filter() mixin 和 background-image: none; 達到目的。

實用工具 mixin

實用工具 mixin 用于與不相關的 CSS 結合以達到特定目的或任務。

Clearfix -- 清除浮動

建議為需要清除浮動的元素使用 .clearfix() mixin ,盡量不要直接添加 class="clearfix" 類。基于 Nicolas Gallaghermicro clearfix 代碼。

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

水平居中

讓元素在其父元素中水平居中。需要設置 widthmax-width 屬性。

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

尺寸助手 mixin

用于方便的指定對象的尺寸。

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

可調整大小的文本域

方便設置任何文本域或其他元素的尺寸可調整。默認依循瀏覽器默認行為 (both),即垂直、水平都可以調整。

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

截斷文本

此 mixin 用來以省略號代替被截斷的文本。元素必須是 blockinline-block 級。

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

視網膜屏幕(Retina)下的圖片

通過指定兩個圖片路徑和 @1x 圖片尺寸,Bootstrap 還提供了對 @2x 媒體查詢的支持。 如果你的頁面上有很多圖片,建議在一個單獨的媒體查詢中手工編寫針對視網膜屏幕的 CSS 代碼。

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

使用 Sass

雖然 Bootstrap 是基于 Less 構建的,我們還提供了一套官方支持的 Sass 移植版代碼。我們將這個版本放在單獨的 GitHub 倉庫中進行維護,并通過腳本處理源碼更新。

包含的內容

由于 Sass 移植版存放于單獨的倉庫,并針對不同的使用群體,這個項目中的內容與 Bootstrap 主項目有很大不同。這也是為了保證 Sass 移植版與更多基于 Sass 的系統相兼容。

路徑 描述
lib/ Ruby gem code (Sass configuration, Rails and Compass integrations)
tasks/ Converter scripts (turning upstream Less to Sass)
test/ Compilation tests
templates/ Compass package manifest
vendor/assets/ Sass, JavaScript, and font files
Rakefile Internal tasks, such as rake and convert

請訪問 Sass 移植版在 GitHub 上的倉庫 來了解這些文件。

安裝

關于如何安裝并使用 Bootstrap 的 Sass 移植版,請參考GitHub 倉庫中的 readme 文件。 此倉庫中包含了最新的源碼以及如何與 Rails、Compass 以及標準 Sass 項目一同使用的詳細信息。

Bootstrap for Sass