Màu văn bản Bootstrap 5

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

.text-blue
 Nội dung chính Show
 
Bảng màu văn bản mở rộng
biến thể bóng râm
màu sắc chủ đề
Màu mở rộng
độ đặc hiệu
ngổ ngáo
Bản đồ
Làm cách nào để tô màu văn bản bằng Bootstrap?
Làm cách nào để thay đổi màu Bootstrap 5?
Làm cách nào để thay đổi màu văn bản của thanh điều hướng trong Bootstrap 5?
Làm cách nào để thêm màu hex trong Bootstrap 5?
 

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

1 với một số lớp tiện ích màu sắc. Bao gồm hỗ trợ cho các liên kết tạo kiểu với trạng thái di chuột

Màu sắc

Tô màu văn bản với các tiện ích màu. Nếu bạn muốn tô màu cho các liên kết, bạn có thể sử dụng các lớp trợ giúp

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

0 có trạng thái

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

1 và

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

2

văn bản chính

văn bản phụ

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

thông tin văn bản

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

văn bản nguy hiểm

ánh sáng văn bản

văn bản tối

văn bản màu xám

nội dung văn bản

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

chữ trắng

chữ-đen-50

chữ-trắng-50

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

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 dấu hiệu trực quan, dấu hiệ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 rõ ràng từ chính nội dung (e. g. văn bản hiển thị), hoặc được bao gồm thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung ẩn với lớp

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

3

Bảng màu văn bả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

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

4 thành

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

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

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

biến thể bóng râm

Vì màu nền sử dụng hsla() nên 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

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

6 trên

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

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

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

8

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

9 ở đâu

• .text-blue
  
  .text-indigo
  
  .text-navy
  
  .text-maroon
  
  .text-brown
  
  .text-purple
  
  .text-pink
  
  .text-magenta
  
  .text-red
  
  .text-orange
  
  .text-yellow
  
  .text-lime
  
  .text-green
  
  .text-teal
  
  .text-cyan
  
  .text-black
  
  .text-gray
  
  .text-white

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

• .text-blue
  
  .text-indigo
  
  .text-navy
  
  .text-maroon
  
  .text-brown
  
  .text-purple
  
  .text-pink
  
  .text-magenta
  
  .text-red
  
  .text-orange
  
  .text-yellow
  
  .text-lime
  
  .text-green
  
  .text-teal
  
  .text-cyan
  
  .text-black
  
  .text-gray
  
  .text-white

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

Và

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

9 có thể là

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

9

màu sắc chủ đề

văn bản chính. text-lighten-xl

văn bản chính. text-lighten-lg

văn bản chính. văn bản-làm sáng-md

văn bản chính. text-lighten-sm

văn bản chính. text-lighten-xs

văn bản chính. text-dark-xs

văn bản chính. text-dark-sm

văn bản chính. văn bản-làm tối-md

văn bản chính. text-dark-lg

văn bản chính. văn bản-làm tối-xl

văn bản phụ. text-lighten-xl

văn bản phụ. text-lighten-lg

văn bản phụ. văn bản-làm sáng-md

văn bản phụ. text-lighten-sm

văn bản phụ. text-lighten-xs

văn bản phụ. text-dark-xs

văn bản phụ. text-dark-sm

văn bản phụ. văn bản-làm tối-md

văn bản phụ. text-dark-lg

văn bản phụ. văn bản-làm tối-xl

văn bản thành công. text-lighten-xl

văn bản thành công. text-lighten-lg

văn bản thành công. văn bản-làm sáng-md

văn bản thành công. text-lighten-sm

văn bản thành công. text-lighten-xs

văn bản thành công. text-dark-xs

văn bản thành công. text-dark-sm

văn bản thành công. văn bản-làm tối-md

văn bản thành công. text-dark-lg

văn bản thành công. văn bản-làm tối-xl

thông tin văn bản. text-lighten-xl

