【03】全局 CSS 樣式

時間  2019-11-29
標籤 全局 css 樣式 欄目 CSS 简体版
原文   原文鏈接

全局 CSS 樣式

設置全局 CSS 樣式；基本的 HTML 元素都可以經過 class 設置樣式並獲得加強效果；還有先進的柵格系統。css

概覽

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

HTML5 文檔類型

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. ...
  4. </html>
 

移動設備優先

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

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

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

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

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

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

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

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

Normalize.css

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

佈局容器

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

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

  1. 複製
  2. <div class="container">
  3. ...
  4. </div>
 

.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。

  1. 複製
  2. <div class="container-fluid">
  3. ...
  4. </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）來建立關鍵的分界點閾值。

  1. 複製
  2. /* 超小屏幕（手機，小於 768px） */
  3. /* 沒有任何媒體查詢相關的代碼，由於這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */
  5. /* 小屏幕（平板，大於等於 768px） */
  6. @media(min-width:@screen-sm-min){...}
  8. /* 中等屏幕（桌面顯示器，大於等於 992px） */
  9. @media(min-width:@screen-md-min){...}
  11. /* 大屏幕（大桌面顯示器，大於等於 1200px） */
  12. @media(min-width:@screen-lg-min){...}
 

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

  1. 複製
  2. @media(max-width:@screen-xs-max){...}
  3. @media(min-width:@screen-sm-min) and (max-width:@screen-sm-max){...}
  4. @media(min-width:@screen-md-min) and (max-width:@screen-md-max){...}
  5. @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 內。


 

  1. <divclass="row">
  2. <divclass="col-md-1">.col-md-1</div>
  3. <divclass="col-md-1">.col-md-1</div>
  4. <divclass="col-md-1">.col-md-1</div>
  5. <divclass="col-md-1">.col-md-1</div>
  6. <divclass="col-md-1">.col-md-1</div>
  7. <divclass="col-md-1">.col-md-1</div>
  8. <divclass="col-md-1">.col-md-1</div>
  9. <divclass="col-md-1">.col-md-1</div>
  10. <divclass="col-md-1">.col-md-1</div>
  11. <divclass="col-md-1">.col-md-1</div>
  12. <divclass="col-md-1">.col-md-1</div>
  13. <divclass="col-md-1">.col-md-1</div>
  14. </div>
  15. <divclass="row">
  16. <divclass="col-md-8">.col-md-8</div>
  17. <divclass="col-md-4">.col-md-4</div>
  18. </div>
  19. <divclass="row">
  20. <divclass="col-md-4">.col-md-4</div>
  21. <divclass="col-md-4">.col-md-4</div>
  22. <divclass="col-md-4">.col-md-4</div>
  23. </div>
  24. <divclass="row">
  25. <divclass="col-md-6">.col-md-6</div>
  26. <divclass="col-md-6">.col-md-6</div>
  27. </div>
 

 

實例：流式佈局容器

將最外面的佈局元素 .container 修改成 .container-fluid，就能夠將固定寬度的柵格佈局轉換爲 100% 寬度的佈局。

  1. <div class="container-fluid">
  2. <div class="row">
  3. ...
  4. </div>
  5. </div>
 

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

是否不但願在小屏幕設備上全部列都堆疊在一塊兒？那就使用針對超小屏幕和中等屏幕設備所定義的類吧，即 .col-xs-*和 .col-md-*。請看下面的實例，研究一下這些是如何工做的。


 

  1. <!--Stack the columns on mobile by making one full-width and the other half-width -->
  3. <div class="row">
  4. <div class="col-xs-12 col-md-8">.col-xs-12.col-md-8</div>
  5. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  6. </div>
  8. <!--Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  9. <div class="row">
  10. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  11. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  12. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  13. </div>
  15. <!--Columns are always 50% wide, on mobile and desktop -->
  16. <div class="row">
  17. <div class="col-xs-6">.col-xs-6</div>
  18. <div class="col-xs-6">.col-xs-6</div>
  19. </div>
 

 

實例：手機、平板、桌面

在上面案例的基礎上，經過使用針對平板設備的 .col-sm-* 類，咱們來建立更加動態和強大的佈局吧。

  1. <divclass="row">
  2. <divclass="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  3. <divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  4. </div>
  5. <divclass="row">
  6. <divclass="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  7. <divclass="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  8. <!-- Optional: clear the XS cols if their content doesn't match in height -->
  9. <divclass="clearfix visible-xs-block"></div>
  10. <divclass="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  11. </div>
 

實例：多餘的列（column）將另起一行排列

若是在一個 .row 內包含的列（column）大於12個，包含多餘列（column）的元素將做爲一個總體單元被另起一行排列。

 

 

  1. <divclass="row">
  2. <divclass="col-xs-9">.col-xs-9</div>
  3. <divclass="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>
  4. <divclass="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
  5. </div>
 

 

