- 状态类
状态类它只给tr或者td或者th来设置,不能给table标记来设置。
- .active:鼠标悬停在行或单元格上时所设置的颜色
- .success:标识成功或积极的动作
- .info:标识普通的提示信息或动作
- .warning:标识警告或需要用户注意
- .danger:标识危险或潜在的带来负面影响的动作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery-3.4.1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h2>在 .table .table-bordered 里面举例:</h2>
<table class="table table-bordered">
<tr>
<td>序号</td>
<td>商品名称</td>
<td>价格</td>
<td>状态</td>
</tr>
<tr class="success">
<td>1001</td>
<td>小米手机</td>
<td>1999.0</td>
<td>success</td>
</tr>
<tr class="danger">
<td>1001</td>
<td>小米手机</td>
<td>1999.0</td>
<td>danger</td>
</tr>
<tr class="warning">
<td>1001</td>
<td>小米手机</td>
<td>1999.0</td>
<td>warning</td>
</tr>
<tr class="info">
<td>1001</td>
<td>小米手机</td>
<td>1999.0</td>
<td>info</td>
</tr>
<tr class="active">
<td>1001</td>
<td>小米手机</td>
<td>1999.0</td>
<td>active</td>
</tr>
<tr>
<td class="success">success</td>
<td class="danger">danger</td>
<td class="warning">warning</td>
<td class="info">info</td>
</tr>
</table>
</div>
</body>
</html>
