Màu sắc
Truyền tải ý nghĩa thông qua colormột số 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.
Màu sắc
Tô màu văn bản bằng các tiện ích màu. Nếu bạn muốn tô màu các liên kết, bạn có thể sử dụng các .link-*lớp trợ giúp có :hovervà :focustrạng thái.
.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 bg-dark">.text-warning</p>
<p class="text-info bg-dark">.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>.text-opacity-*tiện ích và biến CSS cho các tiện ích văn bản
.text-black-50và
.text-white-50không được chấp nhận kể từ v5.1.0. Chúng sẽ bị xóa trong v6.0.0.
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 .visually-hiddenlớp.
Độ mờ
Đã thêm vào v5.1.0
Kể từ v5.1.0, các tiện ích màu văn bản được tạo với Sass bằng cách sử dụng các biến CSS. Điều này cho phép thay đổi màu theo thời gian thực mà không cần biên dịch và thay đổi độ trong suốt alpha động.
Làm thế nào nó hoạt động
.text-primaryHãy xem xét tiện ích mặc định của chúng tôi .
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Chúng tôi sử dụng phiên bản RGB của biến CSS --bs-primary(với giá trị là 13, 110, 253) của chúng tôi và đính kèm biến CSS thứ hai --bs-text-opacity, để có độ trong suốt alpha (với giá trị mặc định 1nhờ biến CSS cục bộ). Điều đó có nghĩa là bất cứ lúc nào bạn sử dụng bây giờ, giá trị được .text-primarytính của bạn là . Biến CSS cục bộ bên trong mỗi lớp tránh các vấn đề về kế thừa, vì vậy các phiên bản lồng nhau của tiện ích không tự động có độ trong suốt alpha được sửa đổi.colorrgba(13, 110, 253, 1).text-*
Thí dụ
Để thay đổi độ mờ đó, hãy ghi đè --bs-text-opacityqua các kiểu tùy chỉnh hoặc kiểu nội tuyến.
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>Hoặc, chọn từ bất kỳ .text-opacitytiện ích nào:
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>Tính đặc hiệu
Đô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 một <div>hoặc nhiều phần tử ngữ nghĩa với lớp mong muốn.
Sass
Ngoài chức năng Sass sau, hãy cân nhắc đọc về các thuộc tính tùy chỉnh CSS được bao gồm của chúng tôi (còn gọi là biến CSS) cho màu sắc và hơn thế nữa.
Biến
Hầu hết các colortiện ích được tạo ra bởi màu chủ đề của chúng tôi, được chỉ định lại từ các biến bảng màu chung của chúng tôi.
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
Màu thang độ xám cũng có sẵn, nhưng chỉ một tập hợp con được sử dụng để tạo ra bất kỳ tiện ích nào.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Bản đồ
Các màu chủ đề sau đó được đưa vào bản đồ Sass để chúng tôi có thể lặp lại chúng để tạo ra các tiện ích, công cụ sửa đổi thành phần và hơn thế nữa.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Màu xám cũng có sẵn dưới dạng bản đồ Sass. Bản đồ này không được sử dụng để tạo ra bất kỳ tiện ích nào.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
Màu RGB được tạo ra từ một bản đồ Sass riêng biệt:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Và độ mờ màu sắc xây dựng dựa trên đó với bản đồ của riêng chúng được sử dụng bởi API tiện ích:
$utilities-text: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");
API tiện ích
Các tiện ích màu được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss. Tìm hiểu cách sử dụng API tiện ích.
"color": (
property: color,
class: text,
local-vars: (
"text-opacity": 1
),
values: map-merge(
$utilities-text-colors,
(
"muted": $text-muted,
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"reset": inherit,
)
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),