thông tin văn bản. text-lighten-lg

thông tin văn bản. văn bản-làm sáng-md

thông tin văn bản. text-lighten-sm

thông tin văn bản. text-lighten-xs

thông tin văn bản. text-dark-xs

thông tin văn bản. text-dark-sm

thông tin văn bản. văn bản-làm tối-md

thông tin văn bản. text-dark-lg

thông tin văn bản. văn bản-làm tối-xl

văn bản cảnh báo. text-lighten-xl

văn bản cảnh báo. text-lighten-lg

văn bản cảnh báo. văn bản-làm sáng-md

văn bản cảnh báo. text-lighten-sm

văn bản cảnh báo. text-lighten-xs

văn bản cảnh báo. text-dark-xs

văn bản cảnh báo. text-dark-sm

văn bản cảnh báo. văn bản-làm tối-md

văn bản cảnh báo. text-dark-lg

văn bản cảnh báo. văn bản-làm tối-xl

văn bản nguy hiểm. text-lighten-xl

văn bản nguy hiểm. text-lighten-lg

văn bản nguy hiểm. văn bản-làm sáng-md

văn bản nguy hiểm. text-lighten-sm

văn bản nguy hiểm. text-lighten-xs

văn bản nguy hiểm. text-dark-xs

văn bản nguy hiểm. text-dark-sm

văn bản nguy hiểm. văn bản-làm tối-md

văn bản nguy hiểm. text-dark-lg

văn bản nguy hiểm. văn bản-làm tối-xl

ánh sáng văn bản. text-lighten-xl

ánh sáng văn bản. text-lighten-lg

ánh sáng văn bản. văn bản-làm sáng-md

ánh sáng văn bản. text-lighten-sm

ánh sáng văn bản. text-lighten-xs

ánh sáng văn bản. text-dark-xs

ánh sáng văn bản. text-dark-sm

ánh sáng văn bản. văn bản-làm tối-md

ánh sáng văn bản. text-dark-lg

ánh sáng văn bản. văn bản-làm tối-xl

văn bản tối. text-lighten-xl

văn bản tối. text-lighten-lg

văn bản tối. văn bản-làm sáng-md

văn bản tối. text-lighten-sm

văn bản tối. text-lighten-xs

văn bản tối. text-dark-xs

văn bản tối. text-dark-sm

văn bản tối. văn bản-làm tối-md

văn bản tối. text-dark-lg

văn bản tối. văn bản-làm tối-xl

văn bản màu xám. text-lighten-xl

văn bản màu xám. text-lighten-lg

văn bản màu xám. văn bản-làm sáng-md

văn bản màu xám. text-lighten-sm

văn bản màu xám. text-lighten-xs

văn bản màu xám. text-dark-xs

văn bản màu xám. text-dark-sm

văn bản màu xám. văn bản-làm tối-md

văn bản màu xám. text-dark-lg

văn bản màu xám. văn bản-làm tối-xl

Màu mở rộng

văn bản màu xanh. text-lighten-xl

văn bản màu xanh. text-lighten-lg

văn bản màu xanh. văn bản-làm sáng-md

văn bản màu xanh. text-lighten-sm

văn bản màu xanh. text-lighten-xs

văn bản màu xanh. text-dark-xs

văn bản màu xanh. text-dark-sm

văn bản màu xanh. văn bản-làm tối-md

văn bản màu xanh. text-dark-lg

văn bản màu xanh. văn bản-làm tối-xl

văn bản chàm. text-lighten-xl

văn bản chàm. text-lighten-lg

văn bản chàm. văn bản-làm sáng-md

văn bản chàm. text-lighten-sm

văn bản chàm. text-lighten-xs

văn bản chàm. text-dark-xs

văn bản chàm. text-dark-sm

văn bản chàm. văn bản-làm tối-md

văn bản chàm. text-dark-lg

văn bản chàm. văn bản-làm tối-xl

