Màu sắc

Bootstrap được hỗ trợ bởi một hệ thống màu mở rộng tạo chủ đề cho các phong cách và thành phần của chúng tôi. Điều này cho phép tùy chỉnh và mở rộng toàn diện hơn cho bất kỳ dự án nào.

Trên trang này

Màu sắc chủ đề

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 nhằm tạo ra các lược đồ màu, cũng có sẵn dưới dạng các biến Sass và một bản đồ Sass trong scss/_variables.scsstệp Bootstrap.

Sơ đẳng

Sơ trung

Thành công

Sự nguy hiểm

Cảnh báo

Thông tin

Nhẹ

Tối

Tất cả những màu này đều có sẵn dưới dạng bản đồ Sass , $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Xem bản đồ Sass và tài liệu về vòng lặp của chúng tôi để biết cách sửa đổi những màu này.

Đủ màu sắc

Tất cả các màu Bootstrap đều có sẵn dưới dạng biến Sass và bản đồ Sass trong scss/_variables.scsstệp. Để tránh kích thước tệp tăng lên, chúng tôi không tạo các lớp văn bản hoặc màu nền cho từng biến này. Thay vào đó, chúng tôi chọn một tập hợp con các màu này cho bảng màu chủ đề .

Đảm bảo theo dõi tỷ lệ tương phản khi bạn tùy chỉnh màu sắc. Như hình dưới đây, chúng tôi đã thêm ba tỷ lệ tương phản cho mỗi màu chính — một cho các màu hiện tại của mẫu, một cho màu trắng và một cho màu đen.

$ xanh lam# 0d6efd

$ blue-100

$ blue-200

$ blue-300

$ blue-400

$ blue-500

$ blue-600

$ blue-700

$ blue-800

$ blue-900

$ chàm# 6610f2

$ chàm-100

$ chàm-200

$ chàm-300

$ chàm-400

$ chàm-500

$ chàm-600

$ chàm-700

$ chàm-800

$ chàm-900

$ tím# 6f42c1

$ tím-100

$ tím-200

$ tím-300

$ tím-400

$ tím-500

$ tím-600

$ tím-700

$ tím-800

$ tím-900

$ màu hồng# d63384

$ màu hồng-100

$ màu hồng-200

$ màu hồng-300

$ màu hồng-400

$ hồng-500

$ màu hồng-600

$ hồng-700

$ màu hồng-800

$ hồng-900

$ đỏ# dc3545

$ đỏ-100

$ đỏ-200

$ đỏ-300

$ đỏ-400

$ đỏ-500

$ đỏ-600

$ đỏ-700

$ đỏ-800

$ đỏ-900

$ cam# fd7e14

$ cam-100

$ cam-200

$ cam-300

$ cam-400

$ cam-500

$ cam-600

$ cam-700

$ cam-800

$ cam-900

$ vàng# ffc107

$ vàng-100

$ vàng-200

$ vàng-300

$ vàng-400

$ vàng-500

$ vàng-600

$ vàng-700

$ vàng-800

$ vàng-900

$ xanh lá cây# 198754

$ xanh-100

$ xanh-200

$ xanh-300

$ xanh-400

$ xanh-500

$ xanh lục-600

$ xanh-700

$ xanh-800

$ xanh-900

$ teal# 20c997

$ teal-100

$ teal-200

$ teal-300

$ teal-400

$ teal-500

$ teal-600

$ teal-700

$ teal-800

$ teal-900

$ lục lam# 0dcaf0

$ lục lam-100

$ lục lam-200

$ lục lam-300

$ lục lam-400

$ lục lam-500

$ lục lam-600

$ lục lam-700

$ lục lam-800

$ lục lam-900

$ xám-500# adb5bd

$ xám-100

$ xám-200

$ xám-300

$ xám-400

$ xám-500

$ xám-600

$ xám-700

$ xám-800

$ xám-900

$ đen# 000

$ trắng#fff

Ghi chú về Sass

Sass không thể tạo các biến theo chương trình, vì vậy chúng tôi đã tự tạo các biến cho mọi tông màu và tự tô bóng theo cách thủ công. Chúng tôi chỉ định giá trị điểm giữa (ví dụ $blue-500:) và sử dụng các chức năng màu tùy chỉnh để tô màu (làm sáng) hoặc tô bóng (làm tối) màu của chúng tôi thông qua mix()chức năng màu của Sass.

Việc sử dụng mix()không giống như lighten()và darken()— cái trước pha trộn màu đã chỉ định với màu trắng hoặc đen, trong khi cái sau chỉ điều chỉnh giá trị độ đậm nhạt của mỗi màu. Kết quả là một bộ màu hoàn chỉnh hơn nhiều, như được hiển thị trong bản demo CodePen này .

Các hàm tint-color()và shade-color()hàm của chúng tôi sử dụng mix()cùng với $theme-color-intervalbiến của chúng tôi, chỉ định giá trị phần trăm theo từng bước cho mỗi màu hỗn hợp mà chúng tôi tạo ra. Xem scss/_functions.scssvà scss/_variables.scsscác tệp để biết mã nguồn đầy đủ.

Bản đồ Color Sass

Các tệp Sass nguồn của Bootstrap bao gồm ba bản đồ để giúp bạn lặp lại danh sách các màu và giá trị hex của chúng một cách nhanh chóng và dễ dàng.

$colorsliệt kê tất cả các màu cơ bản ( 500) có sẵn của chúng tôi
$theme-colorsliệt kê tất cả các màu chủ đề được đặt tên theo ngữ nghĩa (hiển thị bên dưới)
$graysliệt kê tất cả các sắc thái và sắc thái của màu xám

Bên trong scss/_variables.scss, bạn sẽ tìm thấy các biến màu của Bootstrap và bản đồ Sass. Đây là một ví dụ về $colorsbản đồ Sass:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Thêm, xóa hoặc sửa đổi các giá trị trong bản đồ để cập nhật cách chúng được sử dụng trong nhiều thành phần khác. Thật không may tại thời điểm này, không phải thành phần nào cũng sử dụng bản đồ Sass này. Các bản cập nhật trong tương lai sẽ cố gắng cải thiện điều này. Cho đến lúc đó, hãy lập kế hoạch sử dụng các ${color}biến và bản đồ Sass này.

Thí dụ

Đây là cách bạn có thể sử dụng những thứ này trong Sass của mình:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Các lớp tiện ích màu và nềncolor cũng có sẵn để thiết lập và background-colorsử dụng các 500giá trị màu.