概覽
深入了解 Bootstrap 底層結(jié)構(gòu)的關(guān)鍵部分，包括我們讓 web 開(kāi)發(fā)變得更好、更快、更強(qiáng)壯的最佳實(shí)踐。
HTML5 文檔類型
Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁(yè)面設(shè)置為 HTML5 文檔類型。在你項(xiàng)目中的每個(gè)頁(yè)面都要參照下面的格式進(jìn)行設(shè)置。
Copy
<!DOCTYPE html><html lang="zh-CN"> ...</html>
移動(dòng)設(shè)備優(yōu)先
在 Bootstrap 2 中，我們對(duì)框架中的某些關(guān)鍵部分增加了對(duì)移動(dòng)設(shè)備友好的樣式。而在 Bootstrap 3 中，我們重寫(xiě)了整個(gè)框架，使其一開(kāi)始就是對(duì)移動(dòng)設(shè)備友好的。這次不是簡(jiǎn)單的增加一些可選的針對(duì)移動(dòng)設(shè)備的樣式，而是直接融合進(jìn)了框架的內(nèi)核中。也就是說(shuō)，Bootstrap 是移動(dòng)設(shè)備優(yōu)先的。針對(duì)移動(dòng)設(shè)備的樣式融合進(jìn)了框架的每個(gè)角落，而不是增加一個(gè)額外的文件。
為了確保適當(dāng)?shù)睦L制和觸屏縮放，需要在 <head> 之中添加 viewport 元數(shù)據(jù)標(biāo)簽。
Copy
<meta name="viewport" content="width=device-width, initial-scale=1">
在移動(dòng)設(shè)備瀏覽器上，通過(guò)為視口（viewport）設(shè)置 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。這樣禁用縮放功能后，用戶只能滾動(dòng)屏幕，就能讓你的網(wǎng)站看上去更像原生應(yīng)用的感覺(jué)。注意，這種方式我們并不推薦所有網(wǎng)站使用，還是要看你自己的情況而定！
Copy
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
排版與鏈接
Bootstrap 排版、鏈接樣式設(shè)置了基本的全局樣式。分別是：
為 body 元素設(shè)置 background-color: #fff;
使用 @font-family-base、@font-size-base 和 @line-height-base a變量作為排版的基本參數(shù)
為所有鏈接設(shè)置了基本顏色 @link-color ，并且當(dāng)鏈接處于 :hover 狀態(tài)時(shí)才添加下劃線
這些樣式都能在 scaffolding.less 文件中找到對(duì)應(yīng)的源碼。
Normalize.css
為了增強(qiáng)跨瀏覽器表現(xiàn)的一致性，我們使用了
Normalize.css，這是由
Nicolas Gallagher 和
Jonathan Neal 維護(hù)的一個(gè)CSS 重置樣式庫(kù)。
布局容器
Bootstrap 需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè) .container 容器。我們提供了兩個(gè)作此用處的類。注意，由于 padding 等屬性的原因，這兩種 容器類不能互相嵌套。
.container 類用于固定寬度并支持響應(yīng)式布局的容器。
Copy
<div class="container"> ...</div>
.container-fluid 類用于 100% 寬度，占據(jù)全部視口（viewport）的容器。
Copy
<div class="container-fluid"> ...</div>
柵格系統(tǒng)
Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的，還有強(qiáng)大的。
簡(jiǎn)介
柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下 Bootstrap 柵格系統(tǒng)的工作原理：
“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。
通過(guò)“行（row）”在水平方向創(chuàng)建一組“列（column）”。
你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。
類似 .row 和 .col-xs-4 這種預(yù)定義的類，可以用來(lái)快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來(lái)創(chuàng)建語(yǔ)義化的布局。
通過(guò)為“列（column）”設(shè)置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過(guò)為 .row 元素設(shè)置負(fù)值 margin 從而抵消掉為 .container 元素設(shè)置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列。
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
通過(guò)研究后面的實(shí)例，可以將這些原理應(yīng)用到你的代碼中。
媒體查詢
在柵格系統(tǒng)中，我們?cè)?Less 文件中使用以下媒體查詢（media query）來(lái)創(chuàng)建關(guān)鍵的分界點(diǎn)閾值。
Copy
/* 超小屏幕（手機(jī)，小于 768px） *//* 沒(méi)有任何媒體查詢相關(guān)的代碼，因?yàn)檫@在 Bootstrap 中是默認(rèn)的（還記得 Bootstrap 是移動(dòng)設(shè)備優(yōu)先的嗎？） *//* 小屏幕（平板，大于等于 768px） */@media (min-width: @screen-sm-min) { ... }/* 中等屏幕（桌面顯示器，大于等于 992px） */@media (min-width: @screen-md-min) { ... }/* 大屏幕（大桌面顯示器，大于等于 1200px） */@media (min-width: @screen-lg-min) { ... }
我們偶爾也會(huì)在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小范圍的屏幕大小之內(nèi)。
Copy
@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) { ... }
柵格參數(shù)
通過(guò)下表可以詳細(xì)查看 Bootstrap 的柵格系統(tǒng)是如何在多種屏幕設(shè)備上工作的。
超小屏幕 手機(jī) (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面顯示器 (≥992px) 大屏幕 大桌面顯示器 (≥1200px)
柵格系統(tǒng)行為 總是水平排列 開(kāi)始是堆疊在一起的，當(dāng)大于這些閾值時(shí)將變?yōu)樗脚帕蠧
.container 最大寬度 None （自動(dòng)） 750px 970px 1170px
類前綴 .col-xs- .col-sm- .col-md- .col-lg-
列（column）數(shù) 12
最大列（column）寬 自動(dòng) ~62px ~81px ~97px
槽（gutter）寬 30px （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是
實(shí)例：從堆疊到水平排列
使用單一的一組 .col-md-* 柵格類，就可以創(chuàng)建一個(gè)基本的柵格系統(tǒng)，在手機(jī)和平板設(shè)備上一開(kāi)始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設(shè)備上變?yōu)樗脚帕小Ｋ小傲校╟olumn）必須放在 ” .row 內(nèi)。
.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
Copy
<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>
實(shí)例：流式布局容器
將最外面的布局元素 .container 修改為 .container-fluid，就可以將固定寬度的柵格布局轉(zhuǎn)換為 100% 寬度的布局。
Copy
<div class="container-fluid"> <div class="row"> ... </div></div>
實(shí)例：移動(dòng)設(shè)備和桌面屏幕
是否不希望在小屏幕設(shè)備上所有列都堆疊在一起？那就使用針對(duì)超小屏幕和中等屏幕設(shè)備所定義的類吧，即 .col-xs-* 和 .col-md-*。請(qǐng)看下面的實(shí)例，研究一下這些是如何工作的。
.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
Copy
<!-- 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>
實(shí)例：手機(jī)、平板、桌面
在上面案例的基礎(chǔ)上，通過(guò)使用針對(duì)平板設(shè)備的 .col-sm-* 類，我們來(lái)創(chuàng)建更加動(dòng)態(tài)和強(qiáng)大的布局吧。
.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
Copy
<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>
實(shí)例：多余的列（column）將另起一行排列
如果在一個(gè) .row 內(nèi)包含的列（column）大于12個(gè)，包含多余列（column）的元素將作為一個(gè)整體單元被另起一行排列。
.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.
Copy
<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 > 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>
Responsive column resets
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our .
.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
Copy
<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>
In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in
the grid example.
Copy
<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-* 類可以將列向右側(cè)偏移。這些類實(shí)際是通過(guò)使用 * 選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側(cè)偏移了4個(gè)列（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
Copy
<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>
嵌套列
為了使用內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套，可以通過(guò)添加一個(gè)新的 .row 元素和一系列 .col-sm-* 元素到已經(jīng)存在的 .col-sm-* 元素內(nèi)。被嵌套的行（row）所包含的列（column）的個(gè)數(shù)不能超過(guò)12（其實(shí)，沒(méi)有要求你必須占滿12列）。
Level 1: .col-sm-9 Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
Copy
<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>
列排序
通過(guò)使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
Copy
<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 用于幫你生成簡(jiǎn)單、語(yǔ)義化的布局。
變量
通過(guò)變量來(lái)定義列數(shù)、槽（gutter）寬、媒體查詢閾值（用于確定合適讓列浮動(dòng)）。我們使用這些變量生成預(yù)定義的柵格類，如上所示，還有如下所示的定制 mixin。
Copy
@grid-columns: 12;@grid-gutter-width: 30px;@grid-float-breakpoint: 768px;
mixin
mixin 用來(lái)和柵格變量一同使用，為每個(gè)列（column）生成語(yǔ)義化的 CSS 代碼。
Copy
// 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)); }}
實(shí)例展示
你可以重新修改這些變量的值，或者用默認(rèn)值調(diào)用這些 mixin。下面就是一個(gè)利用默認(rèn)設(shè)置生成兩列布局（列之間有間隔）的案例。
Copy
.wrapper { .make-row();}.content-main { .make-lg-column(8);}.content-secondary { .make-lg-column(3); .make-lg-column-offset(1);}
Copy
<div class="wrapper"> <div class="content-main">...</div> <div class="content-secondary">...</div></div>
排版
標(biāo)題
HTML 中的所有標(biāo)題標(biāo)簽，<h1> 到 <h6> 均可使用。另外，還提供了 .h1 到 .h6 類，為的是給內(nèi)聯(lián)（inline）屬性的文本賦予標(biāo)題的樣式。
Copy
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>
在標(biāo)題內(nèi)還可以包含 <small> 標(biāo)簽或賦予 .small 類的元素，可以用來(lái)標(biāo)記副標(biāo)題。
Copy
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>
頁(yè)面主體
Bootstrap 將全局 font-size 設(shè)置為 14px，line-height 設(shè)置為 1.428。這些屬性直接賦予 <body> 元素和所有段落元素。另外，<p> （段落）元素還被設(shè)置了等于 1/2 行高（即 10px）的底部外邊距（margin）。
Copy
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>
中心內(nèi)容
通過(guò)添加 .lead 類可以讓段落突出顯示。
Copy
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
使用 Less 工具構(gòu)建
variables.less 文件中定義的兩個(gè) Less 變量決定了排版尺寸：@font-size-base 和 @line-height-base。第一個(gè)變量定義了全局 font-size 基準(zhǔn)，第二個(gè)變量是 line-height 基準(zhǔn)。我們使用這些變量和一些簡(jiǎn)單的公式計(jì)算出其它所有頁(yè)面元素的 margin、 padding 和 line-height。自定義這些變量即可改變 Bootstrap 的默認(rèn)樣式。
內(nèi)聯(lián)文本元素
Marked text
For highlighting a run of text due to its relevance in another context, use the <mark> tag.
Copy
You can use the mark tag to highlight text.
You can use the mark tag to <mark>highlight</mark> text.
被刪除的文本
對(duì)于被刪除的文本使用 <del> 標(biāo)簽。
Copy
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>
無(wú)用文本
對(duì)于沒(méi)用的文本使用 <s> 標(biāo)簽。
Copy
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> 標(biāo)簽。
Copy
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> 標(biāo)簽。
Copy
This line of text will render as underlined
<u>This line of text will render as underlined</u>
利用 HTML 自帶的表示強(qiáng)調(diào)意味的標(biāo)簽來(lái)為文本增添少量樣式。
小號(hào)文本
對(duì)于不需要強(qiáng)調(diào)的inline或block類型的文本，使用 <small> 標(biāo)簽包裹，其內(nèi)的文本將被設(shè)置為父容器字體大小的 85%。標(biāo)題元素中嵌套的 <small> 元素被設(shè)置不同的 font-size 。
你還可以為行內(nèi)元素賦予 .small 類以代替任何 <small> 元素。
Copy
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>
著重
通過(guò)增加 font-weight 值強(qiáng)調(diào)一段文本。
Copy
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
斜體
用斜體強(qiáng)調(diào)一段文本。
Copy
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
Alternate elements
在 HTML5 中可以放心使用 <b> 和 <i> 標(biāo)簽。<b> 用于高亮單詞或短語(yǔ)，不帶有任何著重的意味；而 <i> 標(biāo)簽主要用于發(fā)言、技術(shù)詞匯等。
對(duì)齊
通過(guò)文本對(duì)齊類，可以簡(jiǎn)單方便的將文字重新對(duì)齊。
Copy
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>
改變大小寫(xiě)
通過(guò)這幾個(gè)類可以改變文本的大小寫(xiě)。
Copy
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>
縮略語(yǔ)
當(dāng)鼠標(biāo)懸停在縮寫(xiě)和縮寫(xiě)詞上時(shí)就會(huì)顯示完整內(nèi)容，Bootstrap 實(shí)現(xiàn)了對(duì) HTML 的 <abbr> 元素的增強(qiáng)樣式?？s略語(yǔ)元素帶有 title 屬性，外觀表現(xiàn)為帶有較淺的虛線框，鼠標(biāo)移至上面時(shí)會(huì)變成帶有“問(wèn)號(hào)”的指針。如想看完整的內(nèi)容可把鼠標(biāo)懸停在縮略語(yǔ)上, 但需要包含 title 屬性。
基本縮略語(yǔ)
如想看完整的內(nèi)容可把鼠標(biāo)懸停在縮略語(yǔ)上, 但需要為 <abbr> 元素設(shè)置 title屬性。
Copy
An abbreviation of the word attribute is attr.
<abbr title="attribute">attr</abbr>
首字母縮略語(yǔ)
為縮略語(yǔ)添加 .initialism 類，可以讓 font-size 變得稍微小些。
Copy
HTML is the best thing since sliced bread.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址
讓聯(lián)系信息以最接近日常使用的格式呈現(xiàn)。在每行結(jié)尾添加 <br> 可以保留需要的樣式。
Copy
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>
引用
在你的文檔中引用其他來(lái)源的內(nèi)容。
默認(rèn)樣式的引用
將任何 HTML 元素包裹在 <blockquote> 中即可表現(xiàn)為引用樣式。對(duì)于直接引用，我們建議用 <p> 標(biāo)簽。
Copy
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 options
Style and content changes for simple variations on a standard <blockquote>.
Naming a source
Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.
Copy
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>
Alternate displays
Add .blockquote-reverse for a blockquote with right-aligned content.
Copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
<blockquote class="blockquote-reverse"> ...</blockquote>
列表
無(wú)序列表
排列順序無(wú)關(guān)緊要的一列元素。
Copy
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>
有序列表
順序至關(guān)重要的一組元素。
Copy
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
<ol> <li>...</li></ol>
無(wú)樣式列表
移除了默認(rèn)的 list-style 樣式和左側(cè)外邊距的一組元素（只針對(duì)直接子元素）。這是針對(duì)直接子元素的，也就是說(shuō)，你需要對(duì)所有嵌套的列表都添加這個(gè)類才能具有同樣的樣式。
Copy
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>
內(nèi)聯(lián)列表
通過(guò)設(shè)置 display: inline-block; 并添加少量的內(nèi)補(bǔ)（padding），將所有元素放置于同一行。
Copy
Lorem ipsum
Phasellus iaculis
Nulla volutpat
<ul class="list-inline"> <li>...</li></ul>
描述
帶有描述的短語(yǔ)列表。
Copy
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> 內(nèi)的短語(yǔ)及其描述排在一行。開(kāi)始是像 <dl> 的默認(rèn)樣式堆疊在一起，隨著導(dǎo)航條逐漸展開(kāi)而排列在一行。
Copy
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>
自動(dòng)截?cái)?div style="height:15px;">
通過(guò) text-overflow 屬性，水平排列的描述列表將會(huì)截?cái)嘧髠?cè)太長(zhǎng)的短語(yǔ)。在較窄的視口（viewport）內(nèi)，列表將變?yōu)槟J(rèn)堆疊排列的布局方式。
代碼
內(nèi)聯(lián)代碼
通過(guò) <code> 標(biāo)簽包裹內(nèi)聯(lián)樣式的代碼片段。
Copy
For example, <section> should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline.
用戶輸入
通過(guò) <kbd> 標(biāo)簽標(biāo)記用戶通過(guò)鍵盤(pán)輸入的內(nèi)容。=
Copy
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> 標(biāo)簽。為了正確的展示代碼，注意將尖括號(hào)做轉(zhuǎn)義處理。
Copy
<p>Sample text here...</p>
<pre><p>Sample text here...</p></pre>
還可以使用 .pre-scrollable 類，其作用是設(shè)置 max-height 為 350px ，并在垂直方向展示滾動(dòng)條。
變量
通過(guò) <var> 標(biāo)簽標(biāo)記變量。
Copy
y = mx + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
程序輸出
通過(guò) <samp> 標(biāo)簽來(lái)標(biāo)記程序輸出的內(nèi)容。
Copy
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>
表格
基本實(shí)例
為任意 <table> 標(biāo)簽添加 .table 類可以為其賦予基本的樣式 — 少量的內(nèi)補(bǔ)（padding）和水平方向的分隔線。這種方式看起來(lái)很多余??？但是我們覺(jué)得，表格元素使用的很廣泛，如果我們?yōu)槠滟x予默認(rèn)樣式可能會(huì)影響例如日歷和日期選擇之類的插件，所以我們選擇將此樣式獨(dú)立出來(lái)。
Copy
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table"> ...</table>
條紋狀表格
通過(guò) .table-striped 類可以給 <tbody> 之內(nèi)的每一行增加斑馬條紋樣式。
跨瀏覽器兼容性
條紋狀表格是依賴 :nth-child CSS 選擇器實(shí)現(xiàn)的，而這一功能不被 Internet Explorer 8 支持。
Copy
# 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 類為表格和其中的每個(gè)單元格增加邊框。
Copy
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered"> ...</table>
鼠標(biāo)懸停
通過(guò)添加 .table-hover 類可以讓 <tbody> 中的每一行對(duì)鼠標(biāo)懸停狀態(tài)作出響應(yīng)。
Copy
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover"> ...</table>
緊縮表格
通過(guò)添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內(nèi)補(bǔ)（padding）均會(huì)減半。
Copy
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed"> ...</table>
狀態(tài)類
通過(guò)這些狀態(tài)類可以為行或單元格設(shè)置顏色。
Class 描述
.active 鼠標(biāo)懸停在行或單元格上時(shí)所設(shè)置的顏色
.success 標(biāo)識(shí)成功或積極的動(dòng)作
.info 標(biāo)識(shí)普通的提示信息或動(dòng)作
.warning 標(biāo)識(shí)警告或需要用戶注意
.danger 標(biāo)識(shí)危險(xiǎn)或潛在的帶來(lái)負(fù)面影響的動(dòng)作
Copy
# 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>
響應(yīng)式表格
將任何 .table 元素包裹在 .table-responsive 元素內(nèi)，即可創(chuàng)建響應(yīng)式表格，其會(huì)在小屏幕設(shè)備上（小于768px）水平滾動(dòng)。當(dāng)屏幕大于 768px 寬度時(shí)，水平滾動(dòng)條消失。
Firefox 和 fieldset 元素
Firefox 瀏覽器對(duì) fieldset 元素設(shè)置了一些影響 width 屬性的樣式，導(dǎo)致響應(yīng)式表格出現(xiàn)問(wèn)題。除非使用我們下面提供的針對(duì) Firefox 的 hack 代碼，否則無(wú)解：
Copy
@-moz-document url-prefix() { fieldset { display: table-cell; }}
更多信息請(qǐng)參考
this Stack Overflow answer.
Copy
# 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>
表單
基本實(shí)例
單獨(dú)的表單控件會(huì)被自動(dòng)賦予一些全局樣式。所有設(shè)置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認(rèn)設(shè)置寬度屬性為 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group 中可以獲得最好的排列。
Copy
Email address
Password
File input
Example block-level help text here.
Check me out
<form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter 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>
不要講表單組合輸入框組混合使用
不要講表單組直接和
輸入框組混合使用。建議將輸入框組嵌套到表單組中使用。
內(nèi)聯(lián)表單
為 <form> 元素添加 .form-inline 類可使其內(nèi)容左對(duì)齊并且表現(xiàn)為 inline-block 級(jí)別的控件。只適用于視口（viewport）至少在 768px 寬度時(shí)（視口寬度再小的話就會(huì)使表單折疊）。
需要手動(dòng)設(shè)置寬度
在 Bootstrap 中，輸入框和單選/多選框控件默認(rèn)被設(shè)置為 width: 100%; 寬度。在內(nèi)聯(lián)表單，我們將這些元素的寬度設(shè)置為 width: auto;，因此，多個(gè)控件可以排列在同一行。根據(jù)你的布局需求，可能需要一些額外的定制化組件。
一定要添加 label 標(biāo)簽
如果你沒(méi)有為每個(gè)輸入控件設(shè)置 label 標(biāo)簽，屏幕閱讀器將無(wú)法正確識(shí)別。對(duì)于這些內(nèi)聯(lián)表單，你可以通過(guò)為 label 設(shè)置 .sr-only 類將其隱藏。
Copy
Email address
@
Password
Remember me
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" 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>
水平排列的表單
通過(guò)為表單添加 .form-horizontal 類，并聯(lián)合使用 Bootstrap 預(yù)置的柵格類，可以將 label 標(biāo)簽和控件組水平并排布局。這樣做將改變 .form-group 的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無(wú)需再額外添加 .row 了。
Copy
Email
Password
Remember me
<form class="form-horizontal" role="form"> <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>
被支持的控件
表單布局實(shí)例中展示了其所支持的標(biāo)準(zhǔn)表單控件。
輸入框
包括大部分表單控件、文本輸入域控件，還支持所有 HTML5 類型的輸入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
必須添加類型聲明
只有正確設(shè)置了 type 屬性的輸入控件才能被賦予正確的樣式。
Copy
<input type="text" class="form-control" placeholder="Text input">
輸入控件組
如需在文本輸入域 <input> 前面或后面添加文本內(nèi)容或按鈕控件，請(qǐng)參考
輸入控件組。
文本域
支持多行文本的表單控件?？筛鶕?jù)需要改變 rows 屬性。
Copy
<textarea class="form-control" rows="3"></textarea>
多選和單選框
多選框（checkbox）用于選擇列表中的一個(gè)或多個(gè)選項(xiàng)，而單選框（radio）用于從多個(gè)選項(xiàng)中只選擇一個(gè)。
設(shè)置了 disabled 屬性的單選或多選框都能被賦予合適的樣式。對(duì)于和多選或單選框聯(lián)合使用的 <label> 標(biāo)簽，如果也希望將懸停于上方的鼠標(biāo)設(shè)置為“禁止點(diǎn)擊”的樣式，請(qǐng)將 .disabled 類賦予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。
默認(rèn)外觀（堆疊在一起）
Copy
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—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—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>
內(nèi)聯(lián)單選和多選框
通過(guò)將 .checkbox-inline 或 .radio-inline 類應(yīng)用到一系列的多選框（checkbox）或單選框（radio）控件上，可以使這些控件排列在一行。
Copy
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>
下拉列表（select）
使用默認(rèn)選項(xiàng)或添加 multiple 屬性可以同時(shí)顯示多個(gè)選項(xiàng)。
Copy
<select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option></select><select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option></select>
靜態(tài)控件
如果需要在表單中將一行純文本和 label 元素放置于同一行，為 <p> 元素添加 .form-control-static 類即可。
Copy
Email
email@example.com
Password
<form class="form-horizontal" role="form"> <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>
Copy
Email
email@example.com
Password
<form class="form-inline" role="form"> <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>
輸入框焦點(diǎn)
我們將某些表單控件的默認(rèn) outline 樣式移除，然后對(duì) :focus 狀態(tài)賦予 box-shadow 屬性。
演示:focus 狀態(tài)
在本文檔中，我們?yōu)樯厦鎸?shí)例中的輸入框賦予了自定義的樣式，用于演示 .form-control 元素的 :focus 狀態(tài)。
被禁用的輸入框
為輸入框設(shè)置 disabled 屬性可以防止用戶輸入，并能對(duì)外觀做一些修改，使其更直觀。
Copy
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
被禁用的 fieldset
為<fieldset> 設(shè)置 disabled 屬性,可以禁用 <fieldset> 中包含的所有控件。
<a> 標(biāo)簽的鏈接功能不受影響
我們?cè)噲D通過(guò)設(shè)置 pointer-events: none 來(lái)禁用 <a class="btn btn-*"> 按鈕的鏈接功能，但是這個(gè) CSS 屬性尚未標(biāo)準(zhǔn)化，目前也沒(méi)有被所有瀏覽器支持，包括 Opera 18 或 Internet Explorer 11 及更低版本。建議用戶自己通過(guò) JavaScript 代碼禁用鏈接功能。
跨瀏覽器兼容性
雖然 Bootstrap 會(huì)將這些樣式應(yīng)用到所有瀏覽器上，Internet Explorer 9 及以下瀏覽器中的 <fieldset> 元素并不支持 disabled 屬性。因此建議在這些瀏覽器上通過(guò) JavaScript 代碼來(lái)禁用 <fieldset>。
Copy
Disabled input
Disabled select menu
Can't check this
<form role="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>
只讀輸入框
為輸入框設(shè)置 readonly 屬性可以禁止用戶輸入，并且輸入框的樣式也是禁用狀態(tài)。
Copy
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
校驗(yàn)狀態(tài)
Bootstrap 對(duì)表單控件的校驗(yàn)狀態(tài)，如 error、warning 和 success 狀態(tài)，都定義了樣式。使用時(shí)，添加 .has-warning、.has-error 或 .has-success 類到這些控件的父元素即可。任何包含在此元素之內(nèi)的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗(yàn)狀態(tài)的樣式。
Copy
Input with success
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"></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>
添加額外的圖標(biāo)
你還可以針對(duì)校驗(yàn)狀態(tài)為輸入框添加額外的圖標(biāo)。只需設(shè)置相應(yīng)的 .has-feedback 類并添加正確的圖標(biāo)即可。
Feedback icons only work with textual <input class="form-control"> elements.
圖標(biāo)、label 和輸入控件組
對(duì)于不帶有 label 標(biāo)簽的輸入框以及右側(cè)帶有附加組件的
輸入框組，需要手動(dòng)為其圖標(biāo)定位。為了讓所有用戶都能訪問(wèn)你的網(wǎng)站，我們強(qiáng)烈建議為所有輸入框添加 label 標(biāo)簽。如果你不希望將 label 標(biāo)簽展示出來(lái)，可以通過(guò)添加 sr-only 類來(lái)實(shí)現(xiàn)。如果的確不能添加 label 標(biāo)簽，請(qǐng)調(diào)整圖標(biāo)的 top 值。對(duì)于輸入框組，請(qǐng)根據(jù)你的實(shí)際情況調(diào)整 right 值。
Copy
Input with success
Input with warning
Input with error
<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"> <span class="glyphicon glyphicon-ok form-control-feedback"></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"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></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"> <span class="glyphicon glyphicon-remove form-control-feedback"></span></div>
為水平排列的表單和內(nèi)聯(lián)表單設(shè)置可選的圖標(biāo)
Copy
Input with success
<form class="form-horizontal" role="form"> <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"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> </div></form>
Copy
Input with success
<form class="form-inline" role="form"> <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"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div></form>
可選的圖標(biāo)與設(shè)置 .sr-only 類的 label
通過(guò)為 label 元素添加 .sr-only 類，可以讓表單控件的 label 元素不可見(jiàn)。在這種情況下，Bootstrap 將自動(dòng)調(diào)整圖標(biāo)的位置。
Copy
Hidden label
<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"> <span class="glyphicon glyphicon-ok form-control-feedback"></span></div>
控件尺寸
通過(guò) .input-lg 類似的類可以為控件設(shè)置高度，通過(guò) .col-lg-* 類似的類可以為控件設(shè)置寬度。
高度尺寸
創(chuàng)建大一些或小一些的表單控件以匹配按鈕尺寸。
Copy
<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>
水平排列的表單組的尺寸
通過(guò)添加 .form-group-lg 或 .form-group-sm 類，為 .form-horizontal 包裹的 label 元素和表單控件快速設(shè)置尺寸。
Copy
Large label
Small label
<form class="form-horizontal" role="form"> <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>
調(diào)整列（column）尺寸
用柵格系統(tǒng)中的列（column）包裹輸入框或其任何父元素，都可很容易的為其設(shè)置寬度。
Copy
<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>
輔助文本
針對(duì)表單控件的“塊（block）”級(jí)輔助文本。
Copy
A block of help text that breaks onto a new line and may extend beyond one line.
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
按鈕
預(yù)定義樣式
使用下面列出的類可以快速創(chuàng)建一個(gè)帶有預(yù)定義樣式的按鈕。
Copy
<!-- 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>
尺寸
需要讓按鈕具有不同尺寸嗎？使用 .btn-lg、.btn-sm 或 .btn-xs 可以獲得不同尺寸的按鈕。
Copy
<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>
通過(guò)給按鈕添加 .btn-block 類可以將其拉伸至父元素100%的寬度，而且按鈕也變?yōu)榱藟K級(jí)（block）元素。
Copy
<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>
激活狀態(tài)
當(dāng)按鈕處于激活狀態(tài)時(shí)，其表現(xiàn)為被按壓下去（底色更深、邊框夜色更深、向內(nèi)投射陰影）。對(duì)于 <button> 元素，是通過(guò) :active 狀態(tài)實(shí)現(xiàn)的。對(duì)于 <a> 元素，是通過(guò) .active 類實(shí)現(xiàn)的。然而，你還可以將 .active 應(yīng)用到 <button> 上，并通過(guò)編程的方式使其處于激活狀態(tài)。
button 元素
由于 :active 是偽狀態(tài)，因此無(wú)需額外添加，但是在需要讓其表現(xiàn)出同樣外觀的時(shí)候可以添加 .active 類。
Copy
<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> 元素創(chuàng)建的按鈕添加 .active 類。
Copy
<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>
禁用狀態(tài)
通過(guò)將按鈕的背景色做 50% 的褪色處理就可以呈現(xiàn)出無(wú)法點(diǎn)擊的效果。
button 元素
為 <button> 元素添加 disabled 屬性，使其表現(xiàn)出禁用狀態(tài)。
Copy
<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 及更低版本的瀏覽器將會(huì)把按鈕中的文本繪制為灰色，并帶有惡心的陰影，目前我們還沒(méi)有解決辦法。
鏈接（<a>）元素
為基于 <a> 元素創(chuàng)建的按鈕添加 .disabled 類。
Copy
<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 類一樣，因此不需要增加前綴。
鏈接的原始功能不受影響
上面提到的類只是通過(guò)設(shè)置 pointer-events: none 來(lái)禁止 <a> 元素作為鏈接的原始功能，但是，這一 CSS 屬性并沒(méi)有被標(biāo)準(zhǔn)化，并且 Opera 18 及更低版本的瀏覽器并沒(méi)有完全支持這一屬性，同樣，Internet Explorer 11 也不支持。因此，為了安全起見(jiàn)，建議通過(guò) JavaScript 代碼來(lái)禁止鏈接的原始功能。
Context-specific usage
雖然按鈕類可以應(yīng)用到 <a> 和 <button> 元素上，但是，導(dǎo)航和導(dǎo)航條只支持 <button> 元素。
按鈕類
為 <a>、<button> 或 <input> 元素應(yīng)用按鈕類。
Copy
<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">
跨瀏覽器展現(xiàn)
我們總結(jié)的最佳實(shí)踐是，強(qiáng)烈建議盡可能使用 <button> 元素來(lái)獲得在各個(gè)瀏覽器上獲得相匹配的繪制效果。
另外，我們還發(fā)現(xiàn)了
a bug in Firefox <30 版本的瀏覽器上出現(xiàn)的一個(gè) bug ：阻止我們?yōu)榛?<input> 元素創(chuàng)建的按鈕設(shè)置 line-height 屬性，這就導(dǎo)致在 Firefox 瀏覽器上不能完全和其他按鈕保持一致的高度。
圖片
響應(yīng)式圖片
在 Bootstrap 版本 3 中，通過(guò)為圖片添加 .img-responsive 類可以讓圖片支持響應(yīng)式布局。其實(shí)質(zhì)是為圖片設(shè)置了 max-width: 100%; 和 height: auto; 屬性，從而讓圖片在其父元素中更好的縮放。
SVG 圖像和 IE 8-10
在 Internet Explorer 8-10 中，設(shè)置為 .img-responsive 的 SVG 圖像顯示出的尺寸不勻稱。為了解決這個(gè)問(wèn)題，在出問(wèn)題的地方添加 width: 100% \9; 即可。Bootstrap 并沒(méi)有自動(dòng)為所有圖像元素設(shè)置這一屬性，因?yàn)檫@會(huì)導(dǎo)致其他圖像格式出現(xiàn)錯(cuò)亂。
Copy
<img src="..." class="img-responsive" alt="Responsive image">
圖片形狀
通過(guò)為 <img> 元素添加以下相應(yīng)的類，可以讓圖片呈現(xiàn)不同的形狀。
跨瀏覽器兼容性
請(qǐng)時(shí)刻牢記：Internet Explorer 8 不支持 CSS3 中的圓角屬性。
Copy
<img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail">
輔助類
Contextual colors
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
Copy
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>
Dealing with specificity
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.
Contextual backgrounds
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
Copy
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>
Dealing with specificity
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.
關(guān)閉按鈕
通過(guò)使用一個(gè)象征關(guān)閉的圖標(biāo)，可以讓模態(tài)框和警告框消失。
Copy
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
三角符號(hào)
通過(guò)使用三角符號(hào)可以指示某個(gè)元素具有下拉菜單的功能。注意，
向上彈出式菜單中的三角符號(hào)是反方向的。
Copy
<span class="caret"></span>
快速浮動(dòng)
Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.
Copy
<div class="pull-left">...</div><div class="pull-right">...</div>
Copy
// Classes.pull-left { float: left !important;}.pull-right { float: right !important;}// Usage as mixins.element { .pull-left();}.another-element { .pull-right();}
Not for use in navbars
To align components in navbars with utility classes, use .navbar-left or .navbar-right instead.
See the navbar docs for details.
Center content blocks
Set an element to display: block and center via margin. Available as a mixin and class.
Copy
<div class="center-block">...</div>
Copy
// Classes.center-block { display: block; margin-left: auto; margin-right: auto;}// Usage as mixins.element { .center-block();}
Clearfix
Easily clear floats by adding .clearfix to the parent element. Utilizes
the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.
Copy
<!-- Usage as a class --><div class="clearfix">...</div>
Copy
// Mixin itself.clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; }}// Usage as a Mixin.element { .clearfix();}
Showing and hiding content
Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the . They are only available for block level toggling. They can also be used as mixins.
.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.
Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.
Copy
<div class="show">...</div><div class="hidden">...</div>
Copy
// Classes.show { display: block !important;}.hidden { display: none !important; visibility: hidden !important;}.invisible { visibility: hidden;}// Usage as mixins.element { .show();}.another-element { .hidden();}
Screen reader and keyboard navigation content
Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following
accessibility best practices. Can also be used as mixins.
Copy
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
Copy
// Usage as a Mixin.skip-navigation { .sr-only(); .sr-only-focusable();}
Image replacement
Utilize the .text-hide class or mixin to help replace an element's text content with a background image.
Copy
<h1 class="text-hide">Custom heading</h1>
Copy
// Usage as a Mixin.heading { .text-hide();}
響應(yīng)式工具
為了加快對(duì)移動(dòng)設(shè)備友好的頁(yè)面開(kāi)發(fā)工作，利用媒體查詢功能并使用這些工具類可以方便的針對(duì)不同設(shè)備展示或隱藏頁(yè)面內(nèi)容。另外還包含了針對(duì)打印機(jī)顯示或隱藏內(nèi)容的工具類。
有針對(duì)性的使用這類工具類，從而避免為同一個(gè)網(wǎng)站創(chuàng)建完全不同的版本。相反，通過(guò)使用這些工具類可以在不同設(shè)備上提供不同的展現(xiàn)形式。
可用的類
通過(guò)單獨(dú)或聯(lián)合使用以下列出的類，可以針對(duì)不同屏幕尺寸隱藏或顯示頁(yè)面內(nèi)容。
超小屏幕 手機(jī) (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面 (≥992px) 大屏幕 桌面 (≥1200px)
.visible-xs-* 可見(jiàn) 隱藏 隱藏 隱藏
.visible-sm-* 隱藏 可見(jiàn) 隱藏 隱藏
.visible-md-* 隱藏 隱藏 可見(jiàn) 隱藏
.visible-lg-* 隱藏 隱藏 隱藏 可見(jiàn)
.hidden-xs 隱藏 可見(jiàn) 可見(jiàn) 可見(jiàn)
.hidden-sm 可見(jiàn) 隱藏 可見(jiàn) 可見(jiàn)
.hidden-md 可見(jiàn) 可見(jiàn) 隱藏 可見(jiàn)
.hidden-lg 可見(jiàn) 可見(jiàn) 可見(jiàn) 隱藏
從 v3.2.0 版本起，形如 .visible-*-* 的類針對(duì)每種屏幕大小都有了三種變體，每個(gè)針對(duì) 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 類也同時(shí)存在。但是從 v3.2.0 版本開(kāi)始不再建議使用。除了 <table> 相關(guān)的元素的特殊情況外，它們與 .visible-*-block 大體相同。
打印類
和常規(guī)的響應(yīng)式類一樣，使用下面的類可以針對(duì)打印機(jī)隱藏或顯示某些內(nèi)容。
class 瀏覽器 打印機(jī)
.visible-print-block
.visible-print-inline
.visible-print-inline-block 隱藏 可見(jiàn)
.hidden-print 可見(jiàn) 隱藏
.visible-print 類也是存在的，但是從 v3.2.0 版本開(kāi)始不建議使用。它與 .visible-print-block 類大致相同，除了 <table> 相關(guān)元素的特殊情況外。
測(cè)試用例
調(diào)整你的瀏覽器大小，或者用其他設(shè)備打開(kāi)頁(yè)面，都可以測(cè)試這些響應(yīng)式工具類。
在...上可見(jiàn)
帶有綠色標(biāo)記的元素表示其在當(dāng)前瀏覽器視口（viewport）中是可見(jiàn)的。
超小屏幕
小屏幕
中等屏幕
在大屏幕上可見(jiàn)
超小屏幕和小屏幕
在中等屏幕和大屏幕上可見(jiàn)
超小屏幕和中等屏幕
在小屏幕和大屏幕上可見(jiàn)
在超小屏幕和大屏幕上可見(jiàn)
小屏幕和中等屏幕
在...上隱藏
帶有綠色標(biāo)記的元素表示其在當(dāng)前瀏覽器視口（viewport）中是隱藏的。
超小屏幕
小屏幕
中等屏幕
在大屏幕上隱藏
超小屏幕與小屏幕
在 medium 和 large 上隱藏
超小屏幕和中等屏幕
在小屏幕和大屏幕上隱藏
在超小屏幕和大屏幕上隱藏
小屏幕和中等屏幕
使用 Less
Bootstrap 的 CSS 文件是通過(guò) Less 源碼編譯出來(lái)的。Less 是一門(mén)預(yù)處理語(yǔ)言，支持變量、mixin、函數(shù)等額外功能。對(duì)于希望使用 Less 源碼而非編譯出來(lái)的 CSS 文件的用戶，Bootstrap 框架中包含的大量變量、mixin 將非常有價(jià)值。
針對(duì)柵格系統(tǒng)的變量和 mixin 包含在章節(jié)。
編譯 Bootstrap
Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files,
consult the Getting Started section for how to setup your development environment to run the necessary commands.
變量
Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see
the Customizer.
顏色
Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.
Copy
@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
Copy
@brand-primary: #428bca;@brand-success: #5cb85c;@brand-info: #5bc0de;@brand-warning: #f0ad4e;@brand-danger: #d9534f;
Use any of these color variables as they are or reassign them to more meaningful variables for your project.
Copy
// Use as-is.masthead { background-color: @brand-primary;}// Reassigned variables in Less@alert-message-background: @brand-info;.alert { background-color: @alert-message-background;}
Scaffolding
A handful of variables for quickly customizing key elements of your site's skeleton.
Copy
// Scaffolding@body-bg: #fff;@text-color: @black-50;
Links
Easily style your links with the right color with only one value.
Copy
// Variables@link-color: @brand-primary;@link-hover-color: darken(@link-color, 15%);// Usagea { color: @link-color; text-decoration: none; &:hover { color: @link-hover-color; text-decoration: underline; }}
Note that the @link-hover-color uses a function, another awesome tool from Less, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.
Typography
Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.
Copy
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;@font-family-serif: Georgia, "Times New Roman", Times, serif;@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;@font-family-base: @font-family-sans-serif;@font-size-base: 14px;@font-size-large: ceil((@font-size-base * 1.25)); // ~18px@font-size-small: ceil((@font-size-base * 0.85)); // ~12px@font-size-h1: floor((@font-size-base * 2.6)); // ~36px@font-size-h2: floor((@font-size-base * 2.15)); // ~30px@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px@font-size-h5: @font-size-base;@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px@line-height-base: 1.428571429; // 20/14@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px@headings-font-family: inherit;@headings-font-weight: 500;@headings-line-height: 1.1;@headings-color: inherit;
Icons
Two quick variables for customizing the location and filename of your icons.
Copy
@icon-font-path: "../fonts/";@icon-font-name: "glyphicons-halflings-regular";
Components
Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.
Copy
@padding-base-vertical: 6px;@padding-base-horizontal: 12px;@padding-large-vertical: 10px;@padding-large-horizontal: 16px;@padding-small-vertical: 5px;@padding-small-horizontal: 10px;@padding-xs-vertical: 1px;@padding-xs-horizontal: 5px;@line-height-large: 1.33;@line-height-small: 1.5;@border-radius-base: 4px;@border-radius-large: 6px;@border-radius-small: 3px;@component-active-color: #fff;@component-active-bg: @brand-primary;@caret-width-base: 4px;@caret-width-large: 5px;
Vendor mixins
Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixes in your compiled CSS.
Box-sizing
Reset your components' box model with a single mixin. For context, see this
helpful article from Mozilla.
The mixin is deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.
Copy
.box-sizing(@box-model) { -webkit-box-sizing: @box-model; // Safari <= 5 -moz-box-sizing: @box-model; // Firefox <= 19 box-sizing: @box-model;}
Rounded corners
Today all modern browsers support the non-prefixed border-radius property. As such, there is no .border-radius() mixin, but Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.
Copy
.border-top-radius(@radius) { border-top-right-radius: @radius; border-top-left-radius: @radius;}.border-right-radius(@radius) { border-bottom-right-radius: @radius; border-top-right-radius: @radius;}.border-bottom-radius(@radius) { border-bottom-right-radius: @radius; border-bottom-left-radius: @radius;}.border-left-radius(@radius) { border-bottom-left-radius: @radius; border-top-left-radius: @radius;}
Box (Drop) shadows
If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the deprecated mixin to pick up the required -webkit prefix.
The mixin is deprecated as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.
Be sure to use rgba() colors in your box shadows so they blend as seamlessly as possible with backgrounds.
Copy
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow;}
Transitions
Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.
The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
Copy
.transition(@transition) { -webkit-transition: @transition; transition: @transition;}.transition-property(@transition-property) { -webkit-transition-property: @transition-property; transition-property: @transition-property;}.transition-delay(@transition-delay) { -webkit-transition-delay: @transition-delay; transition-delay: @transition-delay;}.transition-duration(@transition-duration) { -webkit-transition-duration: @transition-duration; transition-duration: @transition-duration;}.transition-timing-function(@timing-function) { -webkit-transition-timing-function: @timing-function; transition-timing-function: @timing-function;}.transition-transform(@transition) { -webkit-transition: -webkit-transform @transition; -moz-transition: -moz-transform @transition; -o-transition: -o-transform @transition; transition: transform @transition;}
Transformations
Rotate, scale, translate (move), or skew any object.
The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
Copy
.rotate(@degrees) { -webkit-transform: rotate(@degrees); -ms-transform: rotate(@degrees); // IE9 only transform: rotate(@degrees);}.scale(@ratio; @ratio-y...) { -webkit-transform: scale(@ratio, @ratio-y); -ms-transform: scale(@ratio, @ratio-y); // IE9 only transform: scale(@ratio, @ratio-y);}.translate(@x; @y) { -webkit-transform: translate(@x, @y); -ms-transform: translate(@x, @y); // IE9 only transform: translate(@x, @y);}.skew(@x; @y) { -webkit-transform: skew(@x, @y); -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ transform: skew(@x, @y);}.translate3d(@x; @y; @z) { -webkit-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z);}.rotateX(@degrees) { -webkit-transform: rotateX(@degrees); -ms-transform: rotateX(@degrees); // IE9 only transform: rotateX(@degrees);}.rotateY(@degrees) { -webkit-transform: rotateY(@degrees); -ms-transform: rotateY(@degrees); // IE9 only transform: rotateY(@degrees);}.perspective(@perspective) { -webkit-perspective: @perspective; -moz-perspective: @perspective; perspective: @perspective;}.perspective-origin(@perspective) { -webkit-perspective-origin: @perspective; -moz-perspective-origin: @perspective; perspective-origin: @perspective;}.transform-origin(@origin) { -webkit-transform-origin: @origin; -moz-transform-origin: @origin; -ms-transform-origin: @origin; // IE9 only transform-origin: @origin;}
Animations
A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.
The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
Copy
.animation(@animation) { -webkit-animation: @animation; animation: @animation;}.animation-name(@name) { -webkit-animation-name: @name; animation-name: @name;}.animation-duration(@duration) { -webkit-animation-duration: @duration; animation-duration: @duration;}.animation-timing-function(@timing-function) { -webkit-animation-timing-function: @timing-function; animation-timing-function: @timing-function;}.animation-delay(@delay) { -webkit-animation-delay: @delay; animation-delay: @delay;}.animation-iteration-count(@iteration-count) { -webkit-animation-iteration-count: @iteration-count; animation-iteration-count: @iteration-count;}.animation-direction(@direction) { -webkit-animation-direction: @direction; animation-direction: @direction;}
Opacity
Set the opacity for all browsers and provide a filter fallback for IE8.
Copy
.opacity(@opacity) { opacity: @opacity; // IE8 filter @opacity-ie: (@opacity * 100); filter: ~"alpha(opacity=@{opacity-ie})";}
Placeholder text
Provide context for form controls within each field.
Copy
.placeholder(@color: @input-color-placeholder) { &::-moz-placeholder { color: @color; } // Firefox &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ &::-webkit-input-placeholder { color: @color; } // Safari and Chrome}
Columns
Generate columns via CSS within a single element.
Copy
.content-columns(@width; @count; @gap) { -webkit-column-width: @width; -moz-column-width: @width; column-width: @width; -webkit-column-count: @count; -moz-column-count: @count; column-count: @count; -webkit-column-gap: @gap; -moz-column-gap: @gap; column-gap: @gap;}
Gradients
Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.
Copy
#gradient > .vertical(#333; #000);#gradient > .horizontal(#333; #000);#gradient > .radial(#333; #000);
You can also specify the angle of a standard two-color, linear gradient:
Copy
#gradient > .directional(#333; #000; 45deg);
If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.
Copy
#gradient > .striped(#333; 45deg);
Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:
Copy
#gradient > .vertical-three-colors(#777; #333; 25%; #000);#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using the .reset-filter() mixin alongside background-image: none;.
Utility mixins
Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.
Clearfix
Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the
micro clearfix from
Nicolas Gallager.
Copy
// Mixin.clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; }}// Usage.container { .clearfix();}
Horizontal centering
Quickly center any element within its parent. Requires width or max-width to be set.
Copy
// Mixin.center-block() { display: block; margin-left: auto; margin-right: auto;}// Usage.container { width: 940px; .center-block();}
Sizing helpers
Specify the dimensions of an object more easily.
Copy
// Mixins.size(@width; @height) { width: @width; height: @height;}.square(@size) { .size(@size; @size);}// Usage.image { .size(400px; 300px); }.avatar { .square(48px); }
Resizable textareas
Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).
Copy
.resizable(@direction: both) { // Options: horizontal, vertical, both resize: @direction; // Safari fix overflow: auto;}
Truncating text
Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.
Copy
// Mixin.text-overflow() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}// Usage.branch-name { display: inline-block; max-width: 200px; .text-overflow();}
Retina images
Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.
Copy
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { background-image: url("@{file-1x}"); @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { background-image: url("@{file-2x}"); background-size: @width-1x @height-1x; }}// Usage.jumbotron { .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);}
使用 Sass
雖然 Bootstrap 是基于 Less 構(gòu)建的，我們還提供了一套
官方支持的 Sass 移植版代碼。我們將這個(gè)版本放在單獨(dú)的 GitHub 倉(cāng)庫(kù)中進(jìn)行維護(hù)，并通過(guò)腳本處理源碼更新。
包含的內(nèi)容
由于 Sass 移植版存放于單獨(dú)的倉(cāng)庫(kù)，并針對(duì)不同的使用群體，這個(gè)項(xiàng)目中的內(nèi)容與 Bootstrap 主項(xiàng)目有很大不同。這也是為了保證 Sass 移植版與更多基于 Sass 的系統(tǒng)相兼容。
路徑 描述
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
