Màu nền Bootstrap 5

Question

Bootstrap được thiết kế để phát triển web front-end, ưu tiên khả năng đáp ứng trên thiết bị di động. Nó tạo điều kiện thiết kế trang web nhanh hơn nhờ tích hợp CSS, JS, v.v.

Nội dung chính Show

Bootstrap 5 BG là gì?
Bootstrap BG tối màu gì?
Làm cách nào để thay đổi màu nền của nút trong Bootstrap?
Mã màu Bootstrap là gì?

Bootstrap 5 cung cấp một vài lớp tiện ích màu, sử dụng lớp này bạn có thể sử dụng màu nền để truyền tải thông điệp. Nó bao gồm hỗ trợ cho độ mờ, sáng và tối, cũng như màu nền động trên các trình kích hoạt khác nhau.

Bootstrap 5 Lớp màu nền

bg-chính. Lớp này cho một màu chính làm nền
bg-success. Lớp này có nền màu xanh lá cây
thông tin bg. Lớp này mang lại một nền màu xanh mòng két
. cảnh báo bg. Lớp này có nền màu vàng
nguy hiểm bg. Lớp này có nền đỏ
. bg-trung học. Lớp này có nền màu xám
bg-tối. Lớp này có nền màu xám đậm
. ánh sáng bg. Lớp này có nền màu xám nhạt
bg-trong suốt. Lớp này cho một nền trong suốt

Thí dụ. Dưới đây là một ví dụ về tất cả các lớp màu nền thông tin

HTML

<!DOCTYPE html>

<html lang="en">

________số 8

<____10____7

<1<<3 <4=<6>

<1<<3 html1=html3

<1html5=html7>

<1<<3 lang2=lang4

<1html5=lang8>

<1<=2=3=2>

<1<=8 =9="en"1 "en"2=

"en"4>

"en"6____10>

________số 8

<>1 >2=>4>

<1<>8 >2= 1>

3< 5 >2= 8>

<0<1

_______83____66____85>

3<<8<9<8>

________số 8

3<>8 >2=<!DOCTYPE html>08>

<0______201____78>

3<>8 >2=<09>

<0<12>8>

3<>8 >2=<20>

<0<23____78>

3<>8 >2=<31>

<0<34>8>

3<>8 >2=<42>

<0<45____78>

3<>8 >2=<53>

<0<56>8>

_______21____66____78>

"en"6______71<65

"en"6______3>

đầu ra

Bootstrap 5 màu bg

ví dụ 2. Trong ví dụ này, chúng tôi sẽ sử dụng các lớp màu nền bình thường như trắng, đen, trong suốt, v.v.

Chúng tôi sử dụng một tập hợp con của tất cả các màu để tạo một bảng màu nhỏ hơn để tạo bảng phối màu, cũng có sẵn dưới dạng các biến SCSS và bản đồ Sass trong tệp <!DOCTYPE html>70 của Bootstrap

Tất cả các màu này đều có sẵn dưới dạng bản đồ Sass, <!DOCTYPE html>71 trong tệp <!DOCTYPE html>70

Ghi chú. Màu chủ đề cũng có sẵn dưới dạng các lớp CSS. Bạn có thể sử dụng chúng trực tiếp trong dự án của mình mà không cần biên dịch mã scss. Hãy xem các ví dụ dưới đây

Chữ

Tô màu văn bản với các tiện ích màu

văn bản chính

văn bản phụ

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

văn bản nguy hiểm

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

thông tin văn bản

ánh sáng văn bản

văn bản tối

nội dung văn bản

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

chữ trắng

chữ đen

chữ-trắng-50

chữ-đen-50

        
            
      
            .text-primary
            .text-secondary
            .text-success
            .text-danger
            .text-warning
            .text-info
            .text-light
            .text-dark
            .text-body
            .text-muted
            .text-white
            .text-black
            .text-white-50
            .text-black-50

Khấu hao. Với việc bổ sung các tiện ích <!DOCTYPE html>73 và các biến CSS cho các tiện ích văn bản, <!DOCTYPE html>74 và <!DOCTYPE html>75 không được dùng nữa kể từ Bootstrap v5. 1. 0. Chúng sẽ bị xóa trong v6. 0. 0

Bootstrap 5 BG là gì?

Bằng cách thêm một. bg-gradient, một dải màu tuyến tính được thêm làm hình nền cho 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ưới.