響應式列重置

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

  1. <divclass="row">
  2. <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  3. <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  5. <!-- Add the extra clearfix for only the required viewport -->
  6. <divclass="clearfix visible-xs-block"></div>
  8. <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  9. <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  10. </div>
 

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

  1. <divclass="row">
  2. <divclass="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  3. <divclass="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>
  4. </div>
  6. <divclass="row">
  7. <divclass="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  8. <divclass="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>
  9. </div>
 

使用 .col-md-offset-* 類能夠將列向右側偏移。這些類實際是經過使用 * 選擇器爲當前元素增長了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

 

列偏移

 
  1. <divclass="row">
  2. <divclass="col-md-4">.col-md-4</div>
  3. <divclass="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  4. </div>
  5. <divclass="row">
  6. <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  7. <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  8. </div>
  9. <divclass="row">
  10. <divclass="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  11. </div>
 

嵌套列

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

 

  1. <divclass="row">
  2. <divclass="col-sm-9">
  3. Level 1: .col-sm-9
  4. <divclass="row">
  5. <divclass="col-xs-8 col-sm-6">
  6. Level 2: .col-xs-8 .col-sm-6
  7. </div>
  8. <divclass="col-xs-4 col-sm-6">
  9. Level 2: .col-xs-4 .col-sm-6
  10. </div>
  11. </div>
  12. </div>
  13. </div>
 

 

列排序

經過使用 .col-md-push-* 和 .col-md-pull-* 類就能夠很容易的改變列（column）的順序。

 

  1. <divclass="row">
  2. <divclass="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  3. <divclass="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  4. </div>
 

 

Less mixin 和變量

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

變量

經過變量來定義列數、槽（gutter）寬、媒體查詢閾值（用於肯定合適讓列浮動）。咱們使用這些變量生成預約義的柵格類，如上所示，還有以下所示的定製 mixin。

  1. @grid-columns: 12;
  2. @grid-gutter-width: 30px;
  3. @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.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
複製 
<address><strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br><abbr title="Phone">P:</abbr> (123) 456-7890
</address><address><strong>Full Name</strong><br><a href="mailto:#">first.last@example.com</a></address>

引用

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

默認樣式的引用

將任何 HTML 元素包裹在 <blockquote> 中便可表現爲引用樣式。對於直接引用，咱們建議用 <p> 標籤。

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

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

多種引用樣式

對於標準樣式的 <blockquote>，能夠經過幾個簡單的變體就能改變風格和內容。

命名來源

添加 <footer> 用於標明引用來源。來源的名稱能夠包裹進 <cite>標籤中。

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

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

另外一種展現風格

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

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

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

列表

無序列表

排列順序可有可無的一列元素。

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

有序列表

順序相當重要的一組元素。

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

無樣式列表

移除了默認的 list-style 樣式和左側外邊距的一組元素（只針對直接子元素）。這是針對直接子元素的，也就是說，你須要對全部嵌套的列表都添加這個類才能具備一樣的樣式。

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

內聯列表

經過設置 display: inline-block; 並添加少許的內補（padding），將全部元素放置於同一行。

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

描述

帶有描述的短語列表。

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

水平排列的描述

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

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

自動截斷

經過 text-overflow 屬性，水平排列的描述列表將會截斷左側太長的短語。在較窄的視口（viewport）內，列表將變爲默認堆疊排列的佈局方式。

代碼

內聯代碼

經過 <code> 標籤包裹內聯樣式的代碼片斷。

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

用戶輸入

經過 <kbd> 標籤標記用戶經過鍵盤輸入的內容。=

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

代碼塊

多行代碼可使用 <pre> 標籤。爲了正確的展現代碼，注意將尖括號作轉義處理。

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

還可使用 .pre-scrollable 類，其做用是設置 max-height 爲 350px ，並在垂直方向展現滾動條。

變量

經過 <var> 標籤標記變量。

y = mx + b

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

程序輸出

經過 <samp> 標籤來標記程序輸出的內容。

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

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

表格

基本實例

爲任意 <table> 標籤添加 .table 類能夠爲其賦予基本的樣式 — 少許的內補（padding）和水平方向的分隔線。這種方式看起來不少餘！？可是咱們以爲，表格元素使用的很普遍，若是咱們爲其賦予默認樣式可能會影響例如日曆和日期選擇之類的插件，因此咱們選擇將此樣式獨立出來。

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

條紋狀表格

經過 .table-striped 類能夠給 <tbody> 以內的每一行增長斑馬條紋樣式。

跨瀏覽器兼容性

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

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

帶邊框的表格

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

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

鼠標懸停

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

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

緊縮表格

