概述

了解 Bootstrap 基礎架構的關鍵部分，包括我們更好、更快、更強大的 Web 開發方法。

HTML5 文檔類型

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

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

移動優先

在 Bootstrap 2 中，我們為框架的關鍵方面添加了可選的移動友好樣式。使用 Bootstrap 3，我們從一開始就將項目重寫為對移動設備友好。它們沒有添加可選的移動樣式，而是直接融入核心。事實上，Bootstrap 是移動優先的。移動優先樣式可以在整個庫中找到，而不是在單獨的文件中。

為確保正確渲染和触摸縮放，請將視口元標記添加到您的<head>.

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

user-scalable=no您可以通過添加到視口元標記來禁用移動設備上的縮放功能。這將禁用縮放，這意味著用戶只能滾動，並導致您的網站感覺更像一個原生應用程序。總的來說，我們不建議在每個網站上都這樣做，所以要小心！

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

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

  • 設置background-color: #fff;在body
  • 使用@font-family-base、@font-size-base和@line-height-base屬性作為我們的排版基礎
  • 通過設置全局鏈接顏色@link-color並僅在上應用鏈接下劃線:hover

這些樣式可以在scaffolding.less.

規範化.css

為了改進跨瀏覽器渲染，我們使用了Normalize.css ，這是Nicolas Gallagher和Jonathan Neal的一個項目。

容器

Bootstrap 需要一個包含元素來包裝網站內容並容納我們的網格系統。您可以選擇兩個容器之一在您的項目中使用。請注意，由於padding以及更多，這兩個容器都不是可嵌套的。

用於.container響應式固定寬度容器。

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

用於.container-fluid全寬容器，跨越視口的整個寬度。

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

網格系統

Bootstrap 包括一個響應式、移動優先的流體網格系統，隨著設備或視口大小的增加，它可以適當地擴展到 12 列。它包括用於簡單佈局選項的預定義類，以及用於生成更多語義佈局的強大 mixin。

介紹

網格系統用於通過一系列包含您的內容的行和列來創建頁面佈局。下面是 Bootstrap 網格系統的工作原理：

  • 行必須放置在.container(fixed-width) 或.container-fluid(full-width) 內，以便正確對齊和填充。
  • 使用行來創建水平的列組。
  • 內容應該放在列中，並且只有列可以是行的直接子級。
  • 預定義的網格類.row和.col-xs-4可用於快速製作網格佈局。更少的 mixin 也可以用於更多的語義佈局。
  • 列通過padding. 該填充通過 s 上的負邊距在第一列和最後一列的行中偏移.row。
  • 負邊距是為什麼下面的示例被突出的原因。這樣網格列中的內容就會與非網格內容對齊。
  • 通過指定您希望跨越的十二個可用列的數量來創建網格列。例如，三個相等的列將使用三個.col-xs-4。
  • 如果單行中放置了超過 12 列，則每組額外的列將作為一個單元換行。
  • 網格類適用於屏幕寬度大於或等於斷點大小的設備，並覆蓋針對較小設備的網格類。因此，例如，將任何.col-md-*類應用於元素不僅會影響其在中型設備上的樣式，而且如果.col-lg-*類不存在，也會影響大型設備上的樣式。

查看將這些原則應用於您的代碼的示例。

媒體查詢

我們在 Less 文件中使用以下媒體查詢在網格系統中創建關鍵斷點。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@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）
網格行為 始終水平 折疊開始，水平高於斷點
集裝箱寬度 無（自動） 750像素 970像素 1170像素
類前綴 .col-xs- .col-sm- .col-md- .col-lg-
# 列數 12
列寬 汽車 〜62像素 〜81像素 ~97 像素
天溝寬度 30 像素（每列各 15 像素）
可嵌套 是的
偏移量 是的
列排序 是的

示例：堆疊到水平

使用一組.col-md-*網格類，您可以創建一個基本的網格系統，該系統開始堆疊在移動設備和平板設備（超小到小範圍）上，然後在桌面（中型）設備上變為水平。將網格列放在任何.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.

<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>

示例：列換行

如果單行中放置了超過 12 列，則每組額外的列將作為一個單元換行。

