Bootstrap sử dụng màu gì?

Truyền đạt ý nghĩa thông qua

.bg-opacity-0
 Nội dung chính Show
 
Tổng quan
Bảng màu nền mở rộng
biến thể bóng râm
màu sắc chủ đề
Màu mở rộng
Độ dốc nền
trạng thái hoạt động
ngổ ngáo
Bản đồ
hỗn hợp
API tiện ích
Màu sắc trong Bootstrap là gì?
Có bao nhiêu màu trong Bootstrap?
Bootstrap BG tối màu gì?
Làm cách nào để sử dụng màu tùy chỉnh trong Bootstrap?
 

.bg-opacity-5

.bg-opacity-10

.bg-opacity-20

.bg-opacity-30

.bg-opacity-40

.bg-opacity-50

.bg-opacity-60

.bg-opacity-70

.bg-opacity-80

.bg-opacity-90

3 với một số lớp tiện ích màu sắc. Bao gồm hỗ trợ làm sáng, làm tối và độ mờ cùng với màu nền động trên các trình kích hoạt khác nhau

Tổng quan

Thêm màu nền dựa trên nội dung của nó bằng cách sử dụng hoặc chọn từ. Thay đổi độ sáng hoặc tối của màu bằng cách sử dụng các lớp hoặc đặt màu nền bằng cách thay đổi kênh alpha của nó

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-opacity-0

.bg-opacity-5

.bg-opacity-10

.bg-opacity-20

.bg-opacity-30

.bg-opacity-40

.bg-opacity-50

.bg-opacity-60

.bg-opacity-70

.bg-opacity-80

.bg-opacity-90

4, 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-opacity-0

.bg-opacity-5

.bg-opacity-10

.bg-opacity-20

.bg-opacity-30

.bg-opacity-40

.bg-opacity-50

.bg-opacity-60

.bg-opacity-70

.bg-opacity-80

.bg-opacity-90

5

.bg-primary

.bg-secondary

.bg-success

.bg-info

.bg-warning

.bg-danger

.bg-light

.bg-dark

.bg-gray

.bg-body

.bg-white

.bg-transparent

Bảng màu nền mở rộng

Bảng màu mở rộng được bật theo mặc định. Bạn có thể vô hiệu hóa nó bằng cách đặt biến

.bg-opacity-0

.bg-opacity-5

.bg-opacity-10

.bg-opacity-20

.bg-opacity-30

.bg-opacity-40

.bg-opacity-50

.bg-opacity-60

.bg-opacity-70

.bg-opacity-80

.bg-opacity-90

6 thành

.bg-opacity-0

.bg-opacity-5

.bg-opacity-10

.bg-opacity-20

.bg-opacity-30

.bg-opacity-40

.bg-opacity-50

.bg-opacity-60

.bg-opacity-70

.bg-opacity-80

.bg-opacity-90

7. Đây là cách bảng màu nền hoàn chỉnh trông như thế nào

.bg-blue

.bg-indigo

.bg-navy

.bg-maroon

.bg-brown

.bg-purple

.bg-pink

.bg-magenta

.bg-red

.bg-orange

.bg-yellow

.bg-lime

.bg-green

.bg-teal

.bg-cyan

.bg-black

.bg-gray

.bg-white

.bg-transparent

biến thể bóng râm

Vì màu nền sử dụng , bạn có thể dễ dàng làm cho chúng sáng hơn hoặc tối hơn. Chỉ cần sử dụng lớp

.bg-opacity-0

.bg-opacity-5

.bg-opacity-10

.bg-opacity-20

.bg-opacity-30

.bg-opacity-40

.bg-opacity-50

.bg-opacity-60

.bg-opacity-70

.bg-opacity-80

.bg-opacity-90

8 trên

.bg-opacity-0

.bg-opacity-5

.bg-opacity-10

.bg-opacity-20

.bg-opacity-30

.bg-opacity-40

.bg-opacity-50

.bg-opacity-60

.bg-opacity-70

.bg-opacity-80

.bg-opacity-90

9. Mức độ bóng mặc định là 5. Bạn có thể thay đổi chúng trong biến

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

0

Ở đâu

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

1

• bg(primary)
  bg(secondary)
  bg(success)
  bg(danger)
  bg(warning)
  bg(info)
  bg(light)
  bg(dark)
  bg(white)
  bg(transparent)

  2 cho các lớp làm sáng màu nền

• bg(primary)
  bg(secondary)
  bg(success)
  bg(danger)
  bg(warning)
  bg(info)
  bg(light)
  bg(dark)
  bg(white)
  bg(transparent)

  3 cho các lớp làm đậm màu nền

