引導程序

基礎 CSS

使用可擴展類進行樣式化和增強的基本 HTML 元素。

排版

標題

所有 HTML 標題都可用<h1>。<h6>

h1。標題 1

h2。標題 2

h3。標題 3

h4。標題 4

h5。標題 5
h6. 標題 6

正文副本

Bootstrap 的全局默認font-size值為14px，aline-height為20px。這適用於<body>所有段落。此外，<p>（段落）的下邊距為其行高的一半（默認為 10px）。

Nullam quis risus eget urna mollis ornare vel eu leo。Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus。Nullam id dolor id nibh ultricies 車輛。

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus。Donec ullamcorper nulla non metus auctor fringilla。Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit。Donec ullamcorper nulla non metus auctor fringilla。

Maecenas sed diam eget risus varius blandit sat amet non magna。Donec id elit non mi porta gravida 在 eget metus。Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit。

<p> ... </p>

鉛正文副本

通過添加使段落脫穎而出.lead。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。Duis mollis, est non commodo luctus。

<p類= “鉛” > ... </p>

用更少的東西建造

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

強調

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

<small>

為了不強調行內或文本塊，請使用小標籤。

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

<p> <small>這行文本被視為精美印刷品。</小> </p>

大膽的

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

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

<strong>呈現為粗體文本</strong>

斜體

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

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

<em>呈現為斜體文本</em>

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

對齊類

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

左對齊文本。

居中對齊的文本。

右對齊文本。

  1. <p class = "text-left" >左對齊文本。</p> 
  2. <p class = "text-center" >居中對齊的文本。</p> 
  3. <p class = "text-right" >右對齊文本。</p>

重點班

使用少數強調實用程序類通過顏色傳達意義。

Fusce dapibus，tellus ac cursus commodo，tortor mauris nibh。

Etiam porta sem malesuada magna mollis euismod。

Donec ullamcorper nulla non metus auctor fringilla。

Aenean eu leo quam。Pellentesque ornare sem lacinia quam venenatis。

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

  1. <p class = "muted" > Fusce dapibus，tellus ac cursus commodo，tortor mauris nibh。</p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod。</p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla。</p> 
  4. <p class = "text-info" > Aenean eu leo quam。Pellentesque ornare sem lacinia quam venenatis。</p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula。</p>

縮寫

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

<abbr>

對於縮寫長懸停時的擴展文本，請包含該title屬性。

單詞屬性的縮寫是attr。

<abbr title = "屬性" > attr </abbr>

<abbr class="initialism">

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

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

<abbr title = "超文本標記語言" class = "initialism" > HTML </abbr>

地址

提供最近的祖先或整個工作的聯繫信息。

<address>

通過以 . 結尾的所有行來保留格式<br>。

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 電話
： (123) 456-7890
全名
[email protected] 
  1. <地址>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   福爾瑟姆大街 795 號，套房 600 <br>
  4.   加利福尼亞州舊金山 94107 <br>
  5.   <abbr title = "電話" > P: </abbr> (123) 456-7890 
  6. </地址>
  7.  
  8. <地址>
  9.   <strong>全名</strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </地址>

塊引用

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

默認塊引用

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

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

  1. <塊引用>
  2.   <p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。Integer pouere 表示賭注。</p>
  3. </blockquote>

塊引用選項

標準塊引用的簡單變化的樣式和內容更改。

命名源

添加<small>標籤以識別來源。將源作品的名稱包裝在<cite>.

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

源標題中著名的人 
  1. <塊引用>
  2.   <p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。Integer pouere 表示賭注。</p>
  3.   <small>名人<cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

備用顯示器

用於.pull-right浮動的右對齊塊引用。

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

源標題中著名的人 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

列表

無序

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

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

已訂購

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

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

無樣式

刪除list-style列表項的默認值和左側填充（僅限直接子項）。

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

排隊

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

  • Lorem ipsum
  • 菜豆
  • Nulla volutpat
  1. <ul類= “內聯” > 
  2.   <li> ... </li>
  3. </ul>

描述

術語列表及其相關描述。

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

橫向描述

使術語和描述<dl>並排排列。

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

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

代碼

排隊

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

例如， <section>應包裝為內聯。 
  1. 例如< code > & lt ; section & gt ;</ code >應該被包裝成內聯。

基本塊

