对Bootstrap中的单元格使用表行着色 [英] Use table row coloring for cells in Bootstrap

问题描述

Twitter Bootstrap 提供类颜色表行，如下所示：

<tr class="success">

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

I like the color choice and the class naming. Now what I would like to do, is to re-use these classes and apply them on table cells, too. Obviously, I could define my own classes with the same colors and be done with it.

但是有一个CSS的简写。 LESS，让 td 继承类？

But is there a shorthand in CSS. LESS, to let the td inherit the classes?

推荐答案

覆盖默认的CSS规则：

You can override the default css rules with this:

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

!important is needed as bootstrap actually colours the cells individually (afaik it's not possible to just apply background-color to a tr). I couldn't find any colour variables in my version of bootstrap but that's the basic idea anyway.

这篇关于对Bootstrap中的单元格使用表行着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！