經過添加 .table-condensed 類可讓表格更加緊湊，單元格中的內補（padding）均會減半。

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

狀態類

經過這些狀態類能夠爲行或單元格設置顏色。

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

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

經過爲表格中的一行或一個單元格添加顏色而賦予不一樣的意義只是提供了一種視覺上的表現，並不能爲使用輔助技術 -- 例如屏幕閱讀器 -- 瀏覽網頁的用戶提供更多信息。所以，請確保經過顏色而賦予的不一樣意義能夠經過內容自己來表達（即在相應行或單元格中的可見的文本內容）；或者經過包含額外的方式 -- 例如應用了 .sr-only 類而隱藏的文本 -- 來表達出來。

響應式表格

將任何 .table 元素包裹在 .table-responsive 元素內，便可建立響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。

垂直方向的內容截斷

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

Firefox 和 fieldset 元素

Firefox 瀏覽器對 fieldset 元素設置了一些影響 width 屬性的樣式，致使響應式表格出現問題。除非使用咱們下面提供的針對 Firefox 的 hack 代碼，不然無解：

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

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

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

表單

基本實例

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

Example block-level help text here.

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

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

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

內聯表單

爲 <form> 元素添加 .form-inline 類可以使其內容左對齊而且表現爲 inline-block 級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單摺疊）。

可能須要手動設置寬度

在 Bootstrap 中，輸入框和單選/多選框控件默認被設置爲 width: 100%; 寬度。在內聯表單，咱們將這些元素的寬度設置爲 width: auto;，所以，多個控件能夠排列在同一行。根據你的佈局需求，可能須要一些額外的定製化組件。

必定要添加 label 標籤

若是你沒有爲每一個輸入控件設置 label 標籤，屏幕閱讀器將沒法正確識別。對於這些內聯表單，你能夠經過爲label 設置 .sr-only 類將其隱藏。還有一些輔助技術提供label標籤的替代方案，好比 aria-label、aria-labelledby 或 title 屬性。若是這些都不存在，屏幕閱讀器可能會採起使用 placeholder 屬性，若是存在的話，使用佔位符來替代其餘的標記，但要注意，這種方法是不穩當的。

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

水平排列的表單

經過爲表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，能夠將 label 標籤和控件組水平並排佈局。這樣作將改變 .form-group 的行爲，使其表現爲柵格系統中的行（row），所以就無需再額外添加 .row 了。

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

被支持的控件

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

輸入框

包括大部分表單控件、文本輸入域控件，還支持全部 HTML5 類型的輸入控件：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 屬性的單選或多選框都能被賦予合適的樣式。對於和多選或單選框聯合使用的 <label> 標籤，若是也但願將懸停於上方的鼠標設置爲「禁止點擊」的樣式，請將 .disabled 類賦予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。

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


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

內聯單選和多選框

經過將 .checkbox-inline 或 .radio-inline 類應用到一系列的多選框（checkbox）或單選框（radio）控件上，可使這些控件排列在一行。

   

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

不帶label文本的Checkbox 和 radio

若是須要 <label> 內沒有文字，輸入框（input）正是你說指望的。 目前只適用於非內聯的 checkbox 和 radio。 請記住，仍然須要爲使用輔助技術的用戶提供某種形式的 label（例如，使用 aria-label）。

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

下拉列表（select）

注意，不少原生選擇菜單 - 即在 Safari 和 Chrome 中 - 的圓角是沒法經過修改 border-radius 屬性來改變的。

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

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

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

靜態控件

若是須要在表單中將一行純文本和 label 元素放置於同一行，爲 <p> 元素添加 .form-control-static 類便可。

email@example.com

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

email@example.com

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

焦點狀態

咱們將某些表單控件的默認 outline 樣式移除，而後對 :focus 狀態賦予 box-shadow 屬性。

演示:focus 狀態

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

禁用狀態

爲輸入框設置 disabled 屬性能夠禁止其與用戶有任何交互（焦點、輸入等）。被禁用的輸入框顏色更淺，而且還添加了 not-allowed 鼠標狀態。

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

被禁用的 fieldset

爲<fieldset> 設置 disabled 屬性,能夠禁用 <fieldset> 中包含的全部控件。

<a> 標籤的連接功能不受影響

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

跨瀏覽器兼容性

雖然 Bootstrap 會將這些樣式應用到全部瀏覽器上，Internet Explorer 11 及如下瀏覽器中的 <fieldset> 元素並不徹底支持 disabled 屬性。所以建議在這些瀏覽器上經過 JavaScript 代碼來禁用 <fieldset>。

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

只讀狀態

爲輸入框設置 readonly 屬性能夠禁止用戶修改輸入框中的內容。處於只讀狀態的輸入框顏色更淺（就像被禁用的輸入框同樣），可是仍然保留標準的鼠標狀態。

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