.col-xs-9
.col-xs-4
由於 9 + 4 = 13 > 12，這個 4 列寬的 div 作為一個連續單元被換行到一個新行上。
.col-xs-6
後續列沿新行繼續。 
<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>

響應列重置

由於有四層網格可用，您一定會遇到問題，在某些斷點處，您的列不能完全正確地清除，因為一個比另一個高。要解決這個問題，請結合使用 a.clearfix和我們的響應式實用程序類。

.col-xs-6 .col-sm-3
調整視口大小或在手機上查看示例。
.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>

刪除排水溝

從一行中刪除排水溝，它是.row-no-gutters類的列。

.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 
<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

偏移列

使用類將列向右移動.col-md-offset-*。這些類逐列增加一列的左邊距*。例如，.col-md-offset-4移動.col-md-4四列。

.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>

您還可以使用.col-*-offset-0類覆蓋來自較低網格層的偏移量。

<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組新列。嵌套行應包括一組不超過 12 列的列（不需要使用所有 12 個可用列）。.col-sm-*.col-sm-*

級別 1：.col-sm-9
級別 2：.col-xs-8 .col-sm-6
級別 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-*修飾符類輕鬆更改內置網格列的順序。

.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>

更少的 mixins 和變量

除了用於快速佈局的預構建網格類之外，Bootstrap 還包括 Less 變量和 mixin，用於快速生成您自己的簡單語義佈局。

變量

變量確定列數、裝訂線寬度和開始浮動列的媒體查詢點。我們使用這些來生成上面記錄的預定義網格類，以及下面列出的自定義 mixins。

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

混合

Mixin 與網格變量結合使用，為各個網格列生成語義 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>，都可用。.h1through.h6類也可用，當您想要匹配標題的字體樣式但仍希望您的文本內聯顯示時。

h1。引導標題

 半粗體 36px

h2。引導標題

 半粗體 30px

h3。引導標題

 半粗體 24px

h4。引導標題

 半粗體 18px
h5。引導標題
 半粗體 14px
h6. 引導標題
 半粗體 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。引導標題輔助文本

h2。引導標題輔助文本

h3。引導標題輔助文本

h4。引導標題輔助文本
h5。引導標題輔助文本
h6. 引導標題輔助文本
 
<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值為14px，aline-height為1.428。這適用於<body>所有段落。此外，<p>（段落）的下邊距為其計算的行高的一半（默認為 10 像素）。

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 車輛。

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 sat amet non magna。Donec id elit non mi porta gravida 在 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>

用更少的東西建造

印刷比例基於variables.less :@font-size-base和中的兩個 Less 變量@line-height-base。第一個是始終使用的基本字體大小，第二個是基本行高。我們使用這些變量和一些簡單的數學來創建我們所有類型的邊距、填充和行高等等。自定義它們，Bootstrap 會適應。

內聯文本元素

標記文本

由於在另一個上下文中的相關性而突出顯示��系列文本，請使用<mark>標籤。

您可以使用標記標籤強調文本。

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

刪除的文字

要指示已刪除的文本塊，請使用<del>標籤。

這行文本將被視為已刪除的文本。

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

刪除線文本

要指示不再相關的文本塊，請使用<s>標籤。

這行文本將被視為不再準確。

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

插入的文本

為了指示對文檔的添加，請使用<ins>標籤。

這行文本被視為對文檔的補充。

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

帶下劃線的文字

要為文本添加下劃線，請使用<u>標籤。

這行文本將呈現為下劃線

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

使用帶有輕量級樣式的 HTML 的默認強調標記。

小文本

為了不強調內聯或文本塊，使用<small>標籤將文本設置為父級大小的 85%。標題元素接收自己font-size的嵌套<small>元素。

您也可以使用內聯元素.small代替 any <small>。

這行文本應被視為精美印刷品。

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

大膽的

用於強調具有較重字體粗細的文本片段。

以下文本片段呈現為粗體文本。

<strong>rendered as bold text</strong>

斜體

用於強調帶有斜體的文本片段。

以下文本片段呈現為斜體文本。

<em>rendered as italicized text</em>

替代元素