用於<pre>多行代碼。請務必轉義代碼中的任何尖括號以進行正確渲染。

<p>此處為示例文本...</p>
  1. <上一頁>
  2.   <p>此處為示例文本...</p>
  3. </pre>

小心！確保標籤內的<pre>代碼盡可能靠近左邊；它將呈現所有選項卡。

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

表

默認樣式

對於基本樣式（淺色填充和僅水平分隔線），將基類添加.table到任何<table>.

# 名 姓 用戶名
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里 鳥 @推特 
  1. <表類= “表” > 
  2.   …
  3. </table>

選修課

將以下任何類添加到.table基類。

.table-striped

<tbody>通過CSS 選擇器將斑馬條紋添加到任何表格行:nth-child（在 IE7-8 中不可用）。

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

.table-bordered

為表格添加邊框和圓角。

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

.table-hover

在<tbody>.

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

.table-condensed

通過將單元格填充減半，使表格更緊湊。

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

可選行類

使用上下文類為表格行著色。

班級 描述
.success 表示成功或積極的行動。
.error 表示危險或潛在的負面行為。
.warning 表示可能需要注意的警告。
.info 用作默認樣式的替代品。
# 產品 已付款 地位
1 結核病 - 每月 2012 年 1 月 4 日 得到正式認可的
2 結核病 - 每月 2012 年 2 月 4 日 拒絕
3 結核病 - 每月 2012 年 3 月 4 日 待辦的
4 結核病 - 每月 2012 年 4 月 4 日 打電話確認 
  1. ...
  2.   < tr類= “成功” >
  3.     <td> 1 < /td>
  4.     <td>TB - 每月</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>批准</ td >
  7.   </ tr >
  8. ...

支持的表格標記

支持的表格 HTML 元素列表以及應如何使用它們。

標籤 描述
<table> 用於以表格格式顯示數據的包裝元素
<thead> <tr>表格標題行 ( ) 用於標記表格列的容器元素
<tbody> <tr>表格主體中表格行 ( ) 的容器元素
<tr> 出現在單行上的一組表格單元格 (<td>或)的容器元素<th>
<td> 默認表格單元格
<th> 列（或行，取決於範圍和位置）標籤的特殊表格單元格
<caption> 表格內容的描述或摘要，對屏幕閱讀器特別有用 
  1. <表格>
  2.   <標題> ... </標題>
  3.   <頭>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

形式

默認樣式

單個表單控件接收樣式，但沒有任何必需的基類<form>或標記的較大更改。在表單控件頂部產生堆疊的左對齊標籤。

傳奇 此處的示例塊級幫助文本。 
  1. <表格>
  2.   <字段集>
  3.     <legend>圖例</legend>
  4.     <label>標籤名稱</label>
  5.     <input type = "text" placeholder = "Type something..." >  
  6.     <span class = "help-block" >此處的示例塊級幫助文本。</span> 
  7.     <標籤類= “複選框” > 
  8.       <輸入類型= “複選框” >檢查我 
  9.     </標籤>
  10.     <button type = "submit" class = "btn" >提交</button>  
  11.   </fieldset>
  12. </form>

可選佈局

Bootstrap 中包含三個用於常見用例的可選表單佈局。

搜索表格

添加.form-search到表單和額外的圓形文本輸入.search-query。<input>

  1. <表單類= “表單搜索” > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" >搜索</button>  
  4. </form>

內聯表格

添加.form-inline左對齊標籤和內聯塊控件以實現緊湊佈局。

  1. <form class = "form-inline" > 
  2.   <輸入類型= “文本”類= “輸入小”佔位符= “電子郵件” >   
  3.   <輸入類型= “密碼”類= “輸入小”佔位符= “密碼” >   
  4.   <標籤類= “複選框” > 
  5.     <input type = "checkbox" >記住我 
  6.   </標籤>
  7.   <button type = "submit" class = "btn" >登錄</button>  
  8. </form>

水平形式

