排版
標題
HTML中定義的所有標題標簽, 從<h1> 到 <h6> 都是可用的。
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Body copy
Bootstrap定義的全局 font-size 是 14px，line-height 是 20px。這些樣式應用到了 <body> 和所有的段落上。另外，對 <p> (段落)還定義了1/2行高(默認為10px)的底部外邊距(margin)屬性。
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Lead body copy
通過添加 .lead 讓段落突出顯示
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
使用Less工具構建
variables.less文件中定義的兩個LESS變量決定了排版尺寸: @baseFontSize 和 @baseLineHeight。第一個變量定義了全局font-size基準，第二個變量是line-height基準。我們使用這些變量和一些簡單的公式計算出其它所有頁面元素的margin、
padding和line-height。自定義這些變量即可改變Bootstrap的默認樣式。
強調
直接使用HTML中用于標注強調的標簽，并給他們賦予少許的樣式。
<small>
對于不需要強調的inline或block類型的文本，使用small標簽。
This line of text is meant to be treated as fine print.
<p> <small>This line of text is meant to be treated as fine print.</small> </p>
加粗
用增加font-weight值的方式加粗強調一段文本。
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
斜體
用斜體字強調一段文本。
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
注意！ 在HTML5中可任意使用<b> 和 <i>。<b>是為了高亮詞或短語而不會賦予重要含義，<i>主要被用來表示發言、技術術語等。
對齊類
簡單方便將文字對齊的類。
左對齊文字。
中間對其文字。
右側對其文字。
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</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.
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
縮略語
當鼠標懸停在縮寫和縮寫詞上時就會顯示完整內容，Bootstrap實現了對HTML <abbr>元素的增強樣式。縮略語元素帶有title屬性，外觀表現為帶有較淺的虛線框，鼠標移至上面時會變成帶有“問號”的指針。
<abbr>
如想看完整的內容可把鼠標懸停在縮略語上, 但需要包含title屬性。
An abbreviation of the word attribute is attr.
<abbr title="attribute">attr</abbr>
<abbr class="initialism">
為 <abbr> 標簽添加 .initialism 類使其使用更小一些的字號。
HTML is the best thing since sliced bread.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址
讓聯系信息以最接近日常使用的格式呈現。
<address>
在每行結尾添加<br>可以保留需要的樣式。
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
first.last@example.com
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
引用
在你的文檔中引用其他來源的內容。
默認引用
將任何HTML包裹在<blockquote>之中即可表現為引用。對于直接引用，我們建議用<p>標簽。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
引用選項
在標準的引用里，可以很簡單的改變風格和內容。
命名來源
添加<small>標簽來注明引用來源。來源名稱可以放在<cite> 標簽里面。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous <cite title="Source Title">Source Title</cite></small> </blockquote>
另一種展示風格
使用.pull-right類，可以讓引用展現出向右側移動、對齊的效果。
<blockquote class="pull-right"> ... </blockquote>
列表
無序列表
無序列表是 不關心 先后順序的一組元素的集合。
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul> <li>...</li> </ul>
有序列表
有序列表是 強調 順序的一組元素的集合。
- 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>
無樣式列表
移除了默認的list-style，并左側填充列表(只對直接子節點項有效)。
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="unstyled"> <li>...</li> </ul>
行內列表
使用inline-block讓列表項水平排列一行，同時每項都有少量的內補（padding）。
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="inline"> <li>...</li> </ul>
描述
對一個列表（條目）進行關聯描述。
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl> <dt>...</dt> <dd>...</dd> </dl>
水平描述
使<dl>中的每個條目和其描述一對一水平顯示。
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
注意！
通過加入text-overflow，水平描述列表將會對過長而無法在左欄中完全顯示的列名截斷掉一部分。而在較窄的視口（寬度）中，會改變成垂直(形式)表述，來適應當前屏幕。
代碼
行內代碼
通過<code>標簽內嵌一小段代碼。
<section> should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline.
基本代碼塊
使用<pre>展示多行代碼。為了能夠正確展示，務必將代碼中的任何尖括號做轉義。
<p>Sample text here...</p>
<pre> <p>Sample text here...</p> </pre>
注意！ 因為在<pre>標簽里, tab會被算進去, 所以要保持代碼盡可能的靠左側
你也可以添加.pre-scrollable類，把該區域設置成最大高度為350px并帶有一個Y軸滾動條。
表格
默認樣式
為 <table> 標簽增加基本樣式--很少的內補(padding)并只增加水平分隔線--只要為其增加 .table 類即可。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table"> … </table>
可選的類
下面所列出的類是為了補充 .table 類的基本樣式的。
.table-striped
在<tbody>內，通過:nth-child CSS選擇器 (IE7-8不支持)為表格中的行添加斑馬紋樣式。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped"> … </table>
.table-bordered
為表格增加邊框(border)和圓角(rounded corner)。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-bordered"> … </table>
.table-hover
為 <tbody> 中的每一行賦予鼠標懸停樣式。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-hover"> … </table>
.table-condensed
每個單元格的內補(padding)減半可使表格更緊湊。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-condensed"> … </table>
可選的行屬性
選擇情景(contextual)類為表格添加顏色。
| Class | Description |
|---|---|
.success
|
表示成功或積極的行為。 |
.error
|
表示一個危險或存有潛在危險的行為。 |
.warning
|
表示警告，可能需要注意。 |
.info
|
作為一個默認樣式的一個替代樣式。 |
| # | Product | Payment Taken | Status |
|---|---|---|---|
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 2 | TB - Monthly | 02/04/2012 | Declined |
| 3 | TB - Monthly | 03/04/2012 | Pending |
| 4 | TB - Monthly | 04/04/2012 | Call in to confirm |
...
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
...
受支持的表格標簽
受支持的表格標簽列表以及使用方法。
| 標簽 | 描述 |
|---|---|
<table>
|
包裹以表格形式展示數據的元素 |
<thead>
|
包含表頭(<tr>) 的容器
|
<tbody>
|
包含表格內容(<tr>)的容器
|
<tr>
|
單元格 (<td> 或 <th>) 容器
|
<td>
|
默認的單元格 |
<th>
|
每列(或行，依賴于放置的位置)所對應的的label |
<caption>
|
用于對表的描述或總結，對屏幕閱讀器特別有用 |
<table>
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
表單
默認樣式
無需對<form>添加任何類或改變標簽結構，每個單獨的表單控件都已經被賦予了樣式。默認是堆疊、label左側對齊并在控件之上。
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
可選布局
Bootstrap包含3個可選的常用表單布局。
搜索表單
為表單增加.form-search類，并為<input>增加.search-query類，可將輸入框變成圓角狀。
<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form>
行內表單
為表單增加.form-inline類， 結果是一個壓縮型排列的表單，其中label左側對齊、控件為inline-block類型。
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
水平表單
右側對齊并且左側浮動的label和控件排列在同一行。這需要對默認的表單格式做修改：R
- 為表單添加
.form-horizontal類 - 將label和控件包裹在
.control-group中 - 為label添加
.control-label類 - 將任何相關的控件包裹在
.controls中，以確保最佳的對齊
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
支持的表單控件
在此表單布局案例中包含了所被支持的標準表單控件。
輸入框（Input）
大部分常用的表單控件、文本輸入控件。包括所有HTML5所支持的：text、password、datetime、 datetime-local、date、 month、time、week、number、email、url、search、tel 和 color。
任何時候都需要指定type屬性。
<input type="text" placeholder="Text input">
文本域（Textarea）
此表單控件支持多行文本。可根據需要修改rows屬性。
<textarea rows="3"></textarea>
復選框和單選框
復選框是用于在一個列表中選擇一個或多個選項，而單選框是在眾多選擇中選擇一個選項。
默認（堆疊式）
<label class="checkbox"> <input type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label> <label class="radio"> <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> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label>
行內復選框
為復選框或單選框控件添加.inline類，使他們排列在同一行。
<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>
下拉框
可使用默認的選項或者指定multiple="multiple"屬性一次顯示多個選項。
<select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <select multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
擴展表單控件
除了現有的瀏覽器控件，Bootstrap還額外包含了一些有用的表單組件。
前綴和附加輸入框
在任何文本輸入框之前或之后添加文本或按鈕。注意，select控件不支持。
默認選項
將.add-on和input進行組合，可以將文本放倒輸入框前或后面。
<div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" type="text" placeholder="Username"> </div> <div class="input-append"> <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div>
組合
同時使用兩個類，并將兩個.add-on放在輸入框的前與后。
<div class="input-prepend input-append"> <span class="add-on">$</span> <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div>
按鈕的情況
用.btn代替<span>即可將一個（或兩個）按鈕添加到輸入框前或后。
<div class="input-append"> <input class="span2" id="appendedInputButton" type="text"> <button class="btn" type="button">Go!</button> </div>
<div class="input-append"> <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">Search</button> <button class="btn" type="button">Options</button> </div>
按鈕下拉菜單
<div class="input-append">
<input class="span2" id="appendedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
</div>
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<input class="span2" id="prependedDropdownButton" type="text">
</div>
<div class="input-prepend input-append">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<input class="span2" id="appendedPrependedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
</div>
分段式下拉菜組
<form>
<div class="input-prepend">
<div class="btn-group">...</div>
<input type="text">
</div>
<div class="input-append">
<input type="text">
<div class="btn-group">...</div>
</div>
</form>
搜索表單
<form class="form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Search</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">Search</button>
<input type="text" class="span2 search-query">
</div>
</form>
控件大小
使用相對大小屬性類，例如.input-large或者使用.span*類將輸入框調整到網格列的大小。
塊級輸入框
讓任何<input>或<textarea>元素表現為一個塊級元素。
<input class="input-block-level" type="text" placeholder=".input-block-level">
相對大小
<input class="input-mini" type="text" placeholder=".input-mini"> <input class="input-small" type="text" placeholder=".input-small"> <input class="input-medium" type="text" placeholder=".input-medium"> <input class="input-large" type="text" placeholder=".input-large"> <input class="input-xlarge" type="text" placeholder=".input-xlarge"> <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
注意！ 在未來的版本中，我們將會修改這些類的使用方式，讓他們與按鈕大小的表示方式一致。例如，.input-large將會使輸入框的padding和font-size增大。
網格大小
對輸入框使用.span1 到 .span12 可以將輸入框的大小對齊到網格大小。
<input class="span1" type="text" placeholder=".span1"> <input class="span2" type="text" placeholder=".span2"> <input class="span3" type="text" placeholder=".span3"> <select class="span1"> ... </select> <select class="span2"> ... </select> <select class="span3"> ... </select>
對于每行有多個輸入框的情況，For multiple grid inputs per line, 使用 .controls-row 類為輸入框增加合適的間距。通過浮動讓輸入框之間縮減一些空白，設置適當的邊距，并清除浮動。
<div class="controls"> <input class="span5" type="text" placeholder=".span5"> </div> <div class="controls controls-row"> <input class="span4" type="text" placeholder=".span4"> <input class="span1" type="text" placeholder=".span1"> </div> ...
不可編輯的輸入框
對于在表單中呈現不可編輯的數據，無需使用實際的表單控件。
<span class="input-xlarge uneditable-input">Some value here</span>
表單行為
將一組行為(按鈕)放在表單尾部。當他們放置在.form-actions中時，這些按鈕將會自動縮進，和其它表單控件對齊。
<div class="form-actions"> <button type="submit" class="btn btn-primary">Save changes</button> <button type="button" class="btn">Cancel</button> </div>
幫助文本
表單控件周圍可以放置行內或塊級元素展示幫助文本。
行內幫助
<input type="text"><span class="help-inline">Inline help text</span>
塊級幫助
<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
表單控件狀態
改變表單控件和label的反饋狀態給用戶或者訪客提供反饋。
輸入焦點
我們為一些表單控件移除了默認的outline樣式，并且對他們的:focus狀態設置了box-shadow樣式。
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
無效輸入
為輸入框設置:invalid樣式從而激發瀏覽器默認功能。如果輸入框是必填的，可以指定一個type和required屬性，（如果合適的話）甚至還可以指定pattern屬性。
由于Internet Explorer 7-9不支持CSS偽類選擇器，因此不能在這些瀏覽器中使用。
<input class="span3" type="email" required>
被禁用的輸入框
給輸入框添加disabled屬性可阻止用戶輸入，并且輸入框會呈現稍微不同的外觀。
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
驗證狀態
Bootstrap包含了（錯誤）error、（警告）warning、（通知）info和（成功）success信息的樣式。為.control-group添加適當的屬性即可使用這些樣式。
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputInfo">Input with info</label>
<div class="controls">
<input type="text" id="inputInfo">
<span class="help-inline">Username is already taken</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
圖片
為<img>元素添加相應的類就可以很容易的給圖片設置樣式。
<img src="..." class="img-rounded"> <img src="..." class="img-circle"> <img src="..." class="img-polaroid">
注意！ 由于IE7-8不支持border-radius，因此.img-rounded 和 .img-circle無法正常使用。
圖標 由Glyphicons提供
Icon glyphs
下面展示的140個圖標均提供了深灰色（默認）和白色兩種顏色。由Glyphicons提供。
Glyphicons attribution
Glyphicons Halflings 一般是收費的，但是經過Bootstrap和Glyphicons作者之間的協商，允許開發人員不需要支付費用即可使用。作為對作者的感謝，希望你在使用的時候加個Glyphicons的鏈接。
如何使用
每個圖標都需要依附于一個<i>標簽，并且賦予一個唯一的類（class）。使用時，將類似下面的代碼放到任何需要的地方即可：
<i class="icon-search"></i>
也可以使用反色（白色）樣式的圖標，只需增加一個額外的類。我們將具體展示這些屬性在導航條和下拉菜單中懸停和活動時候的狀態效果。
<i class="icon-search icon-white"></i>
注意！
當在文本旁邊使用這些圖標時，例如按鈕或導航鏈接，務必在<i>標簽后面 添加一個空格，這樣能確保留有合適的間距。
圖標案例
這些圖標可以使用在按鈕、工具欄的按鈕組、導航或表單的前綴輸入框。
按鈕
工具欄的按鈕組
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
</div>
按鈕組中下拉菜單
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
按鈕尺寸
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a> <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a> <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
導航
<ul class="nav nav-list"> <li class="active"><a href="#"><i class="icon-home icon-white"></i> 首頁</a></li> <li><a href="#"><i class="icon-book"></i> Library</a></li> <li><a href="#"><i class="icon-pencil"></i> Applications</a></li> <li><a href="#"><i class="i"></i> Misc</a></li> </ul>
表單域
<div class="control-group">
<label class="control-label" for="inputIcon">Email address</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>