如何使用 Bootstrap 为单元格着色？答案

【问题标题】：How to color cells using Bootstrap?如何使用 Bootstrap 为单元格着色？
【发布时间】：2021-09-10 04:55:49
【问题描述】：

我有一个 Flask 应用程序，它从用户那里获取大量输入，对其进行处理并生成值的表/矩阵。

我想为不同的单元格以不同的颜色向用户显示此表格。在生成表格时，我知道我希望单元格是什么颜色。

我正在使用 Bootstrap4。这可以使用 Bootstrap 完成吗？

【问题讨论】：

【解决方案1】：

class属性可用于表格行中获取所需颜色。

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <td>ABC</td>
            <td>10</td>
        </tr>
        <tr class="danger">
            <td>DEF</td>
            <td>20</td>
        </tr>
        <tr class="info">
            <td>GHI</td>
            <td>30</td>
        </tr>
        <tr class="success">
            <td>JKL</td>
            <td>40</td>
        </tr>
        <tr class="warning">
            <td>MNO</td>
            <td>50</td>
        </tr>
    </tbody>
</table>

【讨论】：

【解决方案2】：

在 Bootstrap 4 中，您可以通过将 bg 类 添加到 <tr> 元素，例如；

<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>

看看bootstrap documentation of tables，里面有详细的解释

【讨论】：

【解决方案3】：

这是在单元格上添加颜色的方法

<!doctype html>
<html lang="en">

<head>

  <title>Table Color</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>


  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody class="table-hover">
        <tr>
          <td>Default</td>
          <td>Defaultson</td>
          <td>def@somemail.com</td>
        </tr>
        <tr class="table-primary">
          <td>Primary</td>
          <td>Joe</td>
          <td>joe@example.com</td>
        </tr>
        <tr class="table-success">
          <td>Success</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr class="table-danger">
          <td>Danger</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr class="table-info">
          <td>Info</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr class="table-warning">
          <td>Warning</td>
          <td>Refs</td>
          <td>bo@example.com</td>
        </tr>
        <tr class="table-active">
          <td>Active</td>
          <td>Activeson</td>
          <td>act@example.com</td>
        </tr>
        <tr class="table-secondary">
          <td>Secondary</td>
          <td>Secondson</td>
          <td>sec@example.com</td>
        </tr>
        <tr class="table-light">
          <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>

更多关于表格

table documentation bootstrap 4

【讨论】：