Hướng dẫn bootstrap 5 text color - màu văn bản bootstrap 5

Màu sắc

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

.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

<p class="text-primary">.text-primaryp>
<p class="text-secondary">.text-secondaryp>
<p class="text-success">.text-successp>
<p class="text-danger">.text-dangerp>
<p class="text-warning bg-dark">.text-warningp>
<p class="text-info bg-dark">.text-infop>
<p class="text-light bg-dark">.text-lightp>
<p class="text-dark">.text-darkp>
<p class="text-body">.text-bodyp>
<p class="text-muted">.text-mutedp>
<p class="text-white bg-dark">.text-whitep>
<p class="text-black-50">.text-black-50p>
<p class="text-white-50 bg-dark">.text-white-50p>

Truyền đạt ý nghĩa để hỗ trợ các công nghệ

Sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp một dấu hiệu trực quan, sẽ không được chuyển đến người dùng các công nghệ hỗ trợ - chẳng hạn như đầu đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu là rõ ràng từ chính nội dung (ví dụ: văn bản có thể nhìn thấy) 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.

Tính đặc hiệu

Đôi khi các lớp theo ngữ cảnh không thể được áp dụng do tính đặc hiệu của một bộ chọn khác. Trong một số trường hợp, một cách giải quyết đủ là kết thúc nội dung phần tử của bạn trong một yếu tố

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

1 hoặc nhiều hơn với lớp mong muốn.

Sass

Ngoài các chức năng SASS sau đây, hãy xem xét đọ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à các biến CSS) cho 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;

2 được tạo ra 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 sắc diện tích cũng có sẵn, nhưng chỉ có một tập hợp con được sử dụng để tạo ra 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 đồ

Màu sắc chủ đề sau đó được đặt vào bản đồ SASS để chúng ta có thể lặp lại chúng để tạo ra các tiện ích, bộ sửa đổi thành phần và hơn thế nữa.

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

Màu sắc thang độ Grays 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.This map is not used to generate any utilities.

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

API tiện ích

Các tiện ích màu được khai báo trong API tiện ích của chúng tôi trong

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

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

    "color": (
      property: color,
      class: text,
      values: map-merge(
        $theme-colors,
        (
          "white": $white,
          "body": $body-color,
          "muted": $text-muted,
          "black-50": rgba($black, .5),
          "white-50": rgba($white, .5),
          "reset": inherit,
        )
      )
    ),