校驗狀態

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

複製 
<div class="form-group has-success"><label class="control-label" for="inputSuccess1">Input with success</label><input type="text" class="form-control" id="inputSuccess1"></div><div class="form-group has-warning"><label class="control-label" for="inputWarning1">Input with warning</label><input type="text" class="form-control" id="inputWarning1"></div><div class="form-group has-error"><label class="control-label" for="inputError1">Input with error</label><input type="text" class="form-control" id="inputError1"></div><div class="has-success"><div class="checkbox"><label><input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label></div></div><div class="has-warning"><div class="checkbox"><label><input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label></div></div><div class="has-error"><div class="checkbox"><label><input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label></div></div>

添加額外的圖標

你還能夠針對校驗狀態爲輸入框添加額外的圖標。只需設置相應的 .has-feedback 類並添加正確的圖標便可。

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

圖標、label 和輸入控件組

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

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

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

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

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

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

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

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

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

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

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

控件尺寸

經過 .input-lg 相似的類能夠爲控件設置高度，經過 .col-lg-* 相似的類能夠爲控件設置寬度。

高度尺寸

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

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

水平排列的表單組的尺寸

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

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

調整列（column）尺寸

用柵格系統中的列（column）包裹輸入框或其任何父元素，均可很容易的爲其設置寬度。

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

輔助文本

針對表單控件的「塊（block）」級輔助文本。

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

與表單控件相關聯的幫助文本 aria-describedby 屬性的表單控件關聯，這將確保使用輔助技術- 如屏幕閱讀器 - 的用戶獲取控件焦點或進入控制時顯示這個幫助文本。

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>

按鈕

可做爲按鈕使用的標籤或元素

爲 <a>、<button> 或 <input> 元素添加按鈕類（button class）便可使用 Bootstrap 提供的樣式。

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

針對組件的注意事項

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

連接被做爲按鈕使用時的注意事項

若是 <a> 元素被做爲按鈕使用 -- 並用於在當前頁面觸發某些功能 -- 而不是用於連接其餘頁面或連接當前頁面中的其餘部分，那麼，務必爲其設置 role="button" 屬性。

跨瀏覽器展示

咱們總結的最佳實踐是：強烈建議儘量使用 <button> 元素來得到在各個瀏覽器上得到相匹配的繪製效果。

另外，咱們還發現了 Firefox <30 版本的瀏覽器上出現的一個 bug，其表現是：阻止咱們爲基於 <input> 元素所建立的按鈕設置 line-height 屬性，這就致使在 Firefox 瀏覽器上不能徹底和其餘按鈕保持一致的高度。

預約義樣式

使用下面列出的類能夠快速建立一個帶有預約義樣式的按鈕。

         
複製 
<!-- Standard button --><button type="button" class="btn btn-default">（默認樣式）Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons --><button type="button" class="btn btn-primary">（首選項）Primary</button><!-- Indicates a successful or positive action --><button type="button" class="btn btn-success">（成功）Success</button><!-- Contextual button for informational alert messages --><button type="button" class="btn btn-info">（通常信息）Info</button><!-- Indicates caution should be taken with this action --><button type="button" class="btn btn-warning">（警告）Warning</button><!-- Indicates a dangerous or potentially negative action --><button type="button" class="btn btn-danger">（危險）Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior --><button type="button" class="btn btn-link">（連接）Link</button>

Conveying meaning to assistive technologies

爲按鈕添加不一樣的顏色只是一種視覺上的信息表達方式，可是，對於使用輔助技術 -- 例如屏幕閱讀器 -- 的用戶來講，顏色是不可見的。建議，確保經過顏色表達的信息或者經過內容自身表達出來（按鈕上的文字），或者經過其餘方式 -- 例如經過 .sr-only 類隱藏的額外文本 -- 表達出來。

尺寸

須要讓按鈕具備不一樣尺寸嗎？使用 .btn-lg、.btn-sm 或 .btn-xs 就能夠得到不一樣尺寸的按鈕。

 

 

 

 

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

經過給按鈕添加 .btn-block 類能夠將其拉伸至父元素100%的寬度，並且按鈕也變爲了塊級（block）元素。

複製 
<button type="button" class="btn btn-primary btn-lg btn-block">（塊級元素）Block level button</button><button type="button" class="btn btn-default btn-lg btn-block">（塊級元素）Block level button</button>

激活狀態

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

button 元素

因爲 :active 是僞狀態，所以無需額外添加，可是在須要讓其表現出一樣外觀的時候能夠添加 .active 類。

 

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

連接（<a>）元素

能夠爲基於 <a> 元素建立的按鈕添加 .active 類。

Primary link Link

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

禁用狀態