隨意使用<b>和<i>在 HTML5 中。<b>旨在突出單詞或短語而不傳達額外的重要性，而<i>主要用於語音、技術術語等。

對齊類

使用文本對齊類輕鬆將文本重新對齊到組件。

左對齊文本。

居中對齊的文本。

右對齊文本。

對齊文本。

沒有換行文本。

<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>

轉換類

使用文本大寫類轉換組件中的文本。

小寫文本。

大寫文本。

大寫的文本。

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

縮寫

<abbr>用於縮寫和首字母縮略詞的 HTML 元素的風格化實現，以在懸停時顯示擴展版本。帶有屬性的縮寫title有一個淺點的底部邊框和一個懸停幫助光標，為懸停和輔助技術的用戶提供額外的上下文。

基本縮寫

單詞屬性的縮寫是attr。

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

初始主義

添加.initialism一個略小的字體大小的縮寫。

HTML是自切片麵包以來最好的東西。

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

地址

提供最近的祖先或整個工作的聯繫信息。通過以 . 結尾的所有行來保留格式<br>。

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103 電話
： (123) 456-7890
全名
[email protected] 
<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:#">[email protected]</a>
</address>

塊引用

用於引用文檔中其他來源的內容塊。

默認塊引用

環繞<blockquote>任何HTML作為引用。對於直接報價，我們建議使用<p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示賭注。

<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 pouere 表示賭注。

源標題 中著名的人 
<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 pouere 表示賭注。

源標題 中著名的人 
<blockquote class="blockquote-reverse">
  ...
</blockquote>

列表

無序

順序無關緊要的項目列表。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • 馬薩的整數 molestie lorem
  • pretium nisl aliquet 的促進作用
  • Nulla volutpat aliquam velit
    • 菜豆
    • Purus sodales ultricies
    • 前庭前庭端口掃描儀
    • Ac tristique libero volutpat 在
  • Faucibus porta lacus fringilla vel
  • Aenean sat amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

已訂購

順序確實很重要的項目列表。

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. 馬薩的整數 molestie lorem
  4. pretium nisl aliquet 的促進作用
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sat amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

無樣式

刪除list-style列表項的默認值和左邊距（僅限直接子項）。這僅適用於直接子列表項，這意味著您還需要為任何嵌套列表添加類。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • 馬薩的整數 molestie lorem
  • pretium nisl aliquet 的促進作用
  • Nulla volutpat aliquam velit
    • 菜豆
    • Purus sodales ultricies
    • 前庭前庭端口掃描儀
    • Ac tristique libero volutpat 在
  • Faucibus porta lacus fringilla vel
  • Aenean sat amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

排隊

將所有列表項放在一行上，display: inline-block;並帶有一些淺色填充。

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

描述

術語列表及其相關描述。

描述列表
描述列表非常適合定義術語。
歐伊斯莫德
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit。
Donec id elit non mi porta gravida 在 eget metus。
馬勒蘇達門
Etiam porta sem malesuada magna mollis euismod。 
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

橫向描述

使術語和描述<dl>並排排列。像 default 一樣從堆疊開始<dl>，但是當導航欄展開時，這些也是如此。

描述列表
描述列表非常適合定義術語。
歐伊斯莫德
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit。
Donec id elit non mi porta gravida 在 eget metus。
馬勒蘇達門
Etiam porta sem malesuada magna mollis euismod。
Felis euismod semper eget lacinia
Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut bakerum massa justo sit amet risus。 
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

自動截斷

水平描述列表將截斷太長而無法放入左列的術語text-overflow。在較窄的視口中，它們將更改為默認的堆疊佈局。

代碼

排隊

用 .包裹內聯代碼片段<code>。

例如， <section>應包裝為內聯。 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

用戶輸入

使用<kbd>表示通常通過鍵盤輸入的輸入。

要切換目錄，請鍵入 cd後跟目錄的名稱。
要編輯設置，請按 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>此處為示例文本...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

您可以選擇添加.pre-scrollable該類，它將設置最大高度為 350 像素並提供一個 y 軸滾動條。

變量

對於指示變量���請使用<var>標籤。

y = m x + b

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

樣本輸出

