Bootstrap 表格样式-状态类-Table

简介: Bootstrap 表格样式-状态类-Table

  • 状态类 状态类它只给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 效果:





相关文章
Bootstrap5 表格5
使用 `.table-dark` 类可以为表格添加黑色背景,使表格在页面中更加突出。
Bootstrap5 表格7
通过结合使用 `.table-dark` 和 `.table-hover` 类,可以创建一个具有鼠标悬停效果的黑色背景表格。示例表格包含姓名和电子邮件信息,当鼠标悬停在行上时,行会高亮显示。
Bootstrap5 表格6
通过结合使用 `.table-dark` 和 `.table-striped` 类,可以创建一个具有黑色背景和条纹效果的表格。示例表格包含三列:名字、姓氏和电子邮件,并展示了三位用户的信息。
Bootstrap5 表格3
使用 `.table-bordered` 类可为表格添加边框,使表格结构更清晰。示例中,表格包含三列:名字、姓氏和邮箱,展示了三位用户的信息。
|
1月前
|
NoSQL
Bootstrap5 表格12
使用 .table-responsive 类可以创建响应式表格。当屏幕宽度小于 992px 时,表格会出现水平滚动条;当屏幕宽度大于 992px 时,表格正常显示,没有滚动条。示例代码展示了如何实现这一效果。
Bootstrap5 表格11
使用 `.table-sm` 类可以创建一个内边距较小的紧凑型表格。
Bootstrap5 表格10
可以通过添加 `.table-dark` 或 `.table-light` 类来设置表格表头的背景颜色。`.table-dark` 使表头背景变为黑色,而 `.table-light` 则使其变为灰色。示例代码展示了这两种效果的应用。
Bootstrap5 表格9
通过指定意义的颜色类(如 `table-primary`、`table-success` 等),可以为表格的行或单元格设置不同的背景颜色,以突出显示特定信息。示例中展示了多种颜色类的应用效果。
Bootstrap5 表格8
使用 `.table-borderless` 类可以创建一个无边框的表格。
Bootstrap5 表格4
使用 `.table-hover` 类可以为表格的每一行添加鼠标悬停效果,当鼠标移至行上时,背景会变为灰色。