經過爲按鈕的背景設置 opacity 屬性就能夠呈現出沒法點擊的效果。

button 元素

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

 

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

跨瀏覽器兼容性

若是爲 <button> 元素添加 disabled 屬性，Internet Explorer 9 及更低版本的瀏覽器將會把按鈕中的文本繪製爲灰色，並帶有噁心的陰影，目前咱們尚未解決辦法。

連接（<a>）元素

爲基於 <a> 元素建立的按鈕添加 .disabled 類。

Primary link Link

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

咱們把 .disabled 做爲工具類使用，就像 .active 類同樣，所以不須要增長前綴。

連接的原始功能不受影響

上面提到的類只是經過設置 pointer-events: none 來禁止 <a> 元素做爲連接的原始功能，可是，這一 CSS 屬性並無被標準化，而且 Opera 18 及更低版本的瀏覽器並無徹底支持這一屬性，一樣，Internet Explorer 11 也不支持。In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. 所以，爲了安全起見，建議經過 JavaScript 代碼來禁止連接的原始功能。

圖片

響應式圖片

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

若是須要讓使用了 .img-responsive 類的圖片水平居中，請使用 .center-block 類，不要用 .text-center。 請參考助手類章節 瞭解更多關於 .center-block 的用法。

SVG 圖像和 IE 8-10

在 Internet Explorer 8-10 中，設置爲 .img-responsive 的 SVG 圖像顯示出的尺寸不勻稱。爲了解決這個問題，在出問題的地方添加 width: 100% \9; 便可。Bootstrap 並無自動爲全部圖像元素設置這一屬性，由於這會致使其餘圖像格式出現錯亂。

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

圖片形狀

經過爲 <img> 元素添加如下相應的類，可讓圖片呈現不一樣的形狀。

跨瀏覽器兼容性

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

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

輔助類

情境文本顏色

經過顏色來展現意圖，Bootstrap 提供了一組工具類。這些類能夠應用於連接，而且在鼠標通過時顏色能夠還能夠加深，就像默認的連接同樣。

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

處理差別

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

Conveying meaning to assistive technologies

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

情境背景色

和情境文本顏色類同樣，使用任意情境背景色類就能夠設置元素的背景。連接組件在鼠標通過時顏色會加深，就像上面所講的情境文本顏色類同樣。

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

處理差別

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

Conveying meaning to assistive technologies

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

關閉按鈕

經過使用一個象徵關閉的圖標，可讓模態框和警告框消失。

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

三角符號

經過使用三角符號能夠指示某個元素具備下拉菜單的功能。注意，向上彈出式菜單中的三角符號是反方向的。

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

快速浮動

經過添加一個類，能夠將任意元素向左或向右浮動。!important 被用來明確 CSS 樣式的優先級。這些類還能夠做爲 mixin（參見 less 文檔） 使用。

複製 
<div class="pull-left">...</div><div class="pull-right">...</div>
複製 
// Classes .pull-left {float: left !important;}.pull-right {float: right !important;}// Usage as mixins .element {.pull-left();}.another-element {.pull-right();}

不能用於導航條組件中

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

讓內容塊居中

爲任意元素設置 display: block 屬性並經過 margin 屬性讓其中的內容居中。下面列出的類還能夠做爲 mixin 使用。

複製 
<div class="center-block">...</div>
複製 
// Class .center-block {
display: block;
margin-left: auto
;margin-right: auto;
}// Usage as a mixin .element 
{
.center-block();
}

清除浮動

經過爲父元素添加 .clearfix 類能夠很容易地清除浮動（float）。這裏所使用的是 Nicolas Gallagher 創造的 micro clearfix 方式。此類還能夠做爲 mixin 使用。

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

顯示或隱藏內容

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

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

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

複製 
<div class="show">...</div>
<div class="hidden">...</div>
複製 
// Classes .show {display: block !important;}
.hidden {display: none !important;}
.invisible {visibility: hidden;}// Usage as mixins .element {.show();}
.another-element {.hidden();}

屏幕閱讀器和鍵盤導航

.sr-only 類能夠對屏幕閱讀器之外的設備隱藏內容。.sr-only 和 .sr-only-focusable 聯合使用的話能夠在元素有焦點的時候再次顯示出來（例如，使用鍵盤導航的用戶）。對於遵循 可訪問性的最佳實踐 頗有必要。這個類也能夠做爲 mixin 使用。

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

圖片替換

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

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

響應式工具

爲了加快對移動設備友好的頁面開發工做，利用媒體查詢功能並使用這些工具類能夠方便的針對不一樣設備展現或隱藏頁面內容。另外還包含了針對打印機顯示或隱藏內容的工具類。

有針對性的使用這類工具類，從而避免爲同一個網站建立徹底不一樣的版本。相反，經過使用這些工具類能夠在不一樣設備上提供不一樣的展示形式。

