Sử dụng bảng màu hàng cho các tế bào trong Bootstrap

Question

Twitter Bootstrap cung cấp các lớp học để color table rows như vậy:

<tr class="success"> 

Tôi thích sự lựa chọn màu sắc và việc đặt tên lớp. Bây giờ điều tôi muốn làm là sử dụng lại các lớp này và áp dụng chúng trên các ô bảng. Rõ ràng, tôi có thể định nghĩa các lớp của riêng tôi với cùng màu và được thực hiện với nó.

Nhưng có một cách viết tắt trong CSS. LESS, để cho các td kế thừa các lớp học?

Answer 1

Bạn có thể ghi đè lên các quy tắc mặc định css với điều này:

.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 là cần thiết như bootstrap thực sự màu các tế bào riêng rẽ (afaik nó không thể chỉ áp dụng background-color để một tr). Tôi không thể tìm thấy bất kỳ biến màu nào trong phiên bản bootstrap của tôi nhưng đó là ý tưởng cơ bản.

Answer 2

Điểm mấu chốt là bạn sẽ phải viết quy tắc css mới cho điều đó.

Tùy thuộc vào gói Trình khởi động Twitter bạn đang sử dụng, bạn nên có các biến cho các màu khác nhau.

Hãy thử một cái gì đó như:

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

Chắc chắn có một cách sử dụng extend hoặc tương đương LESS để tránh lặp lại những phong cách tương tự.

Answer 3

Với ít bạn có thể thiết lập nó như thế này;

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

Điều đó đã làm điều đó cho tôi.

Answer 4

Cập nhật html cho bootstrap mới hơn

.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

Với phiên bản hiện tại của Bootstrap (3.3.7), chúng ta có thể tô màu một tế bào duy nhất của một bảng như sau:

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