Question

Twitter Bootstrap提供color table rows课程，如下所示：

<tr class="success">

我喜欢颜色选择和类命名。现在我想做的是重新使用这些类并将它们应用于表格单元格。显然，我可以使用相同的颜色定义自己的类，并完成它。

但CSS中有简写吗？让td继承类？

Answer 1

您可以使用以下方法覆盖默认的css规则：

.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;
}

需要

!important，因为bootstrap实际上单独为单元格着色（afaik不可能只将背景颜色应用于tr）。我在我的bootstrap版本中找不到任何颜色变量，但无论如何这都是基本的想法。

Answer 2

最重要的是，您必须为此编写新的css规则。

根据您使用的Twitter Bootstrap捆绑，您应该拥有各种颜色的变量。

尝试类似：

.table tbody tr > td {
  &.success { background-color: $green; }
  &.info { background-color: $blue; }
  ...
}

当然有一种方法可以使用extend或LESS等效项来避免重复相同的样式。

Answer 3

更新了较新的bootstrap的html

    .table-hover > tbody > tr.danger:hover > td {
     background-color: red !important;
}
.table-hover > tbody > tr.warning:hover > td {
     background-color: yellow !important;
}
.table-hover > tbody > tr.success:hover > td {
     background-color: blue !important;
}

Answer 4

使用当前版本的Bootstrap（3.3.7），可以为表格的单个单元格着色，如下所示：

<td class = 'text-center col-md-4 success'>

Answer 5

少用你可以这样设置;

.table tbody tr {
    &.error > td { background-color: red !important; }
    &.error:hover > td { background-color: yellow !important; }
    &.success > td { background-color: green !important; }
    &.success:hover > td { background-color: yellow !important; }
    ...
}

这对我有用。

在Bootstrap中为单元格使用表行着色

5 个答案: