bootstrap CSS

排版

副标题

标题内有<small>标签或是.small类让节点变成副标题：

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> 
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

查看例子：标题

强调

HTML 的默认强调标签<small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>设置文本为斜体）。

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

查看例子：强调

缩写

显示缩写，鼠标放去显示解释：

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

查看例子：缩写

地址

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

查看例子：地址

引用

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

查看例子：引用

列表

Bootstrap 支持有序列表、无序列表和定义列表。

• 有序列表：有序列表是指以数字或其他有序字符开头的列表。
• 无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用.list-unstyled来移除样式。您也可以通过使用.list-inline把所有的列表项放在同一行中。
• 定义列表：在这种类型的列表中，每个列表项可以包含<dt>和<dd>元素。<dt>代表定义术语，就像字典，这是被定义的属于（或短语）。接着，<dd>是<dt>的描述。您可以使用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>

查看例子：列表

更多排版类

下表提供了 Bootstrap 更多排版类的实例：

• .lead 使段落突出显示
• .small 设定小文本 (设置为父文本的 85% 大小)
• .text-left 设定文本左对齐
• .text-center 设定文本居中对齐
• .text-right 设定文本右对齐
• .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
• .text-nowrap 段落中超出屏幕部分不换行
• .text-lowercase 设定文本小写
• .text-uppercase 设定文本大写
• .text-capitalize 设定单词首字母大写
• .initialism 显示在<abbr>元素中的文本以小号字体展示
• .blockquote-reverse 设定引用右对齐
• .list-unstyled 移除默认的列表样式，列表项中左对齐 (<ul>和<ol>中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
• .list-inline 将所有列表项放置同一行
• .dl-horizontal 该类设置了浮动和偏移，应用于<dl>元素和<dt>元素中，具体实现可以查看实例
• .pre-scrollable 使<pre>元素可滚动 scrollable

代码

Bootstrap 允许您以两种方式显示代码：

• 第一种是<code>标签。如果您想要内联显示代码，那么您应该使用<code>标签。
• 第二种是<pre>标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用<pre>标签。

表格

查看例子：表格

基本表格

class为table：

<table class="table">
   <caption>基本的表格布局</caption>
   <thead>
      <tr> <th>名称</th> <th>城市</th> </tr>
   </thead>
   <tbody>
      <tr> <td>Tanmay</td> <td>Bangalore</td> </tr>
      <tr> <td>Sachin</td> <td>Mumbai</td> </tr>
   </tbody>
</table>

条纹表格

通过添加.table-striped：

<table class="table table-striped">
   <caption>条纹表格布局</caption>
   <thead>
      <tr> <th>名称</th> <th>城市</th> <th>密码</th> </tr>
   </thead>
   <tbody>
      <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr>
      <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr>
      <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr>
   </tbody>
</table>

边框表格

通过添加 .table-bordered class，您将看到每个元素周围都有边框

<table class="table table-bordered">
   <caption>边框表格布局</caption>
   <thead>
      <tr> <th>名称</th> <th>城市</th> <th>密码</th> </tr>
   </thead>
   <tbody>
      <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr>
      <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr>
      <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr>
   </tbody>
</table>

悬停表格

通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景

<table class="table table-hover">
   <caption>悬停表格布局</caption>
   <thead>
      <tr> <th>名称</th> <th>城市</th> <th>密码</th> </tr>
   </thead>
   <tbody>
      <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr>
      <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr>
      <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr>
   </tbody>
</table>

精简表格

通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑，

<table class="table table-condensed">
   <caption>精简表格布局</caption>
   <thead>
      <tr> <th>名称</th> <th>城市</th> <th>密码</th> </tr>
   </thead>
   <tbody>
      <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr>
      <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr>
      <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr>
   </tbody>
</table>

标记行

用不同的颜色，突出显示表格的内容，这些类可被应用到<tr>、<td>或<th>：

• .active对某一特定的行或单元格应用悬停颜色
• .success表示一个成功的或积极的动作
• .warning表示一个需要注意的警告
• .danger表示一个危险的或潜在的负面动作

<table class="table">
   <caption>上下文表格布局</caption>
   <thead>
      <tr> <th>产品</th> <th>付款日期</th> <th>状态</th> </tr>
   </thead>
   <tbody>
      <tr class="active">
         <td>产品1</td> <td>23/11/2013</td> <td>待发货</td>
      </tr>
      <tr class="success">
         <td>产品2</td> <td>10/11/2013</td> <td>发货中</td>
      </tr>
      <tr  class="warning">
         <td>产品3</td> <td>20/10/2013</td> <td>待确认</td>
      </tr>
      <tr  class="danger">
         <td>产品4</td> <td>20/10/2013</td> <td>已退货</td>
      </tr>
   </tbody>
</table>

响应式表格

通过把任意的.table包在.table-responsiveclass 内， 您可以让表格水平滚动以适应小型设备（小于 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>  	

表单

表单布局

查看例子：表单布局

垂直或基本布局

基本的表单结构是 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>

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的， 请向<form>标签添加 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>

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

• 向父<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>

支持的表单控件

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 获得完整的样式。

<input type="text" class="form-control" placeholder="文本输入">

文本框（Textarea）

<textarea class="form-control" rows="3"></textarea>

复选框（（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>

下接列表

单选的下拉列表：

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

静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，请在<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>

控制表单的状态

查看例子：表单状态

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

表单控件大小

查看例子：表单大小

您可以分别使用 class .input-lg和.col-lg-*来设置表单的高度和宽度。下面的实例演示了这点：

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

表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用 .help-block。下面的实例演示了这点：

<input class="form-control" type="text" placeholder="">
<span class="help-block">
	一个较长的帮助文本块，超过一行，需要扩展到下一行。
	本实例中的帮助文本总共有两行。
</span>

按钮

查看例子：按钮

按钮的类型

• .btn 为按钮添加基本样式
• .btn-default 默认/标准按钮
• .btn-primary 原始按钮样式（未被操作）
• .btn-success 表示成功的动作
• .btn-info 该样式可用于要弹出信息的按钮
• .btn-warning 表示需要谨慎操作的按钮
• .btn-danger 表示一个危险动作的按钮操作
• .btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
• .btn-lg 制作一个大按钮
• .btn-sm 制作一个小按钮
• .btn-xs 制作一个超小按钮
• .btn-block 块级按钮(拉伸至父元素100%的宽度)
• .active 按钮被点击
• .disabled 禁用按钮

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>

<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>

<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>

<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>

<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>

<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>

<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

按钮大小

• .btn-lg 这会让按钮看起来比较大。
• .btn-sm 这会让按钮看起来比较小。
• .btn-xs 这会让按钮看起来特别小。
• .btn-block 这会创建块级的按钮，会横跨父元素的全部宽度。

<p>
   <button type="button" class="btn btn-primary btn-lg">
      大的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-lg">
      大的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary">
      默认大小的原始按钮
   </button>
   <button type="button" class="btn btn-default">
      默认大小的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-sm">
      小的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-sm">
      小的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-xs">
      特别小的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-xs">
      特别小的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg btn-block">
      块级的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-lg btn-block">
      块级的按钮
   </button>
</p>

按钮状态

激活状态

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

下表列出了让按钮元素和锚元素呈激活状态的 class：

• 按钮元素 添加 .active class 来显示它是激活的。
• 锚元素 添加 .active class 到<a>按钮来显示它是激活的。

<p>
   <button type="button" class="btn btn-default btn-lg ">
      默认按钮
   </button>
   <button type="button" class="btn btn-default btn-lg active">
      激活按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按钮
   </button>
   <button type="button" class="btn btn-primary btn-lg active">
      激活的原始按钮
   </button>
</p>

禁用状态

当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class：

• 按钮元素 添加 disabled 属性 到<button>按钮。
• 锚元素 添加 disabled class 到<a>按钮。
• 注意：该 class 只会改变<a>的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。

<p>
   <button type="button" class="btn btn-default btn-lg">
      默认按钮
   </button>
   <button type="button" class="btn btn-default btn-lg" disabled="disabled">
      禁用按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按钮
   </button>
   <button type="button" class="btn btn-primary btn-lg" disabled="disabled">
      禁用的原始按钮
   </button>
</p>
<p>
   <a href="#" class="btn btn-default btn-lg" role="button">
      链接
   </a>
   <a href="#" class="btn btn-default btn-lg disabled" role="button">
      禁用链接
   </a>
</p>
<p>
   <a href="#" class="btn btn-primary btn-lg" role="button">
      原始链接
   </a>
   <a href="#" class="btn btn-primary btn-lg disabled" role="button">
      禁用的原始链接
   </a>
</p>

按钮标签

您可以在<a>、<button>或<input>元素上使用按钮 class。但是建议您在<button>元素上使用按钮 class，避免跨浏览器的不一致性问题。

下面的实例演示了这点：

<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">

图片

查看例子：图片

图片边框

• .img-rounded：添加 border-radius:6px 来获得图片圆角。
• .img-circle：添加 border-radius:50% 来让整个图片变成圆形。
• .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-thumbnail">

响应式图片

通过在<img>标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。

.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"> 

辅助类

查看例子：辅助类

文本

以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：

• .text-muted "text-muted" 类的文本样式
• .text-primary "text-primary" 类的文本样式
• .text-success "text-success" 类的文本样式
• .text-info "text-info" 类的文本样式
• .text-warning "text-warning" 类的文本样式
• .text-danger "text-danger" 类的文本样式

背景

以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗：

• .bg-primary 表格单元格使用了 "bg-primary" 类
• .bg-success 表格单元格使用了 "bg-success" 类
• .bg-info 表格单元格使用了 "bg-info" 类
• .bg-warning 表格单元格使用了 "bg-warning" 类
• .bg-danger 表格单元格使用了 "bg-danger" 类

其他

• .pull-left 元素浮动到左边
• .pull-right 元素浮动到右边
• .center-block 设置元素为 display:block 并居中显示
• .clearfix 清除浮动
• .show 强制元素显示
• .hidden 强制元素隐藏
• .sr-only 除了屏幕阅读器外，其他设备上隐藏元素
• .sr-only-focusable 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
• .text-hide 将页面元素所包含的文本内容替换为背景图
• .close 显示关闭按钮
• .caret 显示下拉式功能