Bootstrap 表格样式-状态类-Table

189 阅读1分钟
  • 状态类 状态类它只给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 效果: