如何将颜色插入行和列答案

【问题标题】：How to insert colors into rows and columns如何将颜色插入行和列
【发布时间】：2015-10-30 20:55:05
【问题描述】：

我正在编写一段代码，该代码显示一个表格，其中显示了不同的药物详细信息。我有一个颜色编码系统，红色 = 危险，黄色 = 警报，绿色 = 安全。

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

  <?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;
    ?>

【问题讨论】：

标签： php colors

【解决方案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“选择器”告诉浏览器使用您添加的这些类在文本上呈现颜色。要更改颜色，请更改属性。您可能看不到上面的颜色名称。你可以看到十六进制颜色（类似于#d0e4fe;）。 W3Schools page on CSS 是一个开始的好地方。他们还有一个不错的 color reference 用于颜色名称：

CSS 可以通过其他方式引用这些类，因此您可能需要查看Selectors 上的教程。例如，他们可能使用tr.danger { ... } 来仅引用应用于表行的危险类别。

如果使用 Bootstrap

那我不是专家，只能帮这么多，不过 Bootstrap 已经为你预定义了其中的一些样式。您可以创建新类并使用!important 用新颜色覆盖这些类。重要可能会让人感到困惑，因为它对以前的 CSS 来说“没关系”，但如果引导程序将背景单独应用于单元格，则在此处需要它。我刚刚在 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 升级到新版本，可能会令人沮丧。 "important" 让您的设置变得更加、嗯……重要。

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

【讨论】：

其实我用bootstrap会有什么不同吗？？
我应该使用这样的东西吗？ maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
我在 Bootstrap 上添加了一些评论。如果您还没有使用 Bootstrap 并且只需要它，则不需要使用它，但是如果您正在使用它，我的 cmets 将向您展示如何覆盖 Bootstrap 提供的默认类。