可用的類

經過單獨或聯合使用如下列出的類，能夠針對不一樣屏幕尺寸隱藏或顯示頁面內容。

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

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

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

所以，以超小屏幕（xs）爲例，可用的 .visible-*-* 類是：.visible-xs-block、.visible-xs-inline 和.visible-xs-inline-block。

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

打印類

和常規的響應式類同樣，使用下面的類能夠針對打印機隱藏或顯示某些內容。

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

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

測試用例

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

在...上可見

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

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

在...上隱藏

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

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

使用 Less

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

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

編譯 Bootstrap

能夠經過兩種方式使用 Bootstrap ：使用編譯後的 CSS 文件或者使用 Less 源碼文件。若要編譯 Less 文件，請參考「起步」章節的內容以瞭解如何設置開發環境並運行必須的編譯指令。

變量

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

顏色

Bootstrap 使用了兩種顏色模式：灰度顏色和語義顏色。灰度顏色用於快速獲取經常使用的黑色色調；語義顏色包含了各類賦予語義的顏色值。

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

你在項目中可使用這些預約義的顏色變量，或者從新爲其賦予別名，使其更有語義。

  1. // Use as-is
  2. .masthead {
  3. background-color:@brand-primary;
  4. }
  6. // Reassigned variables in Less
  7. @alert-message-background:@brand-info;
  8. .alert {
  9. background-color:@alert-message-background;
  10. }
 
 

Scaffolding

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

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

僅僅經過改變一個變量，能夠很容易地爲連接賦予正確的顏色。

  1. // Variables
  2. @link-color:@brand-primary;
  3. @link-hover-color: darken(@link-color,15%);
  5. // Usage
  6. a {
  7. color:@link-color;
  8. text-decoration: none;
  10. &:hover {
  11. color:@link-hover-color;
  12. text-decoration: underline;
  13. }
  14. }
 
 

注意：@link-hover-color 使用了 Less 提供的一個內置函數，用於自動爲鼠標懸停設置合適的顏色。你還可使用darken、lighten、saturate 和 desaturate 等 Less 內置的函數。

排版

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

  1. 複製
  2. @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
  3. @font-size-small: ceil((@font-size-base *0.85));// ~12px
  4. @font-size-h1: floor((@font-size-base *2.6));// ~36px
  5. @font-size-h2: floor((@font-size-base *2.15));// ~30px
  6. @font-size-h3: ceil((@font-size-base *1.7));// ~24px
  7. @font-size-h4: ceil((@font-size-base *1.25));// ~18px
  8. @font-size-h5:@font-size-base;@font-size-h6: ceil((@font-size-base *0.85));// ~12px
  9. @line-height-base:1.428571429;// 20/14
  10. @line-height-computed: floor((@font-size-base *@line-height-base));// ~20px
  11. @headings-font-family: inherit;@headings-font-weight:500;@headings-line-height:1.1;@headings-color: inherit;
 

圖標

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

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

組件

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

  1. @padding-base-vertical: 6px;
  2. @padding-base-horizontal: 12px;
  4. @padding-large-vertical: 10px;
  5. @padding-large-horizontal: 16px;
  7. @padding-small-vertical: 5px;
  8. @padding-small-horizontal: 10px;
  10. @padding-xs-vertical: 1px;
  11. @padding-xs-horizontal: 5px;
  13. @line-height-large: 1.33;
  14. @line-height-small: 1.5;
  16. @border-radius-base: 4px;
  17. @border-radius-large: 6px;
  18. @border-radius-small: 3px;
  20. @component-active-color: #fff;
  21. @component-active-bg: @brand-primary;
  23. @caret-width-base: 4px;
  24. @caret-width-large: 5px;
 

特定瀏覽器廠商的 mixin

特定瀏覽器廠商的 mixin 用於爲不一樣廠商的瀏覽器使用相應的 CSS 屬性前綴來支持各廠商的瀏覽器。

Box-sizing

經過這一個 mixin 來爲全部組件設置盒模型。請參考這篇 來自 Mozilla 的文章。

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

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

圓角

如今，全部現代瀏覽器都支持不帶廠商前綴的 border-radius 屬性了。有鑑於此，咱們沒有提供 .border-radius()mixin，可是，Bootstrap does 提供了用於快速設置同一側圓角的 mixin 。

  1. .border-top-radius(@radius) {
  2. border-top-right-radius: @radius;
  3. border-top-left-radius: @radius;
  4. }
  5. .border-right-radius(@radius) {
  6. border-bottom-right-radius: @radius;
  7. border-top-right-radius: @radius;
  8. }
  9. .border-bottom-radius(@radius) {
  10. border-bottom-right-radius: @radius;
  11. border-bottom-left-radius: @radius;
  12. }
  13. .border-left-radius(@radius) {
  14. border-bottom-left-radius: @radius;
  15. border-top-left-radius: @radius;
  16. }
 