Và

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)




bg(white)
bg(transparent)

1 có thể là

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

1

màu sắc chủ đề

bg-chính. bg-lighten-xl

bg-chính. bg-lighten-lg

bg-chính. bg-lighten-md

bg-chính. bg-lighten-sm

bg-chính. bg-lighten-xs

bg-chính. bg-dark-xs

bg-chính. bg-dark-sm

bg-chính. bg-dark-md

bg-chính. bg-dark-lg

bg-chính. bg-dark-xl

bg-trung học. bg-lighten-xl

bg-trung học. bg-lighten-lg

bg-trung học. bg-lighten-md

bg-trung học. bg-lighten-sm

bg-trung học. bg-lighten-xs

bg-trung học. bg-dark-xs

bg-trung học. bg-dark-sm

bg-trung học. bg-dark-md

bg-trung học. bg-dark-lg

bg-trung học. bg-dark-xl

bg-success. bg-lighten-xl

bg-success. bg-lighten-lg

bg-success. bg-lighten-md

bg-success. bg-lighten-sm

bg-success. bg-lighten-xs

bg-success. bg-dark-xs

bg-success. bg-dark-sm

bg-success. bg-dark-md

bg-success. bg-dark-lg

bg-success. bg-dark-xl

cảnh báo bg. bg-lighten-xl

cảnh báo bg. bg-lighten-lg

cảnh báo bg. bg-lighten-md

cảnh báo bg. bg-lighten-sm

cảnh báo bg. bg-lighten-xs

cảnh báo bg. bg-dark-xs

cảnh báo bg. bg-dark-sm

cảnh báo bg. bg-dark-md

cảnh báo bg. bg-dark-lg

cảnh báo bg. bg-dark-xl

nguy hiểm bg. bg-lighten-xl

nguy hiểm bg. bg-lighten-lg

nguy hiểm bg. bg-lighten-md

nguy hiểm bg. bg-lighten-sm

nguy hiểm bg. bg-lighten-xs

Màu mở rộng

bg-chàm. bg-lighten-xl

bg-chàm. bg-lighten-lg

bg-chàm. bg-lighten-md

bg-chàm. bg-lighten-sm

bg-chàm. bg-lighten-xs

bg-maroon. bg-lighten-xl

bg-maroon. bg-lighten-lg

bg-maroon. bg-lighten-md

bg-maroon. bg-lighten-sm

bg-maroon. bg-lighten-xs

bg-tím. bg-lighten-xl

bg-tím. bg-lighten-lg

bg-tím. bg-lighten-md

bg-tím. bg-lighten-sm

bg-tím. bg-lighten-xs

bg-đỏ tươi. bg-lighten-xl

bg-đỏ tươi. bg-lighten-lg

bg-đỏ tươi. bg-lighten-md

bg-đỏ tươi. bg-lighten-sm

bg-đỏ tươi. bg-lighten-xs

bg-đỏ tươi. bg-dark-xs

bg-đỏ tươi. bg-dark-sm

bg-đỏ tươi. bg-dark-md

bg-đỏ tươi. bg-dark-lg

bg-đỏ tươi. bg-dark-xl

bg-cam. bg-lighten-xl

bg-cam. bg-lighten-lg

bg-cam. bg-lighten-md

bg-cam. bg-lighten-sm

bg-cam. bg-lighten-xs

bg-vàng. bg-lighten-xl

bg-vàng. bg-lighten-lg

bg-vàng. bg-lighten-md

bg-vàng. bg-lighten-sm

bg-vàng. bg-lighten-xs

Độ dốc nền

Bằng cách thêm lớp

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

6, độ 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ưới

Bạ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ờ

Thay đổi độ mờ của màu nền bằng cách thay đổi kênh alpha của nó bằng cách sử dụng

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

8. Có sẵn cho tất cả mặc định và, quá

.bg-opacity-0

.bg-opacity-5

.bg-opacity-10

.bg-opacity-20

.bg-opacity-30

.bg-opacity-40

.bg-opacity-50

.bg-opacity-60

.bg-opacity-70

.bg-opacity-80

.bg-opacity-90

trạng thái hoạt động

Thay đổi màu nền trên trạng thái hoạt động của phần tử. Điều đó có nghĩa là, khi phần tử có trạng thái

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

9, khi nó có lớp

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

0 hoặc lớp

bg(primary)




bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

1 hoặc khi phần tử hiển thị trong chế độ xem và có lớp

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

2. Tính năng này là một phần của Torus Kit Hiệu ứng & Tương tác

Để thay đổi màu nền, hãy sử dụng

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

3

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

che nắng

Để thay đổi màu nền, hãy sử dụng

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

