Màu và nền

Đặt màu nền với màu nền trước tương phản.

Trên trang này

Tổng quan

Đã thêm vào v5.2.0

Trình trợ giúp màu sắc và nền kết hợp sức mạnh của các .text-*tiện ích và .bg-*tiện ích của chúng tôi trong một lớp. Sử dụng chức năng Sass của chúng tôi color-contrast(), chúng tôi tự động xác định độ tương phản colorcho một cụ thể background-color.

Đứng lên! Hiện tại không có hỗ trợ cho color-contrastchức năng CSS-native, vì vậy chúng tôi sử dụng chức năng riêng của chúng tôi thông qua Sass. Điều này có nghĩa là việc tùy chỉnh màu sắc chủ đề của chúng tôi thông qua các biến CSS có thể gây ra các vấn đề về độ tương phản màu với các tiện ích này.

Chính với màu tương phản

Thứ cấp với màu tương phản

Thành công với màu tương phản

Nguy hiểm với màu tương phản

Cảnh báo với màu tương phản

Thông tin có màu tương phản

Ánh sáng có màu tương phản

Tối với màu tương phản

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

Với các thành phần

Sử dụng chúng thay cho các lớp kết hợp .text-*và .bg-*các lớp, như trên huy hiệu :

Sơ đẳng Thông tin

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

Hoặc trên thẻ :

Tiêu đề

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>