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

Question

Twitter Bootstrap为 color table rows 提供类(class)像这样:

<tr class="success">

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

但是CSS中有没有简写呢？ LESS，让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 版本中找不到任何颜色变量，但这是基本的想法。