Usa riga della tabella colorazione per le cellule in Bootstrap

Question

Twitter Bootstrap offre classi per color table rows modo:

<tr class="success"> 

mi piace la scelta del colore e la denominazione classe. Ora quello che mi piacerebbe fare è riutilizzare queste classi e applicarle anche su celle di tabella. Ovviamente, potrei definire le mie classi con gli stessi colori e farle.

Ma c'è una stenografia in CSS. MENO, lasciare che il td erediti le classi?

Answer 1

È possibile ignorare le regole predefinite css con questo:

.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 è necessario come bootstrap in realtà colora le cellule singolarmente (per quanto ne so non è possibile applicare solo background-color ad un tr). Non sono riuscito a trovare alcuna variabile di colore nella mia versione di bootstrap, ma questa è comunque l'idea di base.

Answer 2

La linea di fondo è che dovrete scrivere una nuova regola CSS per quello.

A seconda del bundle di Bootstrap di Twitter che si sta utilizzando, è necessario disporre di variabili per i vari colori.

provare qualcosa di simile:

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

Sicuramente c'è un modo per utilizzare extend o l'equivalente meno per evitare di ripetere lo stesso stile.

Answer 3

Con meno è possibile configurarlo in questo modo;

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

Questo ha fatto il trucco per me.

Answer 4

html Modificato il bootstrap recente

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

Answer 5

Con la versione corrente di Bootstrap (3.3.7), è possibile colorare una singola cella di una tabella in questo modo:

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