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ブートストラップは実際にセルを個別に色付けするために必要です（背景色をtrに適用することはできません）。私のバージョンのブートストラップでは色変数が見つかりませんでしたが、とにかくそれが基本的な考え方です。

于 2013-06-25T08:15:55.390 に答える
3

現在のバージョンの Bootstrap (3.3.7) では、次のようにテーブルの 1 つのセルに色を付けることができます。

<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

less を使用すると、次のように設定できます。

.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 に答える