văn bản-maroon. text-lighten-xl

văn bản-maroon. text-lighten-lg

văn bản-maroon. văn bản-làm sáng-md

văn bản-maroon. text-lighten-sm

văn bản-maroon. text-lighten-xs

văn bản-maroon. text-dark-xs

văn bản-maroon. text-dark-sm

văn bản-maroon. văn bản-làm tối-md

văn bản-maroon. text-dark-lg

văn bản-maroon. văn bản-làm tối-xl

văn bản màu nâu. text-lighten-xl

văn bản màu nâu. text-lighten-lg

văn bản màu nâu. văn bản-làm sáng-md

văn bản màu nâu. text-lighten-sm

văn bản màu nâu. text-lighten-xs

văn bản màu nâu. text-dark-xs

văn bản màu nâu. text-dark-sm

văn bản màu nâu. văn bản-làm tối-md

văn bản màu nâu. text-dark-lg

văn bản màu nâu. văn bản-làm tối-xl

văn bản màu tím. text-lighten-xl

văn bản màu tím. text-lighten-lg

văn bản màu tím. văn bản-làm sáng-md

văn bản màu tím. text-lighten-sm

văn bản màu tím. text-lighten-xs

văn bản màu tím. text-dark-xs

văn bản màu tím. text-dark-sm

văn bản màu tím. văn bản-làm tối-md

văn bản màu tím. text-dark-lg

văn bản màu tím. văn bản-làm tối-xl

văn bản màu hồng. text-lighten-xl

văn bản màu hồng. text-lighten-lg

văn bản màu hồng. văn bản-làm sáng-md

văn bản màu hồng. text-lighten-sm

văn bản màu hồng. text-lighten-xs

văn bản màu hồng. text-dark-xs

văn bản màu hồng. text-dark-sm

văn bản màu hồng. văn bản-làm tối-md

văn bản màu hồng. text-dark-lg

văn bản màu hồng. văn bản-làm tối-xl

văn bản-magenta. text-lighten-xl

văn bản-magenta. text-lighten-lg

văn bản-magenta. văn bản-làm sáng-md

văn bản-magenta. text-lighten-sm

văn bản-magenta. text-lighten-xs

văn bản-magenta. text-dark-xs

văn bản-magenta. text-dark-sm

văn bản-magenta. văn bản-làm tối-md

văn bản-magenta. text-dark-lg

văn bản-magenta. văn bản-làm tối-xl

chữ đỏ. text-lighten-xl

chữ đỏ. text-lighten-lg

chữ đỏ. văn bản-làm sáng-md

chữ đỏ. text-lighten-sm

chữ đỏ. text-lighten-xs

chữ đỏ. text-dark-xs

chữ đỏ. text-dark-sm

chữ đỏ. văn bản-làm tối-md

chữ đỏ. text-dark-lg

chữ đỏ. văn bản-làm tối-xl

văn bản màu cam. text-lighten-xl

văn bản màu cam. text-lighten-lg

văn bản màu cam. văn bản-làm sáng-md

văn bản màu cam. text-lighten-sm

văn bản màu cam. text-lighten-xs

văn bản màu cam. text-dark-xs

văn bản màu cam. text-dark-sm

văn bản màu cam. văn bản-làm tối-md

văn bản màu cam. text-dark-lg

văn bản màu cam. văn bản-làm tối-xl

văn bản màu vàng. text-lighten-xl

văn bản màu vàng. text-lighten-lg

văn bản màu vàng. văn bản-làm sáng-md

văn bản màu vàng. text-lighten-sm

văn bản màu vàng. text-lighten-xs

văn bản màu vàng. text-dark-xs

văn bản màu vàng. text-dark-sm

văn bản màu vàng. văn bản-làm tối-md

văn bản màu vàng. text-dark-lg

văn bản màu vàng. văn bản-làm tối-xl

văn bản-vôi. text-lighten-xl

