响应式前端框架Bootstrap系列（4）表格

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/79034410

通过bs，可以很轻松地建出一个表格组件。以下是建表格组件必须认识的一些标签。

标签	描述
<table>	为表格添加基础样式。
<thead>	表格标题行的容器元素（<tr>），用来标识表格列。
<tbody>	表格主体中的表格行的容器元素（<tr>）。
<tr>	一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td>	默认的表格单元格。
<th>	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption>	关于表格存储内容的描述或总结。

<table>标签样式有以下几种：

.table 表格基本样式

.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

.table-bordered 为所有表格的单元格添加边框

.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态

.table-condensed 让表格更加紧凑

.table-responsive 可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

基本建表演示代码：

<table class="table table-striped table-bordered table-hover table-condensed table-responsive">
	<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>                

效果图：

实际应用中，基本表格并不能满足需求，bs已经为我们考虑到了，我们还可以在<tr>,<th>和<td>添加色彩样式，实现类似于带状态的表格效果，色彩样式有以下几种：

.active 将悬停的颜色应用在行或者单元格上

.success 表示成功的操作

.info 表示信息变化的操作

.warning 表示一个警告的操作

.danger 表示一个危险的操作

演示代码：

<table class="table table-bordered table-condensed table-responsive">
	<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>                

效果图：

转载于:https://my.oschina.net/u/3987720/blog/2962660