Bootstrap 5 màu
Màu văn bản
Bootstrap 5 có một số lớp theo ngữ cảnh có thể được sử dụng để cung cấp "ý nghĩa thông qua màu sắc".
Các lớp dành cho màu văn bản là: .text-muted
, .text-primary
, .text-success
, .text-info
, .text-warning
, .text-danger
, .text-secondary
, .text-white
, .text-dark
, .text-body
(màu nội dung mặc định/thường là màu đen) và .text-light
:
Ví dụ
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
Dark grey text.
Body text.
Light grey text.
Bạn cũng có thể thêm độ mờ 50% cho văn bản đen hoặc trắng bằng các lớp .text-black-50
hoặc .text-white-50
:
Ví dụ
Black text with 50% opacity on white background
White text with 50% opacity on black background
Màu nền
Các lớp dành cho màu nền là: .bg-primary
, .bg-success
, .bg-info
, .bg-warning
, .bg-danger
, .bg-secondary
, .bg-dark
và .bg-light
.
Các lớp .bg- color
ở trên không hoạt động tốt với văn bản, hoặc ít nhất thì bạn phải chỉ định một lớp .text- color
thích hợp để có được màu văn bản phù hợp cho từng nền.
Tuy nhiên, bạn có thể sử dụng các lớp .text-bg- color
và Bootstrap sẽ tự động xử lý màu văn bản phù hợp cho từng màu nền:
Ví dụ
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.