前端之Bootstrap框架

時間  2019-11-12
標籤 前端 bootstrap 框架 欄目 Bootstarp 简体版
原文   原文鏈接

前端之Bootstrap框架

概覽

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

HTML5 文檔類型

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

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

移動設備優先

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

爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤。html5

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

在移動設備瀏覽器上，經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感受。注意，這種方式咱們並不推薦全部網站使用，仍是要看你本身的狀況而定！ios

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

排版與連接

Bootstrap 排版、連接樣式設置了基本的全局樣式。分別是：git

  • 爲 body 元素設置 background-color: #fff;
  • 使用 @font-family-base、@font-size-base 和 @line-height-base 變量做爲排版的基本參數
  • 爲全部連接設置了基本顏色 @link-color ，而且當連接處於 :hover 狀態時才添加下劃線

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

Normalize.css

爲了加強跨瀏覽器表現的一致性，咱們使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。web

佈局容器

Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種 容器類不能互相嵌套。編程

.container 類用於固定寬度並支持響應式佈局的容器。bootstrap

<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 設置爲 14px，line-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-7890Full 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）和水平方向的分隔線。這種方式看起來不少餘！？可是咱們以爲，表格元素使用的很普遍，若是咱們爲其賦予默認樣式可能會影響例如日曆和日期選擇之類的插件，因此咱們選擇將此樣式獨立出來。

# 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 中能夠得到最好的排列。

Email address

Password

File input

Example block-level help text here.

Check me out

<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-label、aria-labelledby 或 title 屬性。若是這些都不存在，屏幕閱讀器可能會採起使用 placeholder 屬性，若是存在的話，使用佔位符來替代其餘的標記，但要注意，這種方法是不穩當的。

Name

Email

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

Email address

Password

Remember me

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

Amount (in dollars)

$

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

Email

Password

Remember me

Sign in

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

多選和單選框

多選框（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.

默認外觀（堆疊在一塊兒）

Option one is this and that—be sure to include why it's great

Option two is disabled

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

<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）控件上，可使這些控件排列在一行。

1 2 3
1 2 3

<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 屬性來改變的。

​ 1 2 3 4 5

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

對於標記了 multiple 屬性的 <select> 控件來講，默認顯示多選項。

​ 1 2 3 4 5

<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

email@example.com

Password

<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

email@example.com

Password

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

Disabled input

Disabled select menu Disabled select

Can't check this

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

Input with help text

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" 屬性。

Input with successA block of help text that breaks onto a new line and may extend beyond one line.

Input with warning

Input with error

Checkbox with success

Checkbox with warning

Checkbox with error

<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）只能使用在文本輸入框 元素上。

圖標、label 和輸入控件組

對於不帶有 label 標籤的輸入框以及右側帶有附加組件的輸入框組，須要手動爲其圖標定位。爲了讓全部用戶都能訪問你的網站，咱們強烈建議爲全部輸入框添加 label 標籤。若是你不但願將 label 標籤展現出來，能夠經過添加 .sr-only 類來實現。若是的確不能添加 label 標籤，請調整圖標的 top 值。對於輸入框組，請根據你的實際狀況調整 right 值。

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

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

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

Input with success(success)

Input with warning(warning)

Input with error(error)

Input group with success

@

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

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

Input with success

(success)

Input group with 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>

Input with success (success)

Input group with 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 會自動調整圖標的位置。

Hidden label(success)

Input group with 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-lg Default select .input-sm

<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 元素和表單控件快速設置尺寸。

Large label

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

<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" 屬性。

跨瀏覽器展示

咱們總結的最佳實踐是：強烈建議儘量使用

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程