Màu sắc

Màu sắc

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

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Độ mờ

Kể từ v5.1.0, các tiện ích màu văn bản được tạo với Sass bằng cách sử dụng các biến CSS. Điều này cho phép thay đổi màu theo thời gian thực mà không cần biên dịch và thay đổi độ trong suốt alpha động.

Làm thế nào nó hoạt động

.text-primaryHãy xem xét tiện ích mặc định của chúng tôi .

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

Chúng tôi sử dụng phiên bản RGB của biến CSS --bs-primary(với giá trị là 13, 110, 253) của chúng tôi và đính kèm biến CSS thứ hai --bs-text-opacity, để có độ trong suốt alpha (với giá trị mặc định 1nhờ biến CSS cục bộ). Điều đó có nghĩa là bất cứ lúc nào bạn sử dụng bây giờ, giá trị được .text-primarytính của bạn là . Biến CSS cục bộ bên trong mỗi lớp tránh các vấn đề về kế thừa, vì vậy các phiên bản lồng nhau của tiện ích không tự động có độ trong suốt alpha được sửa đổi.colorrgba(13, 110, 253, 1).text-*

Thí dụ

Để thay đổi độ mờ đó, hãy ghi đè --bs-text-opacityqua các kiểu tùy chỉnh hoặc kiểu nội tuyến.

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

Hoặc, chọn từ bất kỳ .text-opacitytiện ích nào:

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

Tính đặc hiệu

Đôi khi không thể áp dụng các lớp theo ngữ cảnh do tính đặc thù của một bộ chọn khác. Trong một số trường hợp, 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 <div>hoặc nhiều phần tử ngữ nghĩa với lớp mong muốn.

Sass

Ngoài chức năng Sass sau, 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) cho màu sắc và hơn thế nữa.

Biến

Hầu hết các colortiện ích được tạo ra bởi 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 xám cũng có sẵn, nhưng chỉ 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 đồ

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 ra các tiện ích, công cụ 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 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.

$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
);

Màu RGB được tạo ra từ một bản đồ Sass riêng biệt:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Và độ mờ màu sắc được xây dựng dựa trên đó với bản đồ của riêng chúng được sử dụng bởi API tiện ích:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

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 scss/_utilities.scss. Tìm hiểu cách sử dụng API tiện ích.

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),