Box (Drop) 隱形

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

因爲 Bootstrap 並未官方提供對過期（不支持標準屬性）平臺的支持，此 mixin 從 v3.1.0 版本期就 不建議使用 了。爲了保持向後兼容，Bootstrap 將繼續在內部使用此 mixin， 直到 Bootstrap v4。

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

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

過渡效果

有多個 mixin 供你靈活使用。能夠一次性設置全部的過渡效果的屬性，或者根據須要只是指定延時和持續時間。

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

  1. .transition(@transition) {
  2. -webkit-transition: @transition;
  3. transition: @transition;
  4. }
  5. .transition-property(@transition-property) {
  6. -webkit-transition-property: @transition-property;
  7. transition-property: @transition-property;
  8. }
  9. .transition-delay(@transition-delay) {
  10. -webkit-transition-delay: @transition-delay;
  11. transition-delay: @transition-delay;
  12. }
  13. .transition-duration(@transition-duration) {
  14. -webkit-transition-duration: @transition-duration;
  15. transition-duration: @transition-duration;
  16. }
  17. .transition-timing-function(@timing-function) {
  18. -webkit-transition-timing-function: @timing-function;
  19. transition-timing-function: @timing-function;
  20. }
  21. .transition-transform(@transition) {
  22. -webkit-transition: -webkit-transform @transition;
  23. -moz-transition: -moz-transform @transition;
  24. -o-transition: -o-transform @transition;
  25. transition: transform @transition;
  26. }
 

變形

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

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

  1. .rotate(@degrees) {
  2. -webkit-transform: rotate(@degrees);
  3. -ms-transform: rotate(@degrees); // IE9 only
  4. transform: rotate(@degrees);
  5. }
  6. .scale(@ratio; @ratio-y...) {
  7. -webkit-transform: scale(@ratio, @ratio-y);
  8. -ms-transform: scale(@ratio, @ratio-y); // IE9 only
  9. transform: scale(@ratio, @ratio-y);
  10. }
  11. .translate(@x; @y) {
  12. -webkit-transform: translate(@x, @y);
  13. -ms-transform: translate(@x, @y); // IE9 only
  14. transform: translate(@x, @y);
  15. }
  16. .skew(@x; @y) {
  17. -webkit-transform: skew(@x, @y);
  18. -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
  19. transform: skew(@x, @y);
  20. }
  21. .translate3d(@x; @y; @z) {
  22. -webkit-transform: translate3d(@x, @y, @z);
  23. transform: translate3d(@x, @y, @z);
  24. }
  26. .rotateX(@degrees) {
  27. -webkit-transform: rotateX(@degrees);
  28. -ms-transform: rotateX(@degrees); // IE9 only
  29. transform: rotateX(@degrees);
  30. }
  31. .rotateY(@degrees) {
  32. -webkit-transform: rotateY(@degrees);
  33. -ms-transform: rotateY(@degrees); // IE9 only
  34. transform: rotateY(@degrees);
  35. }
  36. .perspective(@perspective) {
  37. -webkit-perspective: @perspective;
  38. -moz-perspective: @perspective;
  39. perspective: @perspective;
  40. }
  41. .perspective-origin(@perspective) {
  42. -webkit-perspective-origin: @perspective;
  43. -moz-perspective-origin: @perspective;
  44. perspective-origin: @perspective;
  45. }
  46. .transform-origin(@origin) {
  47. -webkit-transform-origin: @origin;
  48. -moz-transform-origin: @origin;
  49. -ms-transform-origin: @origin; // IE9 only
  50. transform-origin: @origin;
  51. }
 

動畫

僅適用一個 mixin 就能夠在一個聲明中使用全部 CSS3 所提供的動畫屬性，其餘 mixin 用於設置單個屬性。

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

  1. .animation(@animation) {
  2. -webkit-animation: @animation;
  3. animation: @animation;
  4. }
  5. .animation-name(@name) {
  6. -webkit-animation-name: @name;
  7. animation-name: @name;
  8. }
  9. .animation-duration(@duration) {
  10. -webkit-animation-duration: @duration;
  11. animation-duration: @duration;
  12. }
  13. .animation-timing-function(@timing-function) {
  14. -webkit-animation-timing-function: @timing-function;
  15. animation-timing-function: @timing-function;
  16. }
  17. .animation-delay(@delay) {
  18. -webkit-animation-delay: @delay;
  19. animation-delay: @delay;
  20. }
  21. .animation-iteration-count(@iteration-count) {
  22. -webkit-animation-iteration-count: @iteration-count;
  23. animation-iteration-count: @iteration-count;
  24. }
  25. .animation-direction(@direction) {
  26. -webkit-animation-direction: @direction;
  27. animation-direction: @direction;
  28. }
 