4

bg-lighten(xs)
bg-lighten(sm)
bg-lighten(md)
bg-lighten(lg)
bg-lighten(xl)

bg-lighten(xs)
bg-lighten(sm)
bg-lighten(md)
bg-lighten(lg)
bg-lighten(xl)

bg-lighten(xs)
bg-lighten(sm)
bg-lighten(md)
bg-lighten(lg)
bg-lighten(xl)

bg-darken(xs)
bg-darken(sm)
bg-darken(md)
bg-darken(lg)
bg-darken(xl)

bg-darken(xs)
bg-darken(sm)
bg-darken(md)
bg-darken(lg)
bg-darken(xl)

bg-darken(xs)
bg-darken(sm)
bg-darken(md)
bg-darken(lg)
bg-darken(xl)

độ mờ

Để thay đổi màu nền, hãy sử dụng

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

5

.bg-blue

.bg-indigo

.bg-navy

.bg-maroon

.bg-brown

.bg-purple

.bg-pink

.bg-magenta

.bg-red

.bg-orange

.bg-yellow

.bg-lime

.bg-green

.bg-teal

.bg-cyan

.bg-black

.bg-gray

.bg-white

.bg-transparent

2

.bg-blue

.bg-indigo

.bg-navy

.bg-maroon

.bg-brown

.bg-purple

.bg-pink

.bg-magenta

.bg-red

.bg-orange

.bg-yellow

.bg-lime

.bg-green

.bg-teal

.bg-cyan

.bg-black

.bg-gray

.bg-white

.bg-transparent

2

.bg-blue

.bg-indigo

.bg-navy

.bg-maroon

.bg-brown

.bg-purple

.bg-pink

.bg-magenta

.bg-red

.bg-orange

.bg-yellow

.bg-lime

.bg-green

.bg-teal

.bg-cyan

.bg-black

.bg-gray

.bg-white

.bg-transparent

2

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(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

6 đượ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

.bg-blue

.bg-indigo

.bg-navy

.bg-maroon

.bg-brown

.bg-purple

.bg-pink

.bg-magenta

.bg-red

.bg-orange

.bg-yellow

.bg-lime

.bg-green

.bg-teal

.bg-cyan

.bg-black

.bg-gray

.bg-white

.bg-transparent

5

.bg-blue

.bg-indigo

.bg-navy

.bg-maroon

.bg-brown

.bg-purple

.bg-pink

.bg-magenta

.bg-red

.bg-orange

.bg-yellow

.bg-lime

.bg-green

.bg-teal

.bg-cyan

.bg-black

.bg-gray

.bg-white

.bg-transparent

6

.bg-blue

.bg-indigo

.bg-navy

.bg-maroon

.bg-brown

.bg-purple

.bg-pink

.bg-magenta

.bg-red

.bg-orange

.bg-yellow

.bg-lime

.bg-green

.bg-teal

.bg-cyan

.bg-black

.bg-gray

.bg-white

.bg-transparent

7

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

.bg-blue

.bg-indigo

.bg-navy

.bg-maroon

.bg-brown

.bg-purple

.bg-pink

.bg-magenta

.bg-red

.bg-orange

.bg-yellow

.bg-lime

.bg-green

.bg-teal

.bg-cyan

.bg-black

.bg-gray

.bg-white

.bg-transparent

8

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.

.bg-blue

.bg-indigo

.bg-navy

.bg-maroon

.bg-brown

.bg-purple

.bg-pink

.bg-magenta

.bg-red

.bg-orange

.bg-yellow

.bg-lime

.bg-green

.bg-teal

.bg-cyan

.bg-black

.bg-gray

.bg-white

.bg-transparent

9

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

.bg-opacity-0

.bg-opacity-5

.bg-opacity-10

.bg-opacity-20

.bg-opacity-30

.bg-opacity-40

.bg-opacity-50

.bg-opacity-60

.bg-opacity-70

.bg-opacity-80

.bg-opacity-90

0

hỗ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

.bg-opacity-0

.bg-opacity-5

.bg-opacity-10

.bg-opacity-20

.bg-opacity-30

.bg-opacity-40

.bg-opacity-50

.bg-opacity-60

.bg-opacity-70

.bg-opacity-80

.bg-opacity-90

1

API tiện ích

Tiện ích nền được khai báo trong API tiện ích của chúng tôi trong

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)

7. Tìm hiểu cách sử dụng API tiện ích

Màu sắc trong Bootstrap là gì?

Có bao nhiêu màu trong Bootstrap?

Bootstrap BG tối màu gì?

Làm cách nào để sử dụng màu tùy chỉnh trong Bootstrap?