右對齊標籤並將它們浮動到左側，使它們與控件顯示在同一行。需要對默認表單進行最多的標記更改：

  • 添加.form-horizontal到表單
  • 包裝標籤和控件.control-group
  • 添加.control-label到標籤
  • 包裝任何相關的控件.controls以正確對齊
  1. <form class = "form-horizo​​ntal" > 
  2.   <div類= “控制組” > 
  3.     <label class = "control-label" for = "inputEmail" >電子郵件</label>  
  4.     <div類= "控件" > 
  5.       <輸入類型= “文本” ID = “輸入電子郵件”佔位符= “電子郵件” >   
  6.     </div>
  7.   </div>
  8.   <div類= “控制組” > 
  9.     <label class = "control-label" for = "inputPassword" >密碼</label>  
  10.     <div類= "控件" > 
  11.       <輸入類型= “密碼” id = “輸入密碼”佔位符= “密碼” >   
  12.     </div>
  13.   </div>
  14.   <div類= “控制組” > 
  15.     <div類= "控件" > 
  16.       <標籤類= “複選框” > 
  17.         <input type = "checkbox" >記住我 
  18.       </標籤>
  19.       <button type = "submit" class = "btn" >登錄</button>  
  20.     </div>
  21.   </div>
  22. </form>

支持的表單控件

示例表單佈局中支持的標準表單控件示例。

輸入

最常見的表單控件，基於文本的輸入字段。包括對所有 HTML5 類型的支持：文本、密碼、日期時間、本地日期時間、日期、月份、時間、星期、數字、電子郵件、網址、搜索、電話和顏色。

type需要始終使用指定的。

  1. <輸入類型= “文本”佔位符= “文本輸入” >

文本區域

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

  1. <textarea rows = "3" ></textarea>

複選框和收音機

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

默認（堆疊）


  1. <標籤類= “複選框” > 
  2.   <輸入類型= “複選框”值= “” >  
  3.   選項一是這樣那樣——一定要包括為什麼它很棒
  4. </標籤>
  5.  
  6. <標籤類= “收音機” > 
  7.   <輸入類型= “收音機”名稱= “optionsRadios” id = “optionsRadios1”值= “option1”檢查>     
  8.   選項一是這樣那樣——一定要包括為什麼它很棒
  9. </標籤>
  10. <標籤類= “收音機” > 
  11.   <輸入類型= “收音機”名稱= “optionsRadios” id = “optionsRadios2”值= “option2” >    
  12.   選項二可以是別的東西，選擇它會取消選擇選項一
  13. </標籤>

內聯複選框

將.inline類添加到一系列複選框或單選中，以使控件出現在同一行。

  1. <label class = "複選框內聯" > 
  2.   <輸入類型= “複選框” id = “inlineCheckbox1”值= “選項1” > 1   
  3. </標籤>
  4. <label class = "複選框內聯" > 
  5.   <輸入類型= “複選框” id = “inlineCheckbox2”值= “選項2” > 2   
  6. </標籤>
  7. <label class = "複選框內聯" > 
  8.   <輸入類型= “複選框” id = “inlineCheckbox3”值= “選項 3 ” > 3   
  9. </標籤>

選擇

使用默認選項或指定 amultiple="multiple"以一次顯示多個選項。


  1. <選擇>
  2.   <選項> 1 </選項>
  3.   <選項> 2 </選項>
  4.   <選項> 3 </選項>
  5.   <選項> 4 </選項>
  6.   <選項> 5 </選項>
  7. </選擇>
  8.  
  9. <選擇多個= “多個” > 
  10.   <選項> 1 </選項>
  11.   <選項> 2 </選項>
  12.   <選項> 3 </選項>
  13.   <選項> 4 </選項>
  14.   <選項> 5 </選項>
  15. </選擇>

擴展表單控件

除了現有的瀏覽器控件之外，Bootstrap 還包括其他有用的表單組件。

前置和附加輸入

在任何基於文本的輸入之前或之後添加文本或按鈕。請注意，select此處不支持元素。

默認選項

使用兩個類之一包裝 an.add-on和 aninput以將文本添加到輸入中。

@

.00 
  1. <div類= “輸入前置” > 
  2.   <span class = "附加組件" > @ </span> 
  3.   <輸入類= “span2” id = “prependedInput ”類型= “文本”佔位符= “用戶名” >    
  4. </div>
  5. <div類= “輸入附加” > 
  6.   <輸入類= “span2” id = “附加輸入”類型= “文本” >   
  7.   <span class = "附加" > .00 </span> 
  8. </div>

結合

使用兩個類和兩個實例.add-on來前置和附加輸入。

$ .00 
  1. <div class = "輸入-前置輸入-追加" > 
  2.   <span class = "附加組件" > $ </span> 
  3.   <輸入類= “span2” id = “appendedPrependedInput ”類型= “文本” >   
  4.   <span class = "附加" > .00 </span> 
  5. </div>