透明度

爲全部瀏覽器設置透明度，併爲IE8提供 filter 備用濾鏡。

  1. .opacity(@opacity) {
  2. opacity: @opacity;
  3. // IE8 filter
  4. @opacity-ie: (@opacity * 100);
  5. filter: ~"alpha(opacity=@{opacity-ie})";
  6. }
 

佔位符文本

爲表單控件中每一個文本域提供佔位符（Placeholder）文本的顏色。

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

列

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

  1. .content-columns(@width; @count; @gap) {
  2. -webkit-column-width: @width;
  3. -moz-column-width: @width;
  4. column-width: @width;
  5. -webkit-column-count: @count;
  6. -moz-column-count: @count;
  7. column-count: @count;
  8. -webkit-column-gap: @gap;
  9. -moz-column-gap: @gap;
  10. column-gap: @gap;
  11. }
 

漸變

便於把任何兩種顏色變成背景漸變色。想要使他更高級些，能夠設置一個direction（方向），使用三種顏色，也可使用徑向（radial）漸變。使用一個mixin（混入），你就能夠獲得全部須要的前綴語法。

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

你也能夠爲標準的裏兩顏色線性漸變指定角度：

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

若是你須要一個條紋風格的漸變，這也很容易。只要指定一個顏色，咱們將該顏色半透明的條紋覆蓋其上。

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

再來試試三種顏色。利用此 mixin ，併爲其設置第一種顏色、第二種顏色、第二種顏色的色標（例如 25%），還有第三種顏色：

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

小心！ 若是你想刪除某個漸變，確保將你所添加的針對 IE 的 filter 一併刪除。你能夠經過使用 .reset-filter()mixin 和 background-image: none; 達到目的。

實用工具 mixin

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

Clearfix -- 清除浮動

建議爲須要清除浮動的元素使用 .clearfix() mixin ，儘可能不要直接添加 class="clearfix" 類。基於 Nicolas Gallagher 的 micro clearfix 代碼。

  1. // Mixin
  2. .clearfix() {
  3. &:before,
  4. &:after {
  5. content: " ";
  6. display: table;
  7. }
  8. &:after {
  9. clear: both;
  10. }
  11. }
  13. // Usage
  14. .container {
  15. .clearfix();
  16. }
 

水平居中

讓元素在其父元素中水平居中。須要設置 width 或 max-width 屬性。

  1. // Mixin
  2. .center-block() {
  3. display: block;
  4. margin-left: auto;
  5. margin-right: auto;
  6. }
  8. // Usage
  9. .container {
  10. width: 940px;
  11. .center-block();
  12. }
 

尺寸助手 mixin

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

  1. // Mixins
  2. .size(@width; @height) {
  3. width: @width;
  4. height: @height;
  5. }
  6. .square(@size) {
  7. .size(@size; @size);
  8. }
  10. // Usage
  11. .image { .size(400px; 300px); }
  12. .avatar { .square(48px); }
 

可調整大小的文本域

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

  1. .resizable(@direction: both) {
  2. // Options: horizontal, vertical, both
  3. resize: @direction;
  4. // Safari fix
  5. overflow: auto;
  6. }
 

 

 

 

截斷文本

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

  1. // Mixin
  2. .text-overflow() {
  3. overflow: hidden;
  4. text-overflow: ellipsis;
  5. white-space: nowrap;
  6. }
  8. // Usage
  9. .branch-name {
  10. display: inline-block;
  11. max-width: 200px;
  12. .text-overflow();
  13. }
 

視網膜屏幕（Retina）下的圖片

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

 

  1. .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  2. background-image: url("@{file-1x}");
  4. @media
  5. only screen and (-webkit-min-device-pixel-ratio: 2),
  6. only screen and ( min--moz-device-pixel-ratio: 2),
  7. only screen and ( -o-min-device-pixel-ratio: 2/1),
  8. only screen and ( min-device-pixel-ratio: 2),
  9. only screen and ( min-resolution: 192dpi),
  10. only screen and ( min-resolution: 2dppx) {
  11. background-image: url("@{file-2x}");
  12. background-size: @width-1x @height-1x;
  13. }
  14. }
  16. // Usage
  17. .jumbotron {
  18. .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
  19. }
 

 

使用 Sass

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

包含的內容

因爲 Sass 移植版存放於單獨的倉庫，並針對不一樣的使用羣體，這個項目中的內容與 Bootstrap 主項目有很大不一樣。這也是爲了保證 Sass 移植版與更多基於 Sass 的系統相兼容。

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

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

安裝

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

Bootstrap for Sass

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