位置:电子教程 > Bootstrap4教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Bootstrap4入门
Bootstrap4 网格系统
Bootstrap4 文字排版
Bootstrap4 颜色
Bootstrap4 表格
Bootstrap4 图像形状
Bootstrap4 Jumbotron 超大屏幕
Bootstrap4 信息提示框
Bootstrap4 按钮
Bootstrap4 按钮组 .btn-group 类
Bootstrap4 徽章(Badges)
Bootstrap4 进度条
Bootstrap4 分页
Bootstrap4 列表组
Bootstrap4 卡片
Bootstrap4 下拉菜单
Bootstrap4 折叠
Bootstrap4 导航
Bootstrap4 面包屑导航(Breadcrumb)
Bootstrap4 导航栏
Bootstrap4 表单
Bootstrap4 表单控件
Bootstrap4 输入框组
Bootstrap4 自定义表单
Bootstrap4 轮播
Bootstrap4 模态框
Bootstrap4 提示框
Bootstrap4 弹出框
Bootstrap 滚动监听(Scrollspy)
当前阅读教程:Bootstrap4教程 > 指定意义的颜色类
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 鼠标悬停效果 - 黑色背景表格 .table-dark 和 .table-hover 类 下一篇: 表头颜色 .thead-dark 类

通过指定意义的颜色类可以为表格的行或者单元格设置颜色:

实例

<table>
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>     
      <tr>
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr>
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr>
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr>
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
      <tr>
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>
      <tr>
        <td>Light</td>
        <td>Angie</td>
        <td>angie@example.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td>bo@example.com</td>
      </tr>
    </tbody>
</table>

下表列出了表格颜色类的说明:

类名

描述

.table-primary

蓝色:   指定这是一个重要的操作

.table-success

绿色:   指定这是一个允许执行的操作

.table-danger

红色:   指定这是可以危险的操作

.table-info

浅蓝色:   表示内容已变更

.table-warning

橘色:   表示需要注意的操作

.table-active

灰色:   用于鼠标悬停效果

.table-secondary

灰色:   表示内容不怎么重要

.table-light

浅灰色,可以是表格行的背景

.table-dark

深灰色,可以是表格行的背景

 

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例(小白教程网 2d5.net)</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div>
  <h2>指定意义的颜色类</h2>
  <p>通过指定意义的颜色类可以为表格的行或者单元格设置颜色:</p>           
  <table>
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>     
      <tr>
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr>
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr>
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr>
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
      <tr>
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>
      <tr>
        <td>Light</td>
        <td>Angie</td>
        <td>angie@example.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td>bo@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
 
</body>
</html>

效果图

小白教程网www.2d5.net

image.png

上一篇: 鼠标悬停效果 - 黑色背景表格 .table-dark 和 .table-hover 类 下一篇: 表头颜色 .thead-dark 类
毕业设计网             广告联系QQ:45157718(微信同号)