普通表格
编号 | 帮派名称 | 口号 | 领导人 |
---|
1 | 天地会 | 反清复明 | 陈近南 |
2 | 义和团 | 扶清灭洋 | 赵三多 |
3 | 日月神教 | 东方教主,文成武德 | 东方不败 |
4 | 太平天国 | 耕者有其田 | 洪秀全 |
5 | 星宿派 | 星宿老仙,法力无边 | 丁春秋 |
<table class="table">
...
</table>
运行一下
条纹型表格
编号 | 帮派名称 | 口号 | 领导人 |
---|
1 | 天地会 | 反清复明 | 陈近南 |
2 | 义和团 | 扶清灭洋 | 赵三多 |
3 | 日月神教 | 东方教主,文成武德 | 东方不败 |
4 | 太平天国 | 耕者有其田 | 洪秀全 |
5 | 星宿派 | 星宿老仙,法力无边 | 丁春秋 |
<table class="table table-striped">
...
</table>
运行一下
带边框的表格
编号 | 帮派名称 | 口号 | 领导人 |
---|
1 | 天地会 | 反清复明 | 陈近南 |
2 | 义和团 | 扶清灭洋 | 赵三多 |
3 | 日月神教 | 东方教主,文成武德 | 东方不败 |
4 | 太平天国 | 耕者有其田 | 洪秀全 |
5 | 星宿派 | 星宿老仙,法力无边 | 丁春秋 |
<table class="table table-bordered">
...
</table>
运行一下
鼠标悬停
编号 | 帮派名称 | 口号 | 领导人 |
---|
1 | 天地会 | 反清复明 | 陈近南 |
2 | 义和团 | 扶清灭洋 | 赵三多 |
3 | 日月神教 | 东方教主,文成武德 | 东方不败 |
4 | 太平天国 | 耕者有其田 | 洪秀全 |
5 | 星宿派 | 星宿老仙,法力无边 | 丁春秋 |
<table class="table table-hover">
...
</table>
运行一下
更加紧凑的表格
编号 | 帮派名称 | 口号 | 领导人 |
---|
1 | 天地会 | 反清复明 | 陈近南 |
2 | 义和团 | 扶清灭洋 | 赵三多 |
3 | 日月神教 | 东方教主,文成武德 | 东方不败 |
4 | 太平天国 | 耕者有其田 | 洪秀全 |
5 | 星宿派 | 星宿老仙,法力无边 | 丁春秋 |
<table class="table table-condensed">
...
</table>
运行一下
状态类
通过对行或单元格标记以下预设颜色,可对用户暗示情景状态。
Class类 |
说明 |
.active |
鼠标悬停状态下的颜色 |
.success |
暗示成功或其他积极意义的状态 |
.info |
暗示普通的信息提示 |
.warning |
暗示警告信息 |
.danger |
暗示危险,是比警告信息更强烈的警示 |
示例:
编号 | 帮派名称 | 口号 | 领导人 |
---|
1 | 天地会 | 反清复明 | 陈近南 |
2 | 义和团 | 扶清灭洋 | 赵三多 |
3 | 日月神教 | 东方教主,文成武德 | 东方不败 |
4 | 太平天国 | 耕者有其田 | 洪秀全 |
5 | 星宿派 | 星宿老仙,法力无边 | 丁春秋 |
<!-- 对行进行标记 -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- 对单元格进行标记 -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
运行一下