按鈕而不是文本

代替<span>帶有文本的 a ，使用 a.btn將一個（或兩個）按鈕附加到輸入。

  1. <div類= “輸入附加” > 
  2.   <輸入類= “span2” id = “附加輸入按鈕”類型= “文本” >   
  3.   <button class = "btn" type = "button" >開始！</按鈕>  
  4. </div>
  1. <div類= “輸入附加” > 
  2.   <輸入類= “span2” id = “附加輸入按鈕”類型= “文本” >   
  3.   <button class = "btn" type = "button" >搜索</button>  
  4.   <button class = "btn" type = "button" >選項</button>  
  5. </div>

按鈕下拉菜單

  1. <div類= “輸入附加” > 
  2.   <輸入類= “span2” id = “appendedDropdownButton ”類型= “文本” >   
  3.   <div class = "btn-group" > 
  4.     <按鈕類= “btn下拉切換”數據切換= “下拉” >  
  5.       行動
  6.       <span class = "caret" ></span> 
  7.     </按鈕>
  8.     <ul class = "下拉菜單" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div類= “輸入前置” > 
  2.   <div class = "btn-group" > 
  3.     <按鈕類= “btn下拉切換”數據切換= “下拉” >  
  4.       行動
  5.       <span class = "caret" ></span> 
  6.     </按鈕>
  7.     <ul class = "下拉菜單" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <輸入類= “span2” id = “prependedDropdownButton ”類型= “文本” >   
  12. </div>
  1. <div class = "輸入-前置輸入-追加" > 
  2.   <div class = "btn-group" > 
  3.     <按鈕類= “btn下拉切換”數據切換= “下拉” >  
  4.       行動
  5.       <span class = "caret" ></span> 
  6.     </按鈕>
  7.     <ul class = "下拉菜單" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <輸入類= “span2” id = “appendedPrependedDropdownButton ”類型= “文本” >   
  12.   <div class = "btn-group" > 
  13.     <按鈕類= “btn下拉切換”數據切換= “下拉” >  
  14.       行動
  15.       <span class = "caret" ></span> 
  16.     </按鈕>
  17.     <ul class = "下拉菜單" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

分段下拉組

  1. <表格>
  2.   <div類= “輸入前置” > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <輸入類型= “文本” > 
  5.   </div>
  6.   <div類= “輸入附加” > 
  7.     <輸入類型= “文本” > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

搜索表格

  1. <表單類= “表單搜索” > 
  2.   <div類= “輸入附加” > 
  3.     <輸入類型= “文本”類= “span2搜索查詢” >  
  4.     <button type = "submit" class = "btn" >搜索</button>  
  5.   </div>
  6.   <div類= “輸入前置” > 
  7.     <button type = "submit" class = "btn" >搜索</button>  
  8.     <輸入類型= “文本”類= “span2搜索查詢” >  
  9.   </div>
  10. </form>

控制大小

使用相對大小類，例如使用類.input-large或將您的輸入與網格列大小相匹配.span*。

塊級輸入

使任何<input>或<textarea>元素的行為類似於塊級元素。

  1. <輸入類= “輸入塊級”類型= “文本”佔位符= “.輸入塊級” >

相對尺寸

  1. <輸入類= “輸入迷你”類型= “文本”佔位符= “.輸入迷你” >   
  2. <輸入類= “輸入小”類型= “文本”佔位符= “.輸入小” >   
  3. <輸入類= “輸入媒體”類型= “文本”佔位符= “.輸入媒體” >   
  4. <輸入類= “輸入-大”類型= “文本”佔位符= “.輸入-大” >   
  5. <輸入類= “輸入-xlarge”類型= “文本”佔位符= “.input-xlarge” >   
  6. <輸入類= “input-xxlarge”類型= “文本”佔位符= “.input-xxlarge” >

小心！在未來的版本中，我們將更改這些相對輸入類的使用以匹配我們的按鈕大小。例如，.input-large將增加輸入的填充和字體大小。

網格大小