為了指示程序的塊樣本輸出，請使用<samp>標籤。

此文本應被視為計算機程序的示例輸出。

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

表

基本示例

對於基本樣式（淺色填充和僅水平分隔線），將基類添加.table到任何<table>. 它可能看起來超級多餘，但鑑於其他插件（如日曆和日期選擇器）廣泛使用表格，我們選擇隔離我們的自定義表格樣式。

可選的表格標題。
# 名 姓 用戶名
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里 鳥 @推特 
<table class="table">
  ...
</table>

條紋行

用於.table-striped將斑馬條紋添加到<tbody>.

跨瀏覽器兼容性

條紋表通過:nth-childCSS 選擇器設置樣式，這在 Internet Explorer 8 中不可用。

# 名 姓 用戶名
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里 鳥 @推特 
<table class="table table-striped">
  ...
</table>

帶邊框的桌子

.table-bordered在表格和單元格的所有邊添加邊框。

# 名 姓 用戶名
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里 鳥 @推特 
<table class="table table-bordered">
  ...
</table>

懸停行

添加.table-hover以在<tbody>.

# 名 姓 用戶名
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里 鳥 @推特 
<table class="table table-hover">
  ...
</table>

精簡表

通過將單元格填充減半來添加.table-condensed以使表格更緊湊。

# 名 姓 用戶名
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特 
<table class="table table-condensed">
  ...
</table>

上下文類

使用上下文類為表格行或單個單元格著色。

班級 描述
.active 將懸停顏色應用於特定的行或單元格
.success 表示成功或積極的行動
.info 表示中性的信息變化或行動
.warning 表示可能需要注意的警告
.danger 表示危險或潛在的負面行為
# 列標題 列標題 列標題
1 欄目內容 欄目內容 欄目內容
2 欄目內容 欄目內容 欄目內容
3 欄目內容 欄目內容 欄目內容
4 欄目內容 欄目內容 欄目內容
5 欄目內容 欄目內容 欄目內容
6 欄目內容 欄目內容 欄目內容
7 欄目內容 欄目內容 欄目內容
8 欄目內容 欄目內容 欄目內容
9 欄目內容 欄目內容 欄目內容 
<!-- 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使它們在小型設備（768 像素以下）上水平滾動。當查看任何大於 768 像素寬的東西時，您不會在這些表格中看到任何差異。

垂直剪裁/截斷

響應式表格使用overflow-y: hidden，它會剪掉超出表格底部或頂部邊緣的任何內容。特別是，這可以剪掉下拉菜單和其他第三方小部件。

Firefox 和字段集

Firefox 有一些尷尬width的字段集樣式，涉及乾擾響應表。如果沒有我們在 Bootstrap 中未提供的特定於 Firefox 的 hack，則無法覆蓋這一點：

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

有關更多信息，請閱讀此 Stack Overflow 答案。

# 表格標題 表格標題 表格標題 表格標題 表格標題 表格標題
1 表格單元格 表格單元格 表格單元格 表格單元格 表格單元格 表格單元格
2 表格單元格 表格單元格 表格單元格 表格單元格 表格單元格 表格單元格
3 表格單元格 表格單元格 表格單元格 表格單元格 表格單元格 表格單元格
# 表格標題 表格標題 表格標題 表格標題 表格標題 表格標題
1 表格單元格 表格單元格 表格單元格 表格單元格 表格單元格 表格單元格
2 表格單元格 表格單元格 表格單元格 表格單元格 表格單元格 表格單元格
3 表格單元格 表格單元格 表格單元格 表格單元格 表格單元格 表格單元格 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

形式

基本示例

單個表單控件會自動接收一些全局樣式。默認情況下，所有 textual <input>、<textarea>和<select>元素.form-control都設置為width: 100%;。將標籤和控件包裹起來.form-group以獲得最佳間距。

此處的示例塊級幫助文本。

<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-inline到您的表單（不必是 a ）。這僅適用於視口中至少 768 像素寬的表單。<form>

可能需要自定義寬度

width: 100%;Bootstrap 中默認應用了輸入和選擇。在內聯表單中，我們將其重置為width: auto;多個控件可以駐留在同一行。根據您的佈局，可能需要額外的自定義寬度。

