bootstrap_table_class表格样式实例

<div class="container">
<h2>表格</h2>
<!--table标签级别的样式说明如下：
----.table 为任意表格添加基本样式 (只有横向分隔线)
----.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
----.table-bordered 为所有表格的单元格添加边框
----.table-hover 指针悬停在行上时会出现浅灰色背景
----.table-condensed 让表格更加紧凑
-->
<table class="table table-striped table-bordered table-hover table-condensed">
<!--table标签下的字标签说明如下：
----<thead> 用来标识表格的主题，即首行各列的标题
----<tbody> 用来标识表格的主体部分，即首行各列标题下的数据
----<caption> 关于表格存储内容的描述或总结
----<tr> 行
----<td> 列
----<th> 列，字体会加粗
-->
<caption>该表格用于展示姓名列表<caption>
<thead>
<!--tr、th、td标签级别的样式说明如下：
----.active 对某一特定的行或单元格应用悬停颜色
----.success 表示一个成功的或积极的动作的颜色
----.warning 表示一个需要注意的警告的颜色
----.danger 表示一个危险的或潜在的负面动作的颜色
-->
<tr class="active">
<th>序号</th>
<th>姓名</th>
</tr>
</thead>
<tbody >
<tr>
<td class="success " >1</td>
<td class="warning ">炭烧小鸡</td>
</tr>
<tr class="danger ">
<td>2</td>
<td>躲在树下的猫</td>
</tr>
<tr>
<td>3</td>
<td>水牛</td>
</tr>
</tbody>
</table>
</div>