Mã màu thông tin của bootstrap là gì?

Các lớp Bootstrap 5 được liên kết với màu văn bản giúp cung cấp ý nghĩa cho văn bản. Các lớp này được gọi là các lớp tiện ích màu và cũng được sử dụng để tạo kiểu cho các liên kết có trạng thái di chuột

Tất cả các lớp liên quan đến màu văn bản cùng với ý nghĩa mà chúng truyền đạt được giải thích tại đây

văn bản chính

Nó mang lại màu xanh cho văn bản và đại diện cho một đoạn văn bản quan trọng

văn bản phụ

Nó cung cấp màu xám cho văn bản và đại diện cho văn bản phụ

văn bản thành công

Lớp này mang lại màu xanh lục cho văn bản và biểu thị sự thành công

văn bản nguy hiểm

Như tên cho thấy, lớp này biểu thị sự nguy hiểm và tạo màu đỏ cho văn bản

văn bản cảnh báo

Nó cung cấp màu vàng cho văn bản và biểu thị cảnh báo

thông tin văn bản

Lớp này được sử dụng để thể hiện một phần thông tin và cung cấp màu xanh lam nhạt hơn cho văn bản

ánh sáng văn bản

Nó mang lại màu xám nhạt cho văn bản

văn bản tối

Lớp này tạo màu xám đậm cho văn bản

nội dung văn bản

Nó cung cấp màu cho phần thân của văn bản có màu đen theo mặc định

văn bản bị tắt tiếng

Nó đại diện cho một văn bản bị tắt tiếng và có màu xám nhạt

chữ trắng

Như tên đại diện, lớp này cung cấp một màu trắng cho văn bản

Bây giờ chúng tôi sẽ minh họa tất cả các màu này thông qua một ví dụ để bạn có thể học cách sử dụng chúng

Ví dụ

Hãy xem xét ví dụ dưới đây

HTML

< p class="text-primary" . >Some important text</p>

<p class="text-secondary">Text with gray color.< /p >

< . p class="text-success">Victory<p>

<p class="text-danger">Danger.< /p >

< . p class="text-warning">Warning</p>

<p class="text-info">This is an important information</p>

<p class="text-light bg-dark">Hello World!< /p >

< p class="text-dark">This is a dark themed text</p>

<p class="text-body">This is body text</p>

<p class="text-muted">This text is muted</p>

<p class="text-white bg-dark">This is a text with white color</p>

In the above code, we have simply created multiple

elements and assigned each paragraph a different text color class.

đầu ra

Tất cả các lớp màu văn bản đã được thể hiện thành công

Thêm độ mờ cho văn bản

Có hai lớp được liên kết với màu văn bản trong Bootstrap 5 bổ sung độ mờ cho văn bản. Những điều này được giải thích dưới đây

chữ-đen-50

Điều này thể hiện một văn bản màu đen có độ mờ 50% với nền trắng

chữ-trắng-50

Điều này thể hiện một văn bản màu trắng có độ mờ 50% với nền đen

Hãy xem một ví dụ

Ví dụ

Trong ví dụ bên dưới, chúng tôi đang thêm độ mờ cho văn bản bằng cách sử dụng các lớp được đề cập ở trên

HTML

< p class="text-black->This paragraph has a black color, 50% opacity and a white background</p>

<p class="text-white-50 bg-dark">This paragraph has a white color, 50% opacity and a black background</p>

Ở đây chúng tôi đang chỉ định cả hai đoạn văn một lớp khác để thêm độ mờ cho văn bản hiện diện bên trong các đoạn văn đó. Bạn cũng phải nhận thấy rằng trong ví dụ này và ví dụ trên, chúng tôi đã cung cấp màu nền đen cho các thành phần bằng cách sử dụng lớp màu nền. Các lớp màu nền trong Bootstrap 5 đã được thảo luận trong phần sắp tới

đầu ra

Độ mờ đã được thêm thành công vào văn bản

Các lớp màu nền

Các lớp màu nền trong Bootstrap 5 cung cấp màu cho các phần tử. Tên của các lớp này tương tự như các lớp màu của màu văn bản với điểm khác biệt duy nhất là tiền tố “bg” được sử dụng cho các lớp được liên kết với màu nền

Hãy ghi nhớ điều này rằng các lớp này cung cấp màu nền cho các phần tử chứ không phải văn bản. Tất cả các lớp liên quan đến màu nền được giải thích bằng một ví dụ minh họa bên dưới

Ví dụ

Tham khảo ví dụ dưới đây để hiểu các lớp màu nền trong Bootstrap 5

HTML

< p lớp="bg-chính" . <>Some important text</p>

<p class="bg-secondary">Text with gray color.</p >

< . < class="bg-success">Victory<p>

<p class="bg-danger">Danger.</p >

< . < class="bg-warning">Warning</p>

<p class="bg-info">This is an important information</p>

<p class="bg-light">Hello World!</p >

< p class="bg-dark text-white">This is a dark themed text</p>

<p class="bg-white">This is a text with white color</p>

Trong đoạn mã trên, chúng tôi đã tạo nhiều đoạn văn và thêm một màu nền khác nhau cho mỗi đoạn

đầu ra

Màu nền đã được thêm thành công vào đoạn văn

Phần kết luận

Các lớp màu trong Bootstrap 5 cung cấp màu sắc cho văn bản cũng như mang lại một ý nghĩa nhất định cho văn bản. Trong khi đó, các lớp liên quan đến màu nền cung cấp màu nền cho phần tử. Các lớp được liên kết với văn bản và nền có tên giống nhau với các tiền tố khác nhau. Đối với các lớp màu văn bản, tiền tố là. văn bản-, trong khi đó, đối với các lớp màu nền, tiền tố là. bg-. Bài đăng này thảo luận chi tiết về từng loại lớp cùng với các ví dụ thích hợp

Mã màu Bootstrap là gì?

Thông tin BG có màu gì?

Làm cách nào để tô màu văn bản bằng Bootstrap?

Bootstrap chính là RGB gì?