用於匹配相同大小的網格列的輸入.span1。.span12

  1. <輸入類= “span1”類型= “文本”佔位符= “.span1” >   
  2. <輸入類= “span2”類型= “文本”佔位符= “.span2” >   
  3. <輸入類= “span3”類型= “文本”佔位符= “.span3” >   
  4. <選擇類= “span1” > 
  5.   ...
  6. </選擇>
  7. <選擇類= “span2” > 
  8.   ...
  9. </選擇>
  10. <選擇類= “span3” > 
  11.   ...
  12. </選擇>

對於每行多個網格輸入，請使用.controls-row修飾符類以獲得適當的間距。它浮動輸入以折疊空白，設置適當的邊距並清除浮動。

  1. <div類= "控件" > 
  2.   <輸入類= “span5”類型= “文本”佔位符= “.span5” >   
  3. </div>
  4. <div class = "控件控件行" > 
  5.   <輸入類= “span4”類型= “文本”佔位符= “.span4” >   
  6.   <輸入類= “span1”類型= “文本”佔位符= “.span1” >   
  7. </div>
  8. ...

不可編輯的輸入

在不使用實際表單標記的情況下以不可編輯的表單呈現數據。

這裡有些價值 
  1. <span class = "input-xlarge uneditable-input" >這裡有一些值</span>

表單操作

用一組動作（按鈕）結束一個表單。當放置在 a.form-actions中時，按鈕將自動縮進以與表單控件對齊。

  1. <div class = "表單操作" > 
  2.   <button type = "submit" class = "btn btn-primary" >保存更改</button>  
  3.   <button type = "button" class = "btn" >取消</button>  
  4. </div>

幫助文本

對出現在表單控件周圍的幫助文本的內聯和塊級支持。

內聯幫助

內聯幫助文本 
  1. <input type = "text" ><span class = "help-inline" >內聯幫助文本</span>

阻止幫助

一個較長的幫助文本塊，它換行並可能超出一行。 
  1. <input type = "text" ><span class = "help-block" >一個較長的幫助文本塊，它換行並可能超出一行。</span>

表單控件狀態

通過表單控件和標籤的基本反饋狀態向用戶或訪問者提供反饋。

輸入焦點

我們刪除了某些表單控件上的默認outline樣式，並box-shadow在其位置應用了:focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "This is focus..." >

輸入無效

通過默認瀏覽器功能使用:invalid. 指定 a ，如果該字段不是可選的，則type添加屬性，並且（如果適用）指定 a 。requiredpattern

由於缺乏對 CSS 偽選擇器的支持，這在 Internet Explorer 7-9 版本中不可用。

  1. <輸入類= “span3”類型= “電子郵件”需要>

禁用輸入

在輸入上添加disabled屬性以防止用戶輸入並觸發略有不同的外觀。

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

驗證狀態

Bootstrap 包括錯誤、警告、信息和成功消息的驗證樣式。要使用，請將適當的類添加到周圍的.control-group.

可能出了點問題
請更正錯誤
用戶名已存在
嗚呼！ 
  1. <div class = "控制組警告" > 
  2.   <label class = "control-label" for = "inputWarning" >輸入警告</label>  
  3.   <div類= "控件" > 
  4.     <輸入類型= “文本” id = “輸入警告” >  
  5.     <span class = "help-inline" >可能出了點問題</span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "控制組錯誤" > 
  10.   <label class = "control-label" for = "inputError" >輸入錯誤</label>  
  11.   <div類= "控件" > 
  12.     <輸入類型= “文本” id = “輸入錯誤” >  
  13.     <span class = "help-inline" >請更正錯誤</span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "控制組信息" > 
  18.   <label class = "control-label" for = "inputInfo" >輸入信息</label>  
  19.   <div類= "控件" > 
  20.     <輸入類型= “文本” id = “輸入信息” >  
  21.     <span class = "help-inline" >用戶名已被佔用</span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "控制組成功" > 
  26.   <label class = "control-label" for = "inputSuccess" >輸入成功</label>  
  27.   <div類= "控件" > 
  28.     <輸入類型= “文本” id = “輸入成功” >  
  29.     <span class = "help-inline" >哇哦！</span> 
  30.   </div>
  31. </div>

鈕扣

默認按鈕

按鈕樣式可以應用於任何應用了.btn類的東西。但是，通常您只想將這些應用於<a>和<button>元素以獲得最佳渲染效果。

