- 状态类 状态类它只给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> <!-- 导入CSS文件 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- 引入js --> <!-- bootstrap.js 引入必须依赖 jQuery, jQuery需要自行去下载导入进来 --> <script src="bootstrap/js/jquery-3.4.1.js"></script> <!-- 不引入 jQuery 则会报错 Uncaught Error: Bootstrap's JavaScript requires jQuery --> <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>
- demo 效果：
