对 Bootstrap 中的单元格使用表格行着色答案

【问题标题】：Use table row coloring for cells in Bootstrap对 Bootstrap 中的单元格使用表格行着色
【发布时间】：2013-05-21 18:11:20
【问题描述】：

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

<tr class="success">

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

但是在 CSS 中是否有简写。 LESS，让td继承类？

【问题讨论】：

您想要按单元格着色吗？

标签： css twitter-bootstrap less

【解决方案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 是必需的，因为引导程序实际上单独为单元格着色（afaik 不可能只将背景颜色应用于 tr）。我在我的 bootstrap 版本中找不到任何颜色变量，但无论如何这是基本思想。

【讨论】：

它现在似乎已经集成到引导程序中（版本 3.3.4） (.table-hover>tbody>tr.danger:hover>td, .table-hover>tbody>tr.danger: hover>th, .table-hover>tbody>tr:hover>.danger, .table-hover>tbody>tr>td.danger:hover, .table-hover>tbody>tr>th.danger:hover { 背景-颜色：#ebcccc;)

【解决方案2】：

底线是你必须为此编写一个新的 css 规则。

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

尝试类似：

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

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

【讨论】：

【解决方案3】：

使用当前版本的 Bootstrap (3.3.7)，可以像这样为表格的单个单元格着色：

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

【讨论】：

【解决方案4】：

为较新的引导程序更新了 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;
}

【讨论】：

【解决方案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; }
    ...
}

这对我有用。

【讨论】：