Bootstrap CSS
Bootstrap 排版
引導主體副本
為了給段落添加強調文本，則可以添加 class=”lead”，這將得到更大更粗、行高更高的文本，如下面實例所示：
<h2>引導主體副本</h2> <p class="lead">這是一個演示引導主體副本用法的實例。</p>- 1
- 2
引導主體副本
這是一個演示引導主體副本用法的實例。
強調
HTML 的默認強調標簽 :
<small>（設置文本為父文本大小的 85%）、<strong>（設置文本為更粗的文本）、<em>（設置文本為斜體）。
Bootstrap 提供了一些用於強調文本的類，如下面實例所示：
<small>本行內容是在標簽內</small><br> <strong>本行內容是在標簽內</strong><br> <em>本行內容是在標簽內，並呈現為斜體</em><br> <p class="text-left">向左對齊文本</p> <p class="text-center">居中對齊文本</p> <p class="text-right">向右對齊文本</p> <p class="text-muted">本行內容是減弱的</p> <p class="text-primary">本行內容帶有一個 primary class</p> <p class="text-success">本行內容帶有一個 success class</p> <p class="text-info">本行內容帶有一個 info class</p> <p class="text-warning">本行內容帶有一個 warning class</p> <p class="text-danger">本行內容帶有一個 danger class</p>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
本行內容是在標簽內
本行內容是在標簽內
本行內容是在標簽內，並呈現為斜體
向左對齊文本
居中對齊文本
向右對齊文本
本行內容是減弱的
本行內容帶有一個 primary class
本行內容帶有一個 success class
本行內容帶有一個 info class
本行內容帶有一個 warning class
本行內容帶有一個 danger class
縮寫
HTML 元素提供了用於縮寫的標記，比如 WWW 或 HTTP。Bootstrap 定義 <abbr> 元素的樣式為顯示在文本底部的一條虛線邊框，當鼠標懸停在上面時會顯示完整的文本（只要您為 <abbr> title 屬性添加了文本）。為了得到一個更小字體的文本，請添加 .initialism 到 <abbr>。
實例
<abbr title="World Wide Web">WWW</abbr><br> <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>- 1
- 2
WWW
RSS
地址（Address）
使用 <address> 標簽，您可以在網頁上顯示聯系信息。由於 <address> 默認為 display:block;，您需要使用標簽來為封閉的地址文本添加換行。
實例
<address> <strong>Some Company, Inc.</strong><br> 007 street<br> Some City, State XXXXX<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">mailto@somedomain.com</a> </address>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Some Company, Inc.
007 street
Some City, State XXXXX
P: (123) 456-7890
Full Name
mailto@somedomain.com
引用（Blockquote）
您可以在任意的 HTML 文本旁使用默認的 <blockquote>。其他選項包括，添加一個 <small> 標簽來標識引用的來源，使用 class .pull-right 向右對齊引用。下面的實例演示了這些特性：
實例
<blockquote> <p> 這是一個默認的引用實例。 </p> </blockquote> <blockquote> 這是一個帶有源標題的引用。 <small>Someone famous in <cite title="Source Title">Source Title</cite></small> </blockquote> <blockquote class="pull-right"> 這是一個向右對齊的引用。 <small>Someone famous in <cite title="Source Title">Source Title</cite></small> </blockquote>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
這是一個默認的引用實例。
這是一個帶有源標題的引用。 Someone famous in Source Title
這是一個向右對齊的引用。 Someone famous in Source Title
.
.
.
列表
Bootstrap 支持有序列表、無序列表和定義列表。
有序列表：有序列表是指以數字或其他有序字符開頭的列表。
無序列表：無序列表是指沒有特定順序的列表，是以傳統風格的着重號開頭的列表。
定義列表：在這種類型的列表中，每個列表項可以包含<dt>和<dd>元素。<dt>代表 定義術語，就像字典，這是被定義的屬於（或短語）。接着，<dd>是<dt>的描述。您可以使用 class dl-horizontal 把<dl>行中的屬於與描述並排顯示。
下面的實例演示了這些類型的列表：
實例
<h4>有序列表</h4> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> <h4>無序列表</h4> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>未定義樣式列表</h4> <ul class="list-unstyled"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>內聯列表</h4> <ul class="list-inline"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>定義列表</h4> <dl> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> <h4>水平的定義列表</h4> <dl class="dl-horizontal"> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
有序列表
- Item 1
- Item 2
- Item 3
- Item 4
無序列表
- Item 1
- Item 2
- Item 3
- Item 4
未定義樣式列表
- Item 1
- Item 2
- Item 3
- Item 4
內聯列表
- Item 1
- Item 2
- Item 3
- Item 4
定義列表
- Description 1
- Item 1
- Description 2
- Item 2
水平的定義列表
- Description 1
- Item 1
- Description 2
- Item 2
更多排版類
下表提供了 Bootstrap 更多排版類的實例：
Bootstrap 代碼
Bootstrap 允許您以兩種方式顯示代碼：
第一種是
<code>標簽。如果您想要內聯顯示代碼，那么您應該使用<code>標簽。
第二種是<pre>標簽。如果代碼需要被顯示為一個獨立的塊元素或者代碼有多行，那么您應該使用<pre>標簽。
請確保當您使用 <pre> 和 <code> 標簽時，開始和結束標簽使用了 unicode 變體： < 和 >。
實例
<p><code><header></code> 作為內聯元素被包圍。</p> <p>如果需要把代碼顯示為一個獨立的塊元素，請使用 <pre> 標簽：</p> <pre> <article> <h1>Article Heading</h1> </article> </pre>- 1
- 2
- 3
- 4
- 5
- 6
- 7
<header> 作為內聯元素被包圍。
如果需要把代碼顯示為一個獨立的塊元素，請使用 <pre> 標簽：
<article>
<h1>Article Heading</h1>
</article>
更多實例
Bootstrap 表格
Bootstrap 提供了一個清晰的創建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
| 標簽 | 描述 |
|---|---|
<table> |
為表格添加基礎樣式。 |
<thead> |
表格標題行的容器元素（<tr>），用來標識表格列。 |
<tbody> |
表格主體中的表格行的容器元素（<tr>）。 |
<tr> |
一組出現在單行上的表格單元格的容器元素（<td> 或 <th>）。 |
<td> |
默認的表格單元格。 |
<th> |
特殊的表格單元格，用來標識列或行（取決於范圍和位置）。必須在 <thead> 內使用。 |
<caption> |
關於表格存儲內容的描述或總結。(無論放在表格上面位置,都會出現在表格上方) |
表格類
下表樣式可用於表格中：
| 類 | 描述 |
|---|---|
| .table | 為任意 <table> 添加基本樣式 (只有橫向分隔線)(包含大小尺寸等) |
| .table-striped | 在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持) |
| .table-bordered | 為所有表格的單元格添加邊框 |
| .table-hover | 在 <tbody> 內的任一行啟用鼠標懸停狀態(顏色改變) |
| .table-condensed | 讓表格更加緊湊 |
聯合使用所有表格類:
<table class="table table-striped table-bordered table-hover table-condensed"> <caption>聯合使用所有表格類:</caption> <thead> <tr> <th>#</th> <th>Firstname</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Anna</td> </tr> <tr> <td>2</td> <td>Debbie</td> </tr> <tr> <td>3</td> <td>John</td> </tr> </tbody> </table>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
<tr>, <th> 和 <td> 類
下表的類可用於表格的行或者單元格：
| 類 | 描述 |
|---|---|
| .active | 將懸停的顏色應用在行或者單元格上 |
| .success | 表示成功的操作 |
| .info | 表示信息變化的操作 |
| .warning | 表示一個警告的操作 |
| .danger | 表示一個危險的操作 |
響應式表格
通過把任意的 .table 包在 .table-responsive class 內，您可以讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，您將看不到任何的差別。
實例
<div class="table-responsive"> <table class="table"> <caption>響應式表格布局</caption> <thead> <tr> <th>產品</th> <th>付款日期</th> <th>狀態</th></tr> </thead> <tbody> <tr> <td>產品1</td> <td>23/11/2013</td> <td>待發貨</td></tr> <tr> <td>產品2</td> <td>10/11/2013</td> <td>發貨中</td></tr> <tr> <td>產品3</td> <td>20/10/2013</td> <td>待確認</td></tr> <tr> <td>產品4</td> <td>20/10/2013</td> <td>已退貨</td></tr> </tbody> </table> </div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
Bootstrap 表單
在本章中，我們將學習如何使用 Bootstrap 創建表單。Bootstrap 通過一些簡單的 HTML 標簽和擴展的類即可創建出不同樣式的表單。
表單布局
Bootstrap 提供了下列類型的表單布局：
- 垂直表單（默認）
- 內聯表單
- 水平表單
垂直或基本表單
基本的表單結構是 Bootstrap 自帶的，個別的表單控件自動接收一些全局樣式。下面列出了創建基本表單的步驟：
- 向父
<form>元素添加 role=”form”。 - 把標簽和控件放在一個帶有 class .form-group 的
<div>中。這是獲取最佳間距所必需的。 - 向所有的文本元素
<input>、<textarea>和<select>添加 class .form-control。
<form role="form"> <div class="form-group"> <label for="name">名稱</label> <input type="text" class="form-control" id="name" placeholder="請輸入名稱"> </div> <div class="form-group"> <label for="inputfile">文件輸入</label> <input type="file" id="inputfile"> <p class="help-block">這里是塊級幫助文本的實例。</p> </div> <div class="checkbox"> <label> <input type="checkbox">請打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
內聯表單
如果需要創建一個表單，它的所有元素是內聯的，向左對齊的，標簽是並排的，請向 標簽添加 class .form-inline。
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="name">名稱</label> <input type="text" class="form-control" id="name" placeholder="請輸入名稱"> </div> <div class="form-group"> <label class="sr-only" for="inputfile">文件輸入</label> <input type="file" id="inputfile"> </div> <div class="checkbox"> <label> <input type="checkbox">請打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
-
默認情況下，Bootstrap 中的 input、select 和 textarea 有 100%寬度。在使用內聯表單時，您需要在表單控件上設置一個寬度。
-
使用 class .sr-only，您可以隱藏內聯表單的標簽。
水平表單
水平表單與其他表單不僅標記的數量上不同，而且表單的呈現形式也不同。如需創建一個水平布局的表單，請按下面的幾個步驟進行：
- 向父
<form>元素添加 class .form-horizontal。 - 把標簽和控件放在一個帶有 class .form-group 的
<div>中。 - 向標簽添加 class .control-label。
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="請輸入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">姓</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="請輸入姓"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox">請記住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登錄</button> </div> </div> </form>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
支持的表單控件
Bootstrap 支持最常見的表單控件，主要是 input、textarea、checkbox、radio 和 select。
輸入框（Input）
最常見的表單文本字段是輸入框 input。用戶可以在其中輸入大多數必要的表單數據。Bootstrap 提供了對所有原生的 HTML5 的 input 類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。適當的 type 聲明是必需的，這樣才能讓 input 獲得完整的樣式。
<form role="form"> <div class="form-group"> <label for="name">標簽</label> <input type="text" class="form-control" placeholder="文本輸入"> </div> </form>- 1
- 2
- 3
- 4
- 5
- 6
文本框（Textarea）
當您需要進行多行輸入的時，則可以使用文本框 textarea。必要時可以改變 rows 屬性（較少的行 = 較小的盒子，較多的行 = 較大的盒子）。
<form role="form"> <div class="form-group"> <label for="name">文本框</label> <textarea class="form-control" rows="3"></textarea> </div> </form>- 1
- 2
- 3
- 4
- 5
- 6
復選框（Checkbox）和單選框（Radio）
復選框和單選按鈕用於讓用戶從一系列預設置的選項中進行選擇。
-
當創建表單時，如果您想讓用戶從列表中選擇若干個選項時，請使用 checkbox。如果您限制用戶只能選擇一個選項，請使用 radio。
-
對一系列復選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。
下面的實例演示了這兩種類型（默認和內聯）：
<label for="name">默認的復選框和單選按鈕的實例</label> <div class="checkbox"> <label> <input type="checkbox" value="">選項 1 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="">選項 2 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>選項 1 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">選項 2 - 選擇它將會取消選擇選項 1 </label> </div> <label for="name">內聯的復選框和單選按鈕的實例</label> <div> <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="checkbox-inline"> <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>選項 1 </label> <label class="checkbox-inline"> <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">選項 2 </label> </div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
選擇框（Select）
當您想讓用戶從多個選項中進行選擇，但是默認情況下只能選擇一個選項時，則使用選擇框。
- 使用
<select>展示列表選項，通常是那些用戶很熟悉的選擇列表，比如州或者數字。 - 使用 multiple=”multiple” 允許用戶選擇多個選項。
下面的實例演示了這兩種類型（select 和 multiple）：
<form role="form"> <div class="form-group"> <label for="name">選擇列表</label> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <label for="name">可多選的選擇列表</label> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </form>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
靜態控件
當您需要在一個水平表單內的表單標簽后放置純文本時，請在
<p>上使用 class .form-control-static。
<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">密碼</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="請輸入密碼"> </div> </div> </form>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
表單控件狀態
除了 :focus 狀態（即，用戶點擊 input 或使用 tab 鍵聚焦到 input 上），Bootstrap 還為禁用的輸入框定義了樣式，並提供了表單驗證的 class。
輸入框焦點
當輸入框 input 接收到 :focus 時，輸入框的輪廓會被移除，同時應用 box-shadow。
禁用的輸入框 input
如果您想要禁用一個輸入框 input，只需要簡單地添加 disabled 屬性，這不僅會禁用輸入框，還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。
禁用的字段集 fieldset
對<fieldset>添加 disabled 屬性來禁用<fieldset>內的所有控件。
驗證狀態
Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只需要對父元素簡單地添加適當的 class（.has-warning、 .has-error 或 .has-success）即可使用驗證狀態。
<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">聚焦</label> <div class="col-sm-10"> <input class="form-control" id="focusedInput" type="text" value="該輸入框獲得焦點..."> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">禁用</label> <div class="col-sm-10"> <input class="form-control" id="disabledInput" type="text" placeholder="該輸入框禁止輸入..." disabled> </div> </div> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput" class="col-sm-2 control-label">禁用輸入（Fieldset disabled）</label> <div class="col-sm-10"> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"> </div> </div> <div class="form-group"> <label for="disabledSelect" class="col-sm-2 control-label">禁用選擇菜單（Fieldset disabled）</label> <div class="col-sm-10"> <select id="disabledSelect" class="form-control"> <option>禁止選擇</option> </select> </div> </div> </fieldset> <div class="form-group has-success"> <label class="col-sm-2 control-label" for="inputSuccess">輸入成功</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputSuccess"> </div> </div> <div class="form-group has-warning"> <label class="col-sm-2 control-label" for="inputWarning">輸入警告</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputWarning"> </div> </div> <div class="form-group has-error"> <label class="col-sm-2 control-label" for="inputError">輸入錯誤</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputError"> </div> </div> </form>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
表單控件大小
您可以分別使用 class .input-lg 和 .col-lg-* 來設置表單的高度和寬度。下面的實例演示了這點：
<form role="form"> <div class="form-group"> <input class="form-control input-lg" type="text" placeholder=".input-lg"> </div> <div class="form-group"> <input class="form-control" type="text" placeholder="默認輸入"> </div> <div class="form-group"> <input class="form-control input-sm" type="text" placeholder=".input-sm"> </div> <div class="form-group"></div> <div class="form-group"> <select class="form-control input-lg"> <option value="">.input-lg</option> </select> </div> <div class="form-group"> <select class="form-control"> <option value="">默認選擇</option> </select> </div> <div class="form-group"> <select class="form-control input-sm"> <option value="">.input-sm</option> </select> </div> <div class="row"> <div class="col-lg-2"> <input type="text" class="form-control" placeholder=".col-lg-2"> </div> <div class="col-lg-3"> <input type="text" class="form-control" placeholder=".col-lg-3"> </div> <div class="col-lg-4"> <input type="text" class="form-control" placeholder=".col-lg-4"> </div> </div> </form>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
表單幫助文本
Bootstrap 表單控件可以在輸入框 input 上有一個塊級幫助文本。為了添加一個占用整個寬度的內容塊，請在
<input>后使用 .help-block。下面的實例演示了這點：
<form role="form"> <span>幫助文本實例</span> <input class="form-control" type="text" placeholder=""> <span class="help-block">一個較長的幫助文本塊，超過一行， 需要擴展到下一行。本實例中的幫助文本總共有兩行。</span> </form>- 1
- 2
- 3
- 4
- 5
- 6