始終添加標籤

如果您沒有為每個輸入添加標籤，屏幕閱讀器將無法處理您的表單。對於這些內聯表單，您可以使用.sr-only類隱藏標籤。還有其他替代方法可以為輔助技術提供標籤，例如aria-label、aria-labelledby或title屬性。如果這些都不存在，屏幕閱讀器可能會使用該placeholder屬性（如果存在），但請注意，placeholder不建議使用 of 作為其他標籤方法的替代品。

<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="[email protected]">
  </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 的預定義網格類，通過添加到表單（不一定是） ，在水平佈局中對齊標籤和表單控件組<form>。這樣做會將.form-groups 更改為網格行，因此不需要.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 類型的支持：text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 和color.

需要類型聲明

type只有正確聲明輸入時，輸入才會完全設置樣式。

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

輸入組

要在任何基於文本的之前和/或之後添加集成文本或按鈕<input>，請查看輸入組組件。

文本區域

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

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

複選框和收音機

複選框用於在列表中選擇一個或多個選項，而單選框用於從多個選項中選擇一個。

支持禁用的複選框和單選，但要在 parent 懸停時提供“不允許”光標<label>，您需要將.disabled類添加到 parent .radio、.radio-inline、.checkbox或.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


<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>，則輸入的位置與您期望的一樣。目前僅適用於非內聯複選框和收音機。請記住仍然為輔助技術提供某種形式的標籤（例如，使用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>

選擇

請注意，許多原生選擇菜單（即在 Safari 和 Chrome 中）具有無法通過border-radius屬性修改的圓角。

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

對於<select>具有該屬性的控件，multiple默認顯示多個選項。

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

靜態控制

當您需要在表單中的表單標籤旁邊放置純文本時，請.form-control-static使用<p>.

電子郵件@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 protected]</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>

電子郵件@example.com

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</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樣式，並box-shadow在其位置應用了:focus.

演示:focus狀態

上面的示例輸入使用我們文檔中的自定義樣式來:focus演示.form-control.

禁用狀態

disabled在輸入上添加布爾屬性以防止用戶交互。禁用的輸入看起來更亮並添加了一個not-allowed光標。

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

禁用的字段集

將disabled屬性添加到 a<fieldset>以立即禁用其中的所有控件<fieldset>。

關於鏈接功能的警告<a>

默認情況下，瀏覽器會將 a 內的所有原生表單控件（<input>和<select>元素<button>）<fieldset disabled>視為禁用，從而阻止鍵盤和鼠標在它們上的交互。但是，如果您的表單還包含<a ... class="btn btn-*">元素，則這些元素只會被賦予pointer-events: none. 如關於按鈕禁用狀態的部分（特別是錨元素的子部分）中所述，此 CSS 屬性尚未標準化，並且在 Opera 18 及更低版本或 Internet Explorer 11 中不完全支持，並且贏得了'不要阻止鍵盤用戶能夠聚焦或激活這些鏈接。因此，為了安全起見，請使用自定義 JavaScript 禁用此類鏈接。

跨瀏覽器兼容性

disabled雖然 Bootstrap將在所有瀏覽器中應用這些樣式，但 Internet Explorer 11 及更低版本並不完全支持<fieldset>. 使用自定義 JavaScript 禁用這些瀏覽器中的字段集。

<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>

幫助文本

表單控件的塊級幫助文本。

將幫助文本與表單控件相關聯

幫助文本應與使用該aria-describedby屬性相關的表單控件顯式關聯。這將確保輔助技術（例如屏幕閱讀器）在用戶聚焦或進入控件時宣布此幫助文本。

一段幫助文本，換行並可能超出一行。 
<label 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 包括表單控件上的錯誤、警告和成功狀態的驗證樣式。要使用，添加.has-warning, .has-error, 或.has-success到父元素。該元素內的任何.control-label、.form-control和都將接收驗證樣式。.help-block

向輔助技術和色盲用戶傳達驗證狀態

使用這些驗證樣式來表示表單控件的狀態僅提供基於顏色的視覺指示，不會傳達給輔助技術用戶（例如屏幕閱讀器）或色盲用戶。

