Question

我正在编写一段代码，显示一个显示不同药物详细信息的表格。我有一个颜色编码系统，red = danger，yellow = alert，green = safe。

然而，我对我使用的颜色不满意。有没有办法在下面的代码中插入更亮的颜色？

  <?php $row_class = "";
    while($row = mysql_fetch_assoc($dbResult1))
    {
          if($row['total_mai'] <= 2)
             $row_class = "success";
          else if($row['total_mai'] >= 5)
               $row_class = "danger";
          else if($row['total_mai'] >= 3 and $row['total_mai'] < 5)
               $row_class = "warning";

          // echo $row_class;
    ?>

Answer 1

这里的代码实际上并没有颜色。 颜色在css的类中定义。在文件标题的某处，您需要查找对css文件的引用：

<link rel="stylesheet" type="text/css" href="mystyle.css">

它也可能位于<style>标记之间的实际html页面中。

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>

虽然那里会有很多，但您可能正在寻找看起来像这样的部分：

.success {
    color: green;
}

.danger {
    color: red;
}
.warning {
    color: yellow;
}

也可以定义许多其他属性，但是.word＆＃34;选择器＆＃34;告诉浏览器使用您要添加的这些类在文本上呈现颜色。要更改颜色，请更改属性。您可能看不到上面的颜色名称。您可以看到十六进制颜色（类似#d0e4fe;）。 W3Schools page on CSS是一个开始的好地方。他们还有一个很好的color reference颜色名称：

CSS可能还有其他方法可以引用这些类，因此您可能希望查看Selectors上的教程。例如，他们可能会使用tr.danger { ... }来仅引用应用于表行的危险类。

如果使用Bootstrap

然后我不是专家，所以我只能提供帮助，但Bootstrap会为您预先定义其中一些样式。您可以创建新类并使用!important来覆盖具有新颜色的类。重要的是可能会让人感到困惑，因为它是一个永远不会发生的事情。以前的CSS，但如果bootstrap将背景单独应用于单元格，则需要它。我刚刚在another answer here上找到了一些关于在Bootstrap中执行此操作的代码：

.table tbody tr > td.success {
  background-color: #dff0d8 !important;
}

.table tbody tr > td.error {
  background-color: #f2dede !important;
}

.table tbody tr > td.warning {
  background-color: #fcf8e3 !important;
}

.table tbody tr > td.info {
  background-color: #d9edf7 !important;
}

.table-hover tbody tr:hover > td.success {
  background-color: #d0e9c6 !important;
}

.table-hover tbody tr:hover > td.error {
  background-color: #ebcccc !important;
}

.table-hover tbody tr:hover > td.warning {
  background-color: #faf2cc !important;
}

.table-hover tbody tr:hover > td.info {
  background-color: #c4e3f3 !important;
}

这最好是在你自己的CSS文件中。如果您开始修改Bootstrap css文件，如果您需要将Bootstrap升级到新版本，则可能会感到沮丧。重要的＆＃34;照顾你的设置更多，更重要。

您还可以使用我在上面添加的链接来学习如何创建自己的类，然后添加自己的类而不是Bootstraps。

如何将颜色插入行和列

1 个答案:

如果使用Bootstrap