按鈕 類="" 描述
btn 帶漸變的標準灰色按鈕
btn btn-primary 提供額外的視覺權重並識別一組按鈕中的主要操作
btn btn-info 用作默認樣式的替代品
btn btn-success 表示成功或積極的行動
btn btn-warning 表示應謹慎執行此操作
btn btn-danger 表示危險或潛在的負面行為
btn btn-inverse 備用深灰色按鈕，與語義操作或使用無關
btn btn-link 通過在保持按鈕行為的同時使其看起來像一個鏈接來淡化按鈕

跨瀏覽器兼容性

IE9 不會在圓角上裁剪背景漸變，因此我們將其移除。與此相關的是，IE9 使禁用button的元素卡頓，將文本呈現為灰色，並帶有我們無法修復的令人討厭的文本陰影。

按鈕尺寸

喜歡更大或更小的按鈕？添加.btn-large、.btn-small或.btn-mini用於其他尺寸。

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" >大按鈕</button>  
  3.   <button class = "btn btn-large" type = "button" >大按鈕</button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" >默認按鈕</button>  
  7.   <button class = "btn" type = "button" >默認按鈕</button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" >小按鈕</button>  
  11.   <button class = "btn btn-small" type = "button" >小按鈕</button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" >迷你按鈕</button>  
  15.   <button class = "btn btn-mini" type = "button" >迷你按鈕</button>  
  16. </p>

通過添加.btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" >塊級按鈕</button>  
  2. <button class = "btn btn-large btn-block" type = "button" >塊級按鈕</button>

禁用狀態

讓按鈕看起來無法點擊，讓它們向後退 50%。

錨元素

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

主鏈接 關聯 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" >主鏈接</a>  
  2. <a href = "#" class = "btn btn-large disabled" >鏈接</a>

小心！我們.disabled這裡作為實用類使用，類似於普通.active類，所以不需要前綴。此外，該課程僅用於美學；您必須使用自定義 JavaScript 來禁用此處的鏈接。

按鈕元素

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

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" >主按鈕</button>   
  2. <按鈕類型= “按鈕”類= “btn btn-large”禁用>按鈕</button>

一類，多標籤

在、或元素上使用.btn類。<a><button><input>

關聯 
  1. <a class = "btn" href = "" >鏈接</a>  
  2. <button class = "btn" type = "submit" >按鈕</button>  
  3. <輸入類= “btn”類型= “按鈕”值= “輸入” >   
  4. <輸入類= “btn”類型= “提交”值= “提交” >

作為最佳實踐，請嘗試為您的上下文匹配元素，以確保匹配跨瀏覽器呈現。如果您有input，<input type="submit">請為您的按鈕使用 。

圖片

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

140x140 140x140 140x140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

小心！ .img-rounded由於缺乏支持，.img-circle不能在 IE7-8 中工作。border-radius

由Glyphicons 設計的圖標

圖標字形