確保還提供了替代的狀態指示。例如，您可以在表單控件的<label>文本本身中包含有關狀態的提示（如以下代碼示例中的情況），包含Glyphicon（使用.sr-only該類具有適當的替代文本 - 請參閱Glyphicon 示例），或通過提供附加幫助文本塊。特別是對於輔助技術，無效的表單控件也可以分配一個aria-invalid="true"屬性。

一段幫助文本，換行並可能超出一行。 
<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和右側圖標添加可選的反饋圖標。

反饋圖標僅適用於文本<input class="form-control">元素。

圖標、標籤和輸入組

對於沒有標籤的輸入和右側有附加組件的輸入組，需要手動定位反饋圖標。出於可訪問性原因，強烈建議您為所有輸入提供標籤。如果您希望阻止顯示標籤，請將它們與.sr-only類一起隱藏。如果您必須不使用標籤，請調整top反饋圖標的值。對於輸入組，right根據插件的寬度將值調整為適當的像素值。

將圖標的含義傳達給輔助技術

為確保輔助技術（例如屏幕閱讀器）正確傳達圖標的含義，應在.sr-only類中包含額外的隱藏文本，並與使用它相關的表單控件顯式關聯aria-describedby。或者，確保以某種其他形式傳達含義（例如，特定文本輸入字段存在警告的事實），例如更改<label>與表單控件關聯的實際文本。

儘管以下示例已經在文本本身中提到了它們各自表單控件的驗證狀態，但出於說明目的，已包含<label>上述技術（使用.sr-only文本和）。aria-describedby

（成功）
（警告）
（錯誤）
@
（成功） 
<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>

水平和內聯形式的可選圖標

（成功）
@
（成功） 
<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>
（成功）

@
（成功） 
<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帶有隱藏標籤的可選圖標

如果您使用.sr-only該類來隱藏表單控件<label>（而不是使用其他標籤選項，例如aria-label屬性），Bootstrap 將在添加圖標後自動調整圖標的位置。

（成功）
@
（成功） 
<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-horizontal通過添加.form-group-lg或快速調整標籤和表單控件的大小.form-group-sm。

<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>

列大小

將輸入包裝在網格列或任何自定義父元素中，以輕鬆實施所需的寬度。

<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>。

關聯 
<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中存在一個錯誤，它阻止我們設置基於line-heightof<input>的按鈕，導致它們與 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>

向輔助技術傳達意義

使用顏色為按鈕添加含義僅提供視覺指示，不會傳達給輔助技術的用戶 - 例如屏幕閱讀器。確保由顏色表示的信息在內容本身（按鈕的可見文本）中是顯而易見的，或者通過其他方式包含在內，例如隱藏在.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.

<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. 但是，如果您需要以編程方式複制活動狀態，則可以使用.activeon <button>s（並包含該屬性）。aria-pressed="true"

按鈕元素

不需要添加: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>

錨元素

將.active類添加到<a>按鈕。

主鏈接 關聯 

<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。

按鈕元素

將disabled屬性添加到<button>按鈕。

<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>

跨瀏覽器兼容性

如果您將disabled屬性添加到 a <button>，Internet Explorer 9 及更低版本將使用我們無法修復的令人討厭的文本陰影呈現文本灰色。

錨元素

將.disabled類添加到<a>按鈕。

主鏈接 關聯 

<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>s 的鏈接功能，但該 CSS 屬性尚未標準化，並且在 Opera 18 及更低版本或 Internet Explorer 11 中不完全支持。此外，即使在支持的瀏覽器中pointer-events: none，鍵盤導航不受影響，這意味著有視力的鍵盤用戶和輔助技術用戶仍然能夠激活這些鏈接。因此，為了安全起見，請使用自定義 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 中，SVG 圖像.img-responsive的大小不成比例。要解決此問題，請width: 100% \9;在必要時添加。Bootstrap 不會自動應用它，因為它會導致其他圖像格式複雜化。

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

圖像形狀

將類添加到<img>元素中，以便在任何項目中輕鬆設置圖像樣式。

跨瀏覽器兼容性

