标签：
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="container"> <h1 class="btn btn-success btn-large"> <i class="icon-user icon-white"></i> Hello,World </h1> <h1> 我是标题h1</h1> <h2> 我是标题h2</h2> <h3> 我是标题h3</h3> <h4> 我是标题h4</h4> <h5> 我是标题h5</h5> <h6> 我是标题h6</h6> <!--文档内容--> <script src="bootstrap/jquery-3.1.0.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
结果:
如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本，如下面实例所示：
<h1> 我是标题h1 <small>我是副标题1</small> </h1> <h2> 我是标题h2 <small>我是副标题2</small> </h2> <h3> 我是标题h3 <small>我是副标题3</small> </h3> <h4> 我是标题h4 <small>我是副标题4</small> </h4> <h5> 我是标题h5 <small>我是副标题5</small> </h5> <h6> 我是标题h6 <small>我是副标题6</small> </h6>
结果:
HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。Bootstrap 提供了一些用于强调文本的类，如下面实例所示：
这是普通文本 <br> <small>small标签内的文本</small> <br> <strong>strong标签内的文本</strong> <br> <em>em标签内的文本</em> <br> <p class="text-left">class: text-left</p> <p class="text-right">class: text-right</p> <p class="text-center">class: text-center</p> <p class="text-muted">class: text-muted</p> <p class="text-primary">class:text-primary</p> <p class="text-success">class:text-success</p> <p class="text-info">class:text-info</p> <p class="text-warning">class:text-warning</p> <p class="text-danger">class:text-danger</p>
结果:
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
表格类
下表样式可用于表格中：
下表的类可用于表格的行或者单元格：
如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示：
<table class="table"> <caption>基本的表格布局</caption> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>Tom</td> <td>22</td> </tr> <tr> <td>Jerry</td> <td>18</td> </tr> </tbody> </table>
结果:
通过添加 .table-striped class，您将在 <tbody> 内的行上看到条纹，如下面的实例所示：
<table class="table table-striped"> //... </table>
结果:
<table class="table table-striped table-bordered"> //... </table>
结果:
通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：
<table class="table table-bordered table-hover"> </table>
结果:
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。这些类可被应用到 <tr>、<td> 或 <th>。
<table class="table table-bordered"> <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>
标签：
原文地址：http://www.cnblogs.com/yangang2013/p/5812366.html
