web-dev-qa-db-ja.com

Bootstrapのセルにテーブル行の色を使用する

Twitter Bootstrap は次のクラスを提供します カラーテーブルの行

<tr class="success">

色の選択とクラスの命名が好きです。今、私がやりたいことは、これらのクラスを再利用して、テーブルセルにも適用することです。明らかに、同じ色で独自のクラスを定義し、それで完了することができます。

しかし、CSSには省略形があります。 LESS、tdがクラスを継承できるようにしますか？

csstwitter-bootstrapless
25
Mahoni

これでデフォルトの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;
}

bootstrapは実際にセルを個別に色付けするため、!importantが必要です（trにbackground-colorを適用することはできません）。私のバージョンのbootstrapにはカラー変数が見つかりませんでしたが、それは基本的な考え方です。

54
Matt

一番下の行は、そのための新しいCSSルールを作成する必要があるということです。

使用しているTwitterのバンドルBootstrap=に応じて、さまざまな色の変数が必要です。

次のようなものを試してください：

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

確かに、extendまたはLESSに相当するものを使用して、同じスタイルを繰り返さないようにする方法があります。

3
mathieugagne

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

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

2
user666

新しいブートストラップ用に更新された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;
}
2
Mastro

以下でこのように設定できます。

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

それは私のためのトリックをしました。

1
Omer