Bài 5: Màu sắc (color) trong Bootstrap 4

0
673

Xin chào các bạn, bài hôm nay, mình sẽ tiếp tục giới thiệu đến các bạn một phần nữa trong Bootstrap 4 đó là về trang trí màu sắc cho văn bản.

Màu sắc text

Boostrap 4 hỗ trợ các class mẫu để trang trí màu sắc cho văn bản như:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body
  • .text-light

Sau đây là cách Bootstrap 4 CSS cho các class trên:

Ví dụ hiển thị của các class trên như sau:

Các định dạng này cũng được áp dụng với liên kết và thêm trạng thái hover khi đưa chuột lên liên kết, các trạng thái được CSS như sau:

Ví dụ về các thẻ <a> liên kết:

Chúng ta cũng có thể áp dụng 50% độ mờ (opacity) cho văn bản màu trắng hoặc đen với các lớp: .text-black-50 hay .text-white-50, như sau:

Màu nền

Các class mẫu dùng để định nghĩa màu nền là:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light.
  • .bg-tranparent

Lưu ý màu nền không áp dụng cho màu chữ, do đó, trong một số trường hợp bạn phải sử dụng class .text-* cùng với màu nền để định nghĩa màu chữ.

Bootstrap 4 quy định CSS như sau:

Ví dụ:

Kết luận

Như vậy, mình đã giới thiệu xong cho các bạn về các class mặc định để định nghĩa màu chữ, màu liên kết và màu nền trong Boostrap 4. Ngoài ra, bạn phải tự định nghĩa màu sắc khác nếu muốn. Mời bạn theo dõi bài tiếp theo.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây