bootstrap--表格（table的各种样式）

 

目录

bootstrap--表格（table的各种样式）

---

Bootstrap 表格类样式

☑  .table：基础表格，为任意 <table> 添加基本样式 (只有横向分隔线)

☑  .table-striped：斑马线表格

☑  .table-bordered：带边框的表格

☑  .table-hover：鼠标悬停高亮的表格

☑  .table-condensed：紧凑型表格

☑  .table-responsive：响应式表格

1、“.table”主要有三个作用：

  ☑  给表格设置了单元内距及底部边距margin-bottom:20px

  ☑  在thead底部设置了一个2px的浅灰实线

  ☑  每个单元格顶部设置了一个1px的浅灰实线

样式图如下：

2、table-striped：斑马线表格

样式图如下：

3、table-bordered：带边框的表格

样式图如下：

4、table-hover：鼠标悬停高亮的表格

样式图如下：

5、table-condensed：紧凑型表格(单元格的内距由8px调至5px。)

样式图如下：

6、table-responsive：响应式表格(当浏览器可视区域小于768px时，表格底部会出现水平滚动条；可视区域大于768px时，表格底部水平滚动条就会消失)

样式图如下：

7、综合应用

样式图如下：

源代码如下：

<div class="container">
	<h2>表格</h2>
	<p>联合使用所有表格类:</p>                                          
	<table class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th>#</th>
				<th>Firstname</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Anna</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Debbie</td>
			</tr>
			<tr>
				<td>3</td>
				<td>John</td>
			</tr>
		</tbody>
	</table>
</div>

Bootstrap的JS,CSS等我就不贴出来了，自行引入，具体可参考Bootstrap 中文网

8、状态类：这些状态类可以为行或单元格设置颜色。

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.info	标识普通的提示信息或动作
.success	标识成功或积极的动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作