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

Posted 2023-03-06

【中文标题】对 Bootstrap 中的单元格使用表格行着色

【英文标题】：Use table row coloring for cells in Bootstrap

【发布时间】：2013-05-21 18:11:20

【问题描述】：

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

<tr class="success">

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

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

【问题讨论】：

您想要按单元格着色吗？

【参考方案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; 
    ...

这对我有用。