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

Question

Twitter Bootstrap提供了类表颜色的类,如下所示:

<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版本中找不到任何颜色变量,但这无论如何都是基本的想法.