140 個精靈形式的圖標，有深灰色（默認）和白色，由Glyphicons提供。

  • 圖標玻璃
  • 圖標音樂
  • 圖標搜索
  • 圖標信封
  • 圖標心
  • 圖標星
  • 圖標星空
  • 圖標用戶
  • 偶像電影
  • 大圖標
  • 圖標號
  • 圖標列表
  • 圖標-確定
  • 圖標刪除
  • 圖標放大
  • 圖標縮小
  • 圖標關閉
  • 圖標信號
  • 圖標齒輪
  • 圖標垃圾
  • 圖標主頁
  • 圖標文件
  • 圖標時間
  • 圖標路
  • 圖標下載-alt
  • 圖標下載
  • 圖標上傳
  • 圖標收件箱
  • 圖標播放圈
  • 圖標重複
  • 圖標刷新
  • 圖標列表替代
  • 圖標鎖
  • 圖標標誌
  • 圖標耳機
  • 圖標音量關閉
  • 圖標音量降低
  • 圖標音量
  • 圖標-二維碼
  • 圖標條碼
  • 圖標標籤
  • 圖標標籤
  • 圖標書
  • 圖標書籤
  • 圖標打印
  • 圖標相機
  • 圖標字體
  • 圖標粗體
  • 圖標斜體
  • 圖標文本高度
  • 圖標文本寬度
  • 圖標左對齊
  • 圖標對齊中心
  • 圖標右對齊
  • 圖標對齊對齊
  • 圖標列表
  • 圖標縮進左
  • 圖標縮進右
  • 圖標-facetime-視頻
  • 圖標圖片
  • 圖標鉛筆
  • 圖標地圖標記
  • 圖標調整
  • 圖標色調
  • 圖標編輯
  • 圖標分享
  • 圖標檢查
  • 圖標移動
  • 圖標-後退
  • 圖標-快退
  • 圖標向後
  • 圖標播放
  • 圖標暫停
  • 圖標停止
  • 圖標轉發
  • 圖標快進
  • 圖標前進
  • 圖標彈出
  • 圖標-雪佛龍-左
  • 圖標-雪佛龍-右
  • 圖標加號
  • 圖標減號
  • 圖標刪除標誌
  • 圖標確定標誌
  • 圖標問號
  • 圖標信息標誌
  • 圖標截圖
  • 圖標刪除圈
  • 圖標-ok-圈
  • 圖標禁止圈
  • 圖標箭頭左
  • 圖標箭頭右
  • 圖標向上箭頭
  • 圖標-向下箭頭
  • 圖標共享替代
  • 圖標調整大小
  • 圖標大小調整小
  • 加號圖標
  • 圖標減號
  • 圖標星號
  • 圖標感嘆號
  • 圖標禮物
  • 圖標葉
  • 圖標-火
  • 圖標-睜眼
  • 圖標-閉眼
  • 圖標警告標誌
  • 圖標平面
  • 圖標日曆
  • 圖標-隨機
  • 圖標評論
  • 圖標磁鐵
  • 圖標-人字形向上
  • 圖標-chevron-down
  • 圖標轉推
  • 圖標購物車
  • 圖標文件夾關閉
  • 圖標文件夾打開
  • 圖標調整大小垂直
  • 圖標調整大小水平
  • 圖標硬盤
  • 圖標擴音器
  • 圖標鈴
  • 圖標證書
  • 圖標豎起大拇指
  • 圖標大拇指向下
  • 圖標-右手
  • 左手圖標
  • 圖標舉手
  • 圖標向下
  • 圖標-圓圈-箭頭-右
  • 圖標圓圈箭頭左
  • 圖標-圓圈-向上箭頭
  • 圖標-圓圈-向下箭頭
  • 圖標地球儀
  • 圖標扳手
  • 圖標任務
  • 圖標過濾器
  • 圖標公文包
  • 圖標全屏

字形圖標歸屬地

Glyphicons半身人通常不是免費提供的，但是 Bootstrap 和 Glyphicons 創作者之間的安排使這成為可能，而您作為開發人員無需支付任何費用。為了感謝您，我們要求您在可行的情況下包含一個返回Glyphicons的可選鏈接。

如何使用

所有圖標都需要一個<i>具有唯一類的標籤，前綴為icon-. 要使用，請將以下代碼放在幾乎任何地方：

  1. <i class = "圖標搜索" ></i>

還有一些可用於倒置（白色）圖標的樣式，可通過一個額外的類來準備。我們將專門針對導航和下拉鍊接的懸停和活動狀態強制執行此類。

  1. <i class = "icon-search icon-white" ></i>

小心！在文本字符串旁邊使用時，例如在按鈕或導航鏈接中，請務必在<i>標籤後留一個空格以保持適當的間距。

圖標示例

在按鈕、工具欄按鈕組、導航或前置表單輸入中使用它們。

鈕扣

按鈕工具欄中的按鈕組
  1. <div類= "btn 工具欄" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
按鈕組中的下拉菜單
用戶 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i>用戶</a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "下拉菜單" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i>編輯</a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i>刪除</a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i>禁止</a></li>  
  8.     <li class = "分隔符" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i>成為管理員</a></li>  
  10.   </ul>
  11. </div>
按鈕尺寸
星星 星星 星星 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Star </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Star </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Star </a>

導航

  1. <ul類= “導航導航列表” > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i>主頁</a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i>庫</a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i>應用程序</a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i>其他</a></li>  
  6. </ul>

表單域

  1. <div類= “控制組” > 
  2.   <label class = "control-label" for = "inputIcon" >電子郵件地址</label>  
  3.   <div類= "控件" > 
  4.     <div類= “輸入前置” > 
  5.       <span class = "附加組件" ><i class = "icon-envelope" ></i></span>  
  6.       <輸入類= “span2” id = “inputIcon”類型= “文本” >   
  7.     </div>
  8.   </div>
  9. </div>