請記住，Internet Explorer 8 不支持圓角。

140x140 140x140 140x140 
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

助手類

上下文顏色

使用少數強調實用程序類通過顏色傳達意義。這些也可以應用於鏈接，並且會在懸停時變暗，就像我們的默認鏈接樣式一樣。

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 sat 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>

處理特異性

有時，由於另一個選擇器的特殊性，無法應用強調類。在大多數情況下，一個足夠的解決方法是將您的文本包裝在一個<span>類中。

向輔助技術傳達意義

使用顏色來添加含義僅提供視覺指示，不會傳達給輔助技術的用戶 - 例如屏幕閱讀器。確保由顏色表示的信息對於內容本身是顯而易見的（上下文顏色僅用於加強文本/標記中已經存在的含義），或者通過其他方式包含在內，例如隱藏在.sr-only類中的附加文本.

背景背景

與上下文文本顏色類類似，可以輕鬆地將元素的背景設置為任何上下文類。錨組件將在懸停時變暗，就像文本類一樣。

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 sat 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>

處理特異性

有時，由於另一個選擇器的特殊性，無法應用上下文背景類。在某些情況下，一個足夠的解決方法是將元素的內容包裝在一個<div>類中。

向輔助技術傳達意義

與上下文顏色一樣，確保通過顏色傳達的任何含義也以不純粹的表現形式傳達。

關閉圖標

使用通用關閉圖標來關閉模式和警報等內容。

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

插入符號

使用插入符號指示下拉功能和方向。請注意，默認插入符號將在下拉菜單中自動反轉。

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

快速浮動

使用類將元素向左或向右浮動。!important包括在內以避免特異性問題。類也可以用作 mixin。

<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-leftor.navbar-right代替。有關詳細信息，請參閱導航欄文檔。

中心內容塊

通過 將元素設置為display: block並居中margin。可作為 mixin 和 class 使用。

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

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

清除修復

float通過添加.clearfix 到父元素輕鬆清除s 。利用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();
}

顯示和隱藏內容

使用和類強制顯示或隱藏元素（包括屏幕閱讀器） 。這些類用於避免特異性衝突，就像快速浮動一樣。它們僅可用於塊級切換。它們也可以用作 mixin。.show.hidden!important

.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-*-*每個斷點的類有三種變體，一種對應於display下面列出的每個 CSS 屬性值。

班組 CSSdisplay
.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 開始不推薦使用。它們大致相當於.visible-*-block，除了用於切換<table>相關元素的其他特殊情況。

打印類

與常規響應類類似，使用它們來切換打印內容。

課程 瀏覽器 打印
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		可見的
.hidden-print 可見的

該類.visible-print也存在，但自 v3.2.0 起已棄用。除了 -相關元素.visible-print-block的其他特殊情況外，它大致等價於。<table>

測試用例

調整瀏覽器大小或在不同設備上加載以測試響應式實用程序類。

可見於...

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

✔ 在 x-small 上可見
✔ 小尺寸可見
中等的 ✔ 在介質上可見
✔ 大尺寸可見
✔ 在 x-small 和 small 上可見
✔ 在中型和大型上可見
✔ 在 x-small 和 medium 上可見
✔ 大小可見
✔ 在 x-small 和 large 上可見
✔ 中小型可見

隱藏在...

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

✔ 隱藏在 x-small 上
✔ 隱藏在小
中等的 ✔ 隱藏在媒體上
✔隱藏在大
✔ 隱藏在 x-small 和 small
✔ 隱藏在大中型
✔ 隱藏在 x-small 和 medium
✔ 隱藏在大小
✔ 隱藏在 x-small 和 large
✔ 隱藏在中小型

少用

Bootstrap 的 CSS 建立在 Less 之上，Less 是一個預處理器，具有變量、mixin 和用於編譯 CSS 的函數等附加功能。那些希望使用源 Less 文件而不是我們編譯的 CSS 文件的人可以利用我們在整個框架中使用的眾多變量和 mixin。

Grid 變量和 mixin 包含在 Grid system 部分中。

編譯引導程序

