Màu sắc
Truyền tải ý nghĩa thông qua màu sắc với một số ít các lớp tiện ích màu sắc. Bao gồm hỗ trợ tạo kiểu liên kết với trạng thái di chuột.
Đối phó với tính cụ thể
Đôi khi không thể áp dụng các lớp theo ngữ cảnh do tính đặc thù của một bộ chọn khác. Trong một số trường hợp, cách giải quyết phù hợp là bọc nội dung phần tử của bạn trong a <div>với lớp.
Truyền đạt ý nghĩa cho các công nghệ hỗ trợ
Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp một dấu hiệu trực quan, điều này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc hiển thị rõ ràng từ chính nội dung (ví dụ: văn bản hiển thị) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .sr-onlylớp.
Màu sắc
.text-primary
.text-Secondary
.text-thành công
.text-nguy hiểm
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-mute
.text-trắng
.text-black-50
.text-white-50
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>Các lớp văn bản theo ngữ cảnh cũng hoạt động tốt trên các neo với các trạng thái di chuột và tiêu điểm được cung cấp. Lưu ý rằng lớp .text-whitevà .text-mutedkhông có kiểu liên kết bổ sung nào ngoài gạch chân.
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>Màu nền
Tương tự như các lớp màu văn bản theo ngữ cảnh, dễ dàng đặt nền của một phần tử thành bất kỳ lớp ngữ cảnh nào. Các thành phần neo sẽ tối khi di chuột, giống như các lớp văn bản. Tiện ích nền không được đặtcolor , vì vậy trong một số trường hợp, bạn sẽ muốn sử dụng .text-*các tiện ích.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Gradient nền
Khi $enable-gradientsđược đặt thành true(mặc định là false), bạn có thể sử dụng .bg-gradient-các lớp tiện ích. Tìm hiểu về các tùy chọn Sass của chúng tôi để kích hoạt các lớp này và hơn thế nữa.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark