Zastosowanie wiersz tabeli kolorowania dla komórek w Bootstrap

Question

Twitter Bootstrap oferuje zajęcia do color table rows tak:

<tr class="success"> 

Lubię wybór kolorów i nazewnictwa klasy. Teraz chciałbym ponownie użyć tych klas i zastosować je również w komórkach tabeli. Oczywiście mogłem zdefiniować własne klasy w tych samych kolorach i być z nimi gotowymi.

Ale czy istnieje skrót w CSS. MNIEJ, aby pozwolić td odziedziczyć klasy?

Answer 1

Można zastąpić domyślne reguły css z tym:

.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 jest potrzebna jako bootstrap rzeczywiście kolory komórek indywidualnie (AFAIK nie jest możliwe do zastosowania tylko background-color do tr). Nie mogłem znaleźć żadnych zmiennych kolorów w mojej wersji bootstrap, ale i tak jest to podstawowa idea.

Answer 2

Podsumowując, musisz napisać nową regułę css.

W zależności od używanego pakietu usługi Bootstrap na Twitterze, należy mieć zmienne dla różnych kolorów.

spróbować czegoś jak:

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

Na pewno nie jest to sposób na wykorzystanie extend lub słabiej odpowiednik w celu uniknięcia powtarzania tej samej stylizacji.

Answer 3

Mniej można ustawić w ten sposób;

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

To mi się udało.

Answer 4

Aktualizacja html dla nowszych 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; 
} 

Answer 5

Przy obecnej wersji Bootstrap (3.3.7), możliwe jest, aby kolor pojedynczą komórkę tabeli tak:

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