Bootstrap 至少可以通過兩種方式使用：使用已編譯的 CSS 或使用源 Less 文件。要編譯 Less 文件，請參閱入門部分，了解如何設置開發環境以運行必要的命令。

第三方編譯工具可能適用於 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
@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 的另一個很棒的工具，可以自動創建正確的懸停顏色。您可以使用darken、lighten、saturate和desaturate。

排版

使用一些快速變量輕鬆設置字體、文本大小、行距等。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;

供應商混合

供應商混合是通過在編譯的 CSS 中包含所有相關供應商前綴來幫助支持多種瀏覽器的混合。

盒子尺寸

使用單個 mixin 重置組件的盒子模型。有關上下文，請參閱Mozilla 的這篇有用的文章。

從 v3.2.0 開始不推薦使用mixin ，並引入了 Autoprefixer。為了保持向後兼容性，Bootstrap 將繼續在內部使用 mixin，直到 Bootstrap v4。

.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 確實包含用於快速圓整對象特定一側的兩個角的快捷方式。

.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;
}

框（Drop）陰影

如果您的目標受眾正在使用最新最好的瀏覽器和設備，請務必單獨使用該box-shadow屬性。如果您需要對舊版 Android（v4 之前）和 iOS 設備（iOS 5 之前）的支持，請使用已棄用的mixin 來獲取所需的-webkit前綴。

從 v3.1.0 開始不推薦使用mixin ，因為 Bootstrap 不正式支持不支持標準屬性的過時平台。為了保持向後兼容性，Bootstrap 將繼續在內部使用 mixin，直到 Bootstrap v4。

一定要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 以提高靈活性。將所有轉換信息設置為一個，或根據需要指定單獨的延遲和持續時間。

從v3.2.0 開始不推薦使用mixin，並引入了 Autoprefixer。為了保持向後兼容性，Bootstrap 將繼續在內部使用 mixin，直到 Bootstrap v4。

.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;
}

轉型

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

從v3.2.0 開始不推薦使用mixin，並引入了 Autoprefixer。為了保持向後兼容性，Bootstrap 將繼續在內部使用 mixin，直到 Bootstrap v4。

.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 用於單個屬性。

從v3.2.0 開始不推薦使用mixin，並引入了 Autoprefixer。為了保持向後兼容性，Bootstrap 將繼續在內部使用 mixin，直到 Bootstrap v4。

.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(@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;
}

漸變

輕鬆將任意兩種顏色轉換為背景漸變。更高級並設置方向、使用三種顏色或使用徑向漸變。使用單個 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);

小心！如果您需要刪除漸變，請務必刪除filter您可能添加的任何特定於 IE 的內容。您可以通過在.reset-filter()旁邊使用 mixin來做到這一點background-image: none;。

實用程序混合

實用程序混合是組合其他不相關的 CSS 屬性以實現特定目標或任務的混合。

清除修復

忘記添加class="clearfix"任何元素，而是.clearfix()在適當的地方添加 mixin。使用Nicolas Gallagher的micro clearfix。

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

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

水平居中

快速居中其父元素中的任何元素。需要width或被max-width設置。

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

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

尺碼助手

更輕鬆地指定對象的尺寸。

// 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 的省略號輕鬆截斷文本。要求元素為block或inline-block水平。

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

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

視網膜圖像

指定兩個圖像路徑和@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 端口有一個單獨的 repo 並且服務的受眾略有不同，因此該項目的內容與主要的 Bootstrap 項目有很大不同。這確保了 Sass 移植與盡可能多的基於 Sass 的系統兼容。

小路 描述
lib/ Ruby gem 代碼（Sass 配置、Rails 和 Compass 集成）
tasks/ 轉換器腳本（將上游的 Less 轉為 Sass）
test/ 編譯測試
templates/ 指南針包清單
vendor/assets/ Sass、JavaScript 和字體文件
Rakefile 內部任務，例如 rake 和 convert

訪問Sass 端口的 GitHub 存儲庫以查看這些文件的運行情況。

安裝

有關如何安裝和使用 Bootstrap for Sass 的信息，請參閱GitHub 存儲庫自述文件。它是最新的源代碼，包括用於 Rails、Compass 和標準 Sass 項目的信息。

Sass 的引導程序