29

Twitter Bootstrap提供了对表格行进行着色的类，如下所示：

<tr class="success">

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

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

4

5 回答 5

58

您可以使用以下命令覆盖默认的 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）。我在我的引导程序版本中找不到任何颜色变量，但无论如何这是基本思想。

于 2013-06-25T08:15:55.390 回答
3

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

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

尝试类似：

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

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

于 2013-05-26T21:47:16.683 回答
3

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

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

于 2017-07-17T22:04:11.620 回答
2

为较新的引导程序更新了 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;
}
于 2014-08-01T17:29:27.993 回答
1

用更少的东西你可以像这样设置它；

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

这对我有用。

于 2013-11-30T07:57:19.647 回答