Bootstrap thứ cấp có màu gì?

Dưới đây là các màu tương tự Bootstrap Secondary (Bootstrap Grey) (Other - Brand). Delta E (ΔE) là thước đo sự khác biệt giữa hai màu. Delta E được đo trên thang điểm từ 0 đến 100, trong đó 0 có nghĩa là khớp chính xác và 100 là chênh lệch cao nhất

---

Các màu tương tự từ RAL, Thương hiệu, Doanh nghiệp, Trường học, Tổ chức, Thể thao, Cờ

---

Sơn tương tự như Bootstrap Secondary (Bootstrap Grey) (Other - Brand)

Dưới đây là các màu sơn được đề xuất tốt nhất tương tự như Bootstrap Secondary (Bootstrap Grey) (Other - Brand). Delta E (ΔE) là thước đo sự khác biệt giữa hai màu. Delta E được đo trên thang điểm từ 0 đến 100, trong đó 0 có nghĩa là khớp chính xác và 100 là chênh lệch cao nhất

Các lớp cho màu văn bản là. .text-muted, .text-primary, .text-success, .text-info,

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

0,

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

1,

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

2,

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

3,

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

4,

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

5 (màu cơ thể mặc định/thường là màu đen) và .text-primary0

Ví dụ

Văn bản này bị tắt tiếng

văn bản này là quan trọng

Văn bản này cho biết thành công

Văn bản này đại diện cho một số thông tin

Văn bản này đại diện cho một cảnh báo

Văn bản này thể hiện sự nguy hiểm

Văn bản phụ

Văn bản màu xám đậm

Bài kiểm tra cơ thể

Văn bản màu xám nhạt

Tự mình thử »

Các lớp văn bản theo ngữ cảnh cũng có thể được sử dụng trên các liên kết, điều này sẽ thêm màu di chuột tối hơn

Bạn cũng có thể thêm 50% opacity cho văn bản đen trắng với các lớp .text-primary1 hoặc .text-primary2

Ví dụ

Văn bản màu đen với độ mờ 50% trên nền trắng

Văn bản màu trắng với độ mờ 50% trên nền đen

Tự mình thử »

---

Màu nền

Các lớp cho màu nền là. _______73, _______74, _______75, _______76, _______77, _______78, _______79 và _______80

Lưu ý rằng màu nền không đặt màu cho văn bản, vì vậy trong một số trường hợp, bạn sẽ muốn sử dụng chúng cùng với lớp .text-success1

lục giác. #0275d8 RGB. (2, 117, 216), LỤC GIÁC. #5cb85c RGB. (92, 184, 92), lục giác. #5bc0de RGB. (91, 192, 222), lục giác. #f0ad4e RGB. (240, 173, 78), lục giác. #d9534f RGB. (217, 83, 79), lục giác. #292b2c RGB. (41, 43, 44), lục giác. #f7f7f7RGB. (247, 247, 247)

Phối màu được tạo bởi mz

lục giác. #007bff RGB. (0, 123, 255), HEX. #6c757d RGB. (108, 117, 125), lục giác. #28a745 RGB. (40, 167, 69), LỤC GIÁC. #dc3545RGB. (220, 53, 69), lục giác. #ffc107 RGB. (255, 193, 7), lục giác. #17a2b8 RGB. (23, 162, 184), lục giác. #f8f9fa RGB. (248, 249, 250), lục giác. #343a40 RGB. (52, 58, 64), LỤC GIÁC. #ffffff RGB. (255, 255, 255)

Phối màu được tạo bởi colorswall

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

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

8 có trạng thái

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

9 và

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

0

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-50

chữ-trắng-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-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

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

0

độ đặ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

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

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

$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 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.

Màu Bootstrap là gì?

Màu chính trong Bootstrap là gì?

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

Làm cách nào để đặt màu chính trong Bootstrap?