标题

HTML 的所有的标题标签，<h1> 到 <h6>

h1. 标题 1

h2. 标题 2

h3. 标题 3

h4. 标题 4

h5. 标题 5

h6. 标题 6

正文

Bootstrap 默认的 font-size （字号）是 14px，line-height （行间距）是 20px。会用在所有 <body> 和段落上。另外 <p> ( 段落 ) 的下边会有一半于行距（默认 10px ）的外边距。

故事讲述汤姆从小就是个玩牌高手，所以他的好朋友，肥皂、艾迪和培根决定各凑两万五千英镑，让汤姆去参加一场黑社会高额赌金的牌局。

汤姆从头到尾不知情，其实整个赌金根本就是个大骗局。于是汤姆不但输光所有的钱，还倒欠赌场主人五十万英镑。汤姆在一个星期内不能还清，他和他朋友们的手指和他老爸的酒吧都将不保。汤姆一伙想尽各种可能的凑钱办法，最后决定抢劫隔壁的毒犯。

而隔壁的毒犯同时也正计划抢劫他们的毒品供应商。汤姆一伙的计划听起来简单，但执行时却状况百出。突发的状况让这伙人不由得越陷越深。事情变得十分复杂，场面变得十分混乱。几个小混混发现整个事件已经发展到超出他们的想象，于是极力想逃脱，但是已经……

<p>...</p>

突显的正文

突显段落文字可以添加一个 .lead 类。

斧子哈利是个狠角色，他作了两件事作为本片的两条线索，一是设了一个牌局陷阱，一是派两个抢邮局的小贼去偷两把古董枪。

<p class="lead">...</p>

基于 Less

文字排版的扩展是基于两个 LESS 变量，在 variables.less 里的: @baseFontSize 还有 @baseLineHeight。第一个是基础字号，第二个是基础的行间距。我们使用这两个变量再加上点简单的计算来为所有其它的东西创建外边距，内边距，还有行间距。

强调

使用轻量化的样式为 HTML 的强调类型的标签添加样式

`<small>`

使用 small 标签，可以用在不想强调突出的区块或文字上。

上面段落里的文字是《两杆大烟枪》这部电影的介绍。

<p>
  <small>上面段落里的文字是 《 两杆大烟枪 》这部电影的介绍。</small>
</p>

加粗

使用加粗显示文字。

接下来是使用加粗显示的文字。

<strong>加粗显示的文字</strong>

斜体

使用斜体来强调突出显示文字

接下来是使用斜体显示的文字.

<em>斜体显示的文字</em>

注意 ! 在 HTML5 里，你可以使用 <b> 和 <i> 标签。<b> 标签表示高亮显示的词汇，或者不传递重要性的短语。而 <i> 一般用于声音，术语等等。

对齐类

使用对齐类可以很容易改变文字的对齐方式。

左对齐的文字

居中的文字

右对齐的文字

<p class="text-left">左对齐的文字</p>
<p class="text-center">居中的文字</p>
<p class="text-right">右对齐的文字</p>

强调类

强调类可以使用颜色来强调突出。

从浩瀚的世界影史上选出100部电影，贴上“另类”的标签。

1965年，弗里曼德将12位作家的作品编为一般短篇小说集。

低俗小说、猜火车和两杆老烟枪不是一类故事。

《两杆大烟枪》确实可谓是英伦黑色幽默的极品之作了。

绝！真TMD绝！不愧为《疯狂的石头》的妈妈！哈哈。

<p class="muted">从浩瀚的世界影史上选出100部电影，贴上“另类”的标签。</p>
<p class="text-warning">1965年，弗里曼德将12位作家的作品编为一般短篇小说集。</p>
<p class="text-error">低俗小说、猜火车和两杆老烟枪不是一类故事。</p>
<p class="text-info">《两杆大烟枪》确实可谓是英伦黑色幽默的极品之作了。</p>
<p class="text-success">绝！真TMD绝！不愧为《疯狂的石头》的妈妈！哈哈。</p>

缩略语

使用 HTML 的 <abbr> 元素来添加样式，鼠标悬停在缩写形式词汇上时，会显示词汇的完整版本。把完整版的词汇放在 title 属性里。缩写词汇下会出现点虚线，悬停时鼠标指针会变成问号。

`<abbr>`

下面是一个演示，使用了 title 属性。鼠标放在 “美剧” 这个词上，多等一会儿，就会出现这个词的完整版。

什么是美剧。

<abbr title="美国电视剧">美剧</abbr>

`<abbr class="initialism">`

添加一个 .initialism 到缩略词的标签上，会用小一点的文字来显示。

HTML 学起来比看美剧容易多了。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址

用在联系方式上面。

`<address>`

保留格式可以使用 <br> 结尾。

