web-dev-qa-db-fra.com

Utiliser la coloration des lignes de tableau pour les cellules de Bootstrap

Twitter Bootstrap offre des classes à rangées de tables de couleurs comme ceci:

<tr class="success">

J'aime le choix des couleurs et le nom de la classe. Maintenant, ce que je voudrais faire est de réutiliser ces classes et de les appliquer également aux cellules de tableau. Évidemment, je pourrais définir mes propres classes avec les mêmes couleurs et en finir.

Mais existe-t-il un raccourci en CSS? MOINS, de laisser le td hériter des classes?

csstwitter-bootstrapless
25
Mahoni

Vous pouvez remplacer les règles css par défaut avec ceci:

.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 Est nécessaire, car bootstrap colore les cellules individuellement (il est parfois impossible d'appliquer une couleur de fond à un tr). Je ne pouvais pas trouver de variables de couleur dans ma version de bootstrap mais c'est quand même l'idée de base.

54
Matt

En bout de ligne, vous devrez écrire une nouvelle règle CSS pour cela.

Selon le paquet de Twitter Bootstrap que vous utilisez, vous devriez avoir des variables pour les différentes couleurs.

Essayez quelque chose comme:

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

Il existe sûrement un moyen d’utiliser extend ou l’équivalent LESS pour éviter de répéter le même style.

3
mathieugagne

Avec la version actuelle de Bootstrap (3.3.7), il est possible de colorer une seule cellule d'un tableau de la manière suivante:

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

2
user666

Mise à jour du code HTML pour le nouveau bootstrap

    .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

Avec moins, vous pouvez le configurer comme ceci;

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

Cela a fait le tour pour moi.

1
Omer