Tương tự như các lớp màu văn bản theo ngữ cảnh, hãy đặt nền của phần tử thành bất kỳ lớp theo ngữ cảnh nào. Các tiện ích nền không đặt
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba[var[--bs-success-rgb], var[--bs-bg-opacity]] !important;
}
5, vì vậy trong một số trường hợp, bạn sẽ muốn sử dụng các tiện ích màu .bg-success {
--bs-bg-opacity: 1;
background-color: rgba[var[--bs-success-rgb], var[--bs-bg-opacity]] !important;
}
6.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent
Độ dốc nền
Bằng cách thêm lớp
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba[var[--bs-success-rgb], var[--bs-bg-opacity]] !important;
}
7, độ dốc tuyến tính được thêm làm hình nền cho hình nền. Dải màu này bắt đầu với màu trắng bán trong suốt mờ dần về phía dướiBạn có cần một dải màu trong CSS tùy chỉnh của mình không?
bg-trung học. độ dốc bg
độ mờ
Đã thêm vào v5. 1. 0
kể từ v5. 1. 0,
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba[var[--bs-success-rgb], var[--bs-bg-opacity]] !important;
}
9 tiện ích được tạo bằng Sass bằng cách sử dụng các biến CSS. Điều này cho phép thay đổi màu sắc theo thời gian thực mà không cần biên dịch và thay đổi độ trong suốt của alpha độngLàm thế nào nó hoạt động
Xem xét tiện ích
This is default success background
This is 50% opacity success background
0 mặc định của chúng tôi.bg-success {
--bs-bg-opacity: 1;
background-color: rgba[var[--bs-success-rgb], var[--bs-bg-opacity]] !important;
}
Chúng tôi sử dụng phiên bản RGB của biến CSS
This is default success background
This is 50% opacity success background
1 [với giá trị là This is default success background
This is 50% opacity success background
2] và đính kèm một biến CSS thứ hai, This is default success background
This is 50% opacity success background
3, để tạo độ trong suốt của alpha [với giá trị mặc định là This is default success background
This is 50% opacity success background
4 nhờ một biến CSS cục bộ]. Điều đó có nghĩa là bất cứ lúc nào bạn sử dụng This is default success background
This is 50% opacity success background
0 ngay bây giờ, giá trị .bg-success {
--bs-bg-opacity: 1;
background-color: rgba[var[--bs-success-rgb], var[--bs-bg-opacity]] !important;
}
5 được tính toán của bạn là This is default success background
This is 50% opacity success background
7. Biến CSS cục bộ bên trong mỗi lớp This is default success background
This is 50% opacity success background
8 tránh các vấn đề thừa kế nên các phiên bản lồng nhau của các tiện ích không tự động có độ trong suốt alpha được sửa đổiThí dụ
Để thay đổi độ mờ đó, hãy ghi đè
This is default success background
This is 50% opacity success background
3 thông qua kiểu tùy chỉnh hoặc kiểu nội tuyếnĐây là nền thành công mặc định
Đây là nền thành công có độ mờ 50%
This is default success background
This is 50% opacity success background
Hoặc, chọn từ bất kỳ tiện ích nào trong số
This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
0Đây là nền thành công mặc định
Đây là nền thành công có độ mờ 75%
Đây là nền thành công có độ mờ 50%
Đây là nền thành công có độ mờ 25%
Đây là nền thành công có độ mờ 10%
This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
ngổ ngáo
Ngoài chức năng Sass sau đây, 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] để biết màu sắc và hơn thế nữa
Biến
Hầu hết các tiện ích
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba[var[--bs-success-rgb], var[--bs-bg-opacity]] !important;
}
9 được tạo bởi các 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;
$gradient: linear-gradient[180deg, rgba[$white, .15], rgba[$white, 0]];
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 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 các tiện ích, công cụ sửa đổi thành phần, v.v.
$theme-colors: [
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
];
Màu thang độ 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 từ bản đồ Sass riêng
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba[var[--bs-success-rgb], var[--bs-bg-opacity]] !important;
}
0Và độ mờ của màu nền được xây dựng trên đó với bản đồ của riêng chúng được sử dụng bởi API tiện ích
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba[var[--bs-success-rgb], var[--bs-bg-opacity]] !important;
}
1hỗn hợp
Không có mixin nào được sử dụng để tạo các tiện ích nền của chúng tôi, nhưng chúng tôi có một số mixin bổ sung cho các tình huống khác mà bạn muốn tạo độ dốc của riêng mình