văn bản-vôi. text-lighten-lg

văn bản-vôi. văn bản-làm sáng-md

văn bản-vôi. text-lighten-sm

văn bản-vôi. text-lighten-xs

văn bản-vôi. text-dark-xs

văn bản-vôi. text-dark-sm

văn bản-vôi. văn bản-làm tối-md

văn bản-vôi. text-dark-lg

văn bản-vôi. văn bản-làm tối-xl

văn bản màu xanh lá cây. text-lighten-xl

văn bản màu xanh lá cây. text-lighten-lg

văn bản màu xanh lá cây. văn bản-làm sáng-md

văn bản màu xanh lá cây. text-lighten-sm

văn bản màu xanh lá cây. text-lighten-xs

văn bản màu xanh lá cây. text-dark-xs

văn bản màu xanh lá cây. text-dark-sm

văn bản màu xanh lá cây. văn bản-làm tối-md

văn bản màu xanh lá cây. text-dark-lg

văn bản màu xanh lá cây. văn bản-làm tối-xl

văn bản-teal. text-lighten-xl

văn bản-teal. text-lighten-lg

văn bản-teal. văn bản-làm sáng-md

văn bản-teal. text-lighten-sm

văn bản-teal. text-lighten-xs

văn bản-teal. text-dark-xs

văn bản-teal. text-dark-sm

văn bản-teal. văn bản-làm tối-md

văn bản-teal. text-dark-lg

văn bản-teal. văn bản-làm tối-xl

văn bản màu lục lam. text-lighten-xl

văn bản màu lục lam. text-lighten-lg

văn bản màu lục lam. văn bản-làm sáng-md

văn bản màu lục lam. text-lighten-sm

văn bản màu lục lam. text-lighten-xs

văn bản màu lục lam. text-dark-xs

văn bản màu lục lam. text-dark-sm

văn bản màu lục lam. văn bản-làm tối-md

văn bản màu lục lam. text-dark-lg

văn bản màu lục lam. văn bản-làm tối-xl

chữ đen. text-lighten-xl

chữ đen. text-lighten-lg

chữ đen. văn bản-làm sáng-md

chữ đen. text-lighten-sm

chữ đen. text-lighten-xs

chữ đen. text-dark-xs

chữ đen. text-dark-sm

chữ đen. văn bản-làm tối-md

chữ đen. text-dark-lg

chữ đen. văn bản-làm tối-xl

văn bản màu xám. text-lighten-xl

văn bản màu xám. text-lighten-lg

văn bản màu xám. văn bản-làm sáng-md

văn bản màu xám. text-lighten-sm

văn bản màu xám. text-lighten-xs

văn bản màu xám. text-dark-xs

văn bản màu xám. text-dark-sm

văn bản màu xám. văn bản-làm tối-md

văn bản màu xám. text-dark-lg

văn bản màu xám. văn bản-làm tối-xl

độ mờ

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

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

24. Cũng có sẵn cho tất cả các màu chủ đề mặc định và các màu mở rộng

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

2

độ đặc hiệu

Đôi khi không thể áp dụng các lớp theo ngữ cảnh do tính đặc hiệu của bộ chọn khác. Trong một số trường hợp, một 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

hoặc nhiều yếu tố ngữ nghĩa hơn với lớp mong muốn

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

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

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

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

8

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

9

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

.text-blue

.text-indigo

.text-navy

.text-maroon

.text-brown

.text-purple

.text-pink

.text-magenta

.text-red

.text-orange

.text-yellow

.text-lime

.text-green

.text-teal

.text-cyan

.text-black

.text-gray

.text-white

0

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.

Làm cách nào để tô màu văn bản bằng Bootstrap?

Làm cách nào để thay đổi màu Bootstrap 5?

Làm cách nào để thay đổi màu văn bản của thanh điều hướng trong Bootstrap 5?

Làm cách nào để thêm màu hex trong Bootstrap 5?