排版
标题
HTML中定义的所有标题标签, 从<h1> 到 <h6> 都是可用的。
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Body主体布局
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引导突出
通过添加 .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>