王皓和小雪科技有限公司
山东，济南
经十西路 28723 号
159 6577 9823

E-Mail
hello@example.com

<address>
  <strong>王皓和小雪科技有限公司</strong><br>
  山东，济南<br>
  经十西路 28723 号<br>
  159 6577 9823
</address>

<address>
  <strong>E-Mail</strong><br>
  <a href="mailto:#">hello@example.com</a>
</address>

引用

内容引用区块，也就是在文档里引用的来自其它地方的内容。

默认引用

使用 <blockquote> 包装任何想引用的 HTML 。直接引用建议使用 <p> 标签。

这部被封装在通心粉西部片之中的影片拥有一个讲述南北战争故事的内核，这种混搭令人非常满意。

<blockquote>
  <p>这部被封装在通心粉西部片之中的影片拥有一个讲述南北战争故事的内核，这种混搭令人非常满意。
  </p>
</blockquote>

引用选项

标准引用的样式与内容的改变。

添加来源名称

使用 <small> 标签来标记所引用的内容的来源。所来源的名称放在 <cite> 标签里包装。

塔伦蒂诺，这个有滋有味玩着暴力美学的家伙，给了丑陋的美国种族主义狠狠一拳。
来自《娱乐周刊》

<blockquote>
  <p>塔伦蒂诺，这个有滋有味玩着暴力美学的家伙，给了丑陋的美国种族主义狠狠一拳。</p>
  <small>来自 <cite 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 再加点边距。

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="inline">
  <li>...</li>
</ul>

描述

列表所有项目都有各自的描述内容。

描述列表: 也就是带描述的列表
WordPress: 优雅的内容管理系统。; 强大而且易用。
Drupal: 拥有强大的社区。
Joomla: 系列里使用了 Bootstrap。

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平描述

让在 <dl> 里的项目和描述水平显示。

描述列表: 也就是带描述的列表
WordPress: 优雅的内容管理系统。; 强大而且易用。
Drupal: 拥有强大的社区。
Joomla: 系列里使用了 Bootstrap。

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

提示！如果水平描述列表的项目太长的话，会使用 text-overflow 截取显示，在窄屏幕下会使用默认的堆砌来显示。

行内

使用 <code> 包装行内的代码片断。

比如 <section> 就应该是使用行内包装。

比如 <code>&lt;section&gt;</code> 就应该是使用行内包装。

区块

使用 <pre> 来包装多行的代码。注意，为了显示正常，你要转换代码里的尖括号。

<p>示范文字...</p>

<pre>
  &lt;p&gt;示范文字...&lt;/p&gt;
</pre>

注意！尽量让在 <pre> 里的代码靠左边显示，因为它会显示所有的空格或 tab。

你可以选择添加 .pre-scrollable 类，这会设置一个最大高度为 350 px，并提供一个垂直滚动条。

默认样式

基本的样式，小边距，并且只有水平分隔线，只需要添加 .table 到 <table> 标签上。

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<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	@twitter

<table class="table table-striped">
  …
</table>

`.table-bordered`

为表格添加圆角边框。

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<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		@twitter

<table class="table table-hover">
  …
</table>

`.table-condensed`

压缩显示表格，去掉了一半的边距。

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-condensed">
  …
</table>

可选行类

带颜色的行。

