Использовать раскраску строки таблицы для ячеек в Bootstrap

Twitter Bootstrap предлагает классы для раскраски строк таблицы следующим образом:

<tr class="success">

Мне нравится выбор цвета и наименование класса. Теперь я хотел бы повторно использовать эти классы и применять их также к ячейкам таблицы. Очевидно, я мог бы определить свои собственные классы с теми же цветами и покончить с этим.

Но есть ли сокращение в CSS. МЕНЬШЕ, чтобы 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 необходим, поскольку bootstrap фактически окрашивает ячейки отдельно (afaik не может просто применить фоновый цвет к tr). Я не смог найти какие-либо цветовые переменные в моей версии bootstrap, но в любом случае базовая идея.

Ответ 2

В итоге вы должны написать для него новое правило css.

В зависимости от того, какой пакет загрузочного буфера Twitter вы используете, у вас должны быть переменные для разных цветов.

Попробуйте что-то вроде:

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

Конечно, есть способ использовать extend или эквивалент LESS, чтобы избежать повторения одного и того же стиля.

Ответ 3

Обновлен 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;
}

Ответ 4

В текущей версии Bootstrap (3.3.7) можно покрасить одну ячейку таблицы следующим образом:

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

Ответ 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; }
    ...
}

Это помогло мне.