类	描述
`.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>
...

所支持的表格标记

列出所有支持的 HTML 表格元素，还有应该怎样使用它们。

标签	描述
`<table>`	用表格显示表格数据的包装元素
`<thead>`	用于标记表格栏的头部行 (`<tr>`) 包装元素
`<tbody>`	用于标记表格主体内容的行 (`<tr>`) 包装元素
`<tr>`	Container element for a set of table cells (`<td>` or `<th>`) that appears on a single row
`<td>`	默认的单元格
`<th>`	特殊的单元格，用在栏(或行，取决于应用范围和位置) 标签上
`<caption>`	描述一下表格里的数据的大体情况，对于屏幕阅读器来说非常有用。

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

默认样式

每个单独的表单控件都会应用样式，堆砌显示，标签左对齐，并显示在表单控件上方。不需求添加类到 <form> 元素上，对于标签，也不用有太大的修改。

<form>
  <fieldset>
    <legend>Legend</legend>
    <label>标签名</label>
    <input type="text" placeholder="输入点东西...">
    <span class="help-block">这里是区块级别的帮助文字。</span>
    <label class="checkbox">
      <input type="checkbox"> 勾选一下
    </label>
    <button type="submit" class="btn">提交</button>
  </fieldset>
</form>

可选布局

Bootstrap 包含了三种常用的表单布局。

搜索表单

添加 .form-search 到 form 上，并且添加 .search-query 到 <input> 上，你可以得到圆角文本框。

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>

行内表单

添加 .form-inline 可以左对齐标签还有行内区块控件，多用于紧凑布局。

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="密码">
  <label class="checkbox">
    <input type="checkbox"> 记住我
  </label>
  <button type="submit" class="btn">登录 in</button>
</form>

水平表单

右对齐标签同时浮云它们到左边，让它们与控件元素在同一行显示。需要修改默认表单里的一些标签：

在表单上添加 .form-horizontal
使用 .control-group 包装标签和控件元素
在标签上添加 .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">密码</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="密码">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> 记住我
      </label>
      <button type="submit" class="btn">登录</button>
    </div>
  </div>
</form>

所支持的表单控件

所有在表单布局中支持的表单控件示例。

Inputs

更常用的表单控件，基于文本的文本框字段。HTML5 支持的类型： text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 还有 color 。

需要指定 type 。

<input type="text" placeholder="文本框">

文本区域

支持多行文字的表单控件。如果需要，可以使用 rows （行数）属性。

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

复选框与单选按钮

复选框可以选择多个选项，单选按钮只能在多个选项里选择其中的一个。

默认 (堆砌)

<label class="checkbox">
  <input type="checkbox" value="">
  选项一
</label>
<label class="checkbox">
  <input type="checkbox" value="">
  选项二
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
 选项一
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  选项二
</label>

行内复选框

在复选框或单选按钮上添加 .inline 类，可以让表单控件显示在同一行。

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 地瓜
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 土豆
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 西红柿
</label>

选择

使用默认选项或指定 multiple="multiple" 可以同时显示多个选项。

<select>
  <option>电影</option>
  <option>写作</option>
  <option>睡觉</option>
  <option>喝酒</option>
  <option>吹牛</option>
</select>

<select multiple="multiple">
  <option>电影</option>
  <option>写作</option>
  <option>睡觉</option>
  <option>喝酒</option>
  <option>吹牛</option>
</select>

扩展表单控件

Bootstrap 包含很多有用的表单组件，它们都是添加在已有浏览器控件之上。

前缀与后缀 inputs

在文本框的前面或者后面添加文字或按钮。注意这里不支持 select 元素。

默认选项

使用一个 .add-on 包装的元素，再加上一个 input，然后再使用前缀或后缀元素包装它们。

<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="用户名">
</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">开始！</button>
</div>

<div class="input-append">
  <input class="span2" id="appendedInputButtons" type="text">
  <button class="btn" type="button">搜索</button>
  <button class="btn" type="button">选项</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">
      搜索
      <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">
      搜索
      <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">
      搜索
      <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">
      搜索
      <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">搜索</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">搜索</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 类的使用来匹配我们的按钮类。比如 .input-large 会增加 input 的内边距还有字号。

网格尺寸

使用 .span1 到 .span12 ，可以为 input 设置与网格一致的宽度。

<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>

一行显示多行的网格 input，可以使用 .controls-row 来调整合适的尺寸。浮动 input 收缩空白，设置合适的外边距，还有清除浮动。

<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>
...

不可编辑的 inputs

在表单中表示不可编辑的数据，可以不用使用真正的表单标签。

<span class="input-xlarge uneditable-input">请输入内容</span>

表单动作

表单结尾的动作（按钮）组。把按钮放在带 .form-actions 类的元素里，会自动缩进和对齐表单控件。

<div class="form-actions">
  <button type="submit" class="btn btn-primary">保存修改</button>
  <button type="button" class="btn">取消</button>
</div>

帮助文字

在表单控件周围出现的行内或块级的帮助文字。

行内帮助

<input type="text"><span class="help-inline">行内帮助文字</span>

块级帮助

<input type="text"><span class="help-block">比较长的块级帮助文字，可能会扩展显示为多行。</span>

表单控件状态

为用户或访客在表单控件和标签上提供反馈的状态。

焦点

我们去掉了一些表单元素的默认的 outline （外廓）样式，在它的位置上为 :focus （文本框的焦点状态）应用一个 box-shadow （阴影) 。

<input class="input-xlarge" id="focusedInput" type="text" value="看这里 ...">

无效

使用浏览器默认的 :invalid 来应用样式。指定 type，如果字段不是可选的话，添加 required （必填）属性。如果适用可以指定 pattern。

在 IE7-9 浏览器上不适用这些，因为它们不支持 CSS 的伪选择器。

<input class="span3" type="email" required>

禁用

添加 disabled 属性可以访问用户输入。样式略有不同。

<input class="input-xlarge" id="disabledInput" type="text" placeholder="禁止输入..." disabled>

验证状态

Bootstrap 包含了错误，警告，信息，还有成功这些验证样式。使用它们，可以添加相应的类到 .control-group 周围。

<div class="control-group warning">
  <label class="control-label" for="inputWarning">警告</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">很可能什么地方出错了</span>
  </div>
</div>

<div class="control-group error">
  <label class="control-label" for="inputError">错误</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">请修改错误</span>
  </div>
</div>

<div class="control-group info">
  <label class="control-label" for="inputInfo">信息</label>
  <div class="controls">
    <input type="text" id="inputInfo">
    <span class="help-inline">用户名已被占用</span>
  </div>
</div>

<div class="control-group success">
  <label class="control-label" for="inputSuccess">成功</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">成功啦！</span>
  </div>
</div>

默认按钮

按钮样式可以应用在任何添加了 .btn 类的元素上。不过一般来说，都是用在<a> 还有 <button> 元素上。

按钮	class=""	描述
	`btn`	渐变的灰色标准按钮
	`btn btn-primary`	让按钮在一系列的按钮中突显出来
	`btn btn-info`	可以替换默认的按钮样式
	`btn btn-success`	表示成功或正面动作
	`btn btn-warning`	表示这个动作需要谨慎执行
	`btn btn-danger`	表示危险或负面动作
	`btn btn-inverse`	暗色按钮，没有特殊的意义
	`btn btn-link`	保持按钮的行为，但是淡化了按钮的样式，看起来像是一个链接。

跨浏览器的兼容性

IE9 不支持圆角裁切渐变背景，所以我们去掉这个样式。相关的还有 IE9 jankifies 禁用了 button 元素，显示脏阴影的灰色文字，这些我们都搞不定。

按钮尺寸

添加 .btn-large, .btn-small, 或者 .btn-mini 可以改变按钮尺寸。

<p>
  <button class="btn btn-large btn-primary" type="button">超大按钮</button>
  <button class="btn btn-large" type="button">超大按钮</button>
</p>
<p>
  <button class="btn btn-primary" type="button">默认按钮</button>
  <button class="btn" type="button">默认按钮</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">小按钮</button>
  <button class="btn btn-small" type="button">小按钮</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">迷你按钮</button>
  <button class="btn btn-mini" type="button">迷你按钮</button>
</p>

添加 .btn-block，可以创建块级按钮。

<button class="btn btn-large btn-block btn-primary" type="button">块级按钮</button>
<button class="btn btn-large btn-block" type="button">块级按钮</button>

禁用状态

50% 的不透明度，让按钮看起来不能点击。

锚元素

添加 .disabled 到 <a> 上。

主链接链接

<a href="#" class="btn btn-large btn-primary disabled">主链接</a>
<a href="#" class="btn btn-large disabled">链接</a>

提示！我们用 .disabled 作为实用的类，就像常用的 .active 类一样，所以不需要前缀。这个类只起了外观的作用，你使用使用自定义的 JavaScript 去真正禁用链接。

按钮元素

在<button> 按钮上添加 disabled 属性。

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">主按钮</button>
<button type="button" class="btn btn-large" disabled>按钮</button>

同一个类，多种标签

.btn 类可以用在 <a>, <button>, 或者 <input> 元素上。

<a class="btn" href="">链接</a>
<button class="btn" type="submit">按钮</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="提交">

最好的方法是，根据应用的情境使用正确的元素，还要确保跨浏览器的显示。如果你用 input，可以为按钮使用 <input type="submit"> 。

为 <img> 元素添加类，可以很容易为图像添加样式。

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

注意！ .img-rounded 和 .img-circle 不支持 IE7-8。因为它们不支持 border-radius 。

Icon glyphs

140 个图标，黑白两个版本。由 Glyphicons 提供。

icon-glass
icon-music
icon-search
icon-envelope
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-thumbs-up
icon-thumbs-down
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-right
icon-circle-arrow-left
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen

Glyphicons

Glyphicons Halflings 一般是不免费地，不过 Bootstrap 与 Glyphicons 达成协议，可以让你免费使用这些图标，作为感谢，如果可能的话，可以提供一个指向 Glyphicons 的链接。

如何使用

所有的图标只需要一个 <i> 标签加上一个特别的带 icon- 前缀的类，你可以把下面的代码放在任何地方：

<i class="icon-search"></i>

另外还有一个白色版本的图标，添加一个额外的 CSS 类就可以。特别在导航和下拉菜单链接的悬停和激活状态上使用它。

<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> 用户</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> 编辑</a></li>
    <li><a href="#"><i class="icon-trash"></i> 删除</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> 阻止</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> 管理员</a></li>
  </ul>
</div>

按钮尺寸

喜欢喜欢喜欢

<a class="btn btn-large" href="#"><i class="icon-heart"></i> 喜欢</a>
<a class="btn btn-small" href="#"><i class="icon-heart"></i> 喜欢</a>
<a class="btn btn-mini" href="#"><i class="icon-heart"></i> 喜欢</a>

表单字段

<div class="control-group">
  <label class="control-label" for="inputIcon">Email 地址</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>