Кольори

Кольори

Розфарбуйте текст за допомогою кольорових утиліт. Якщо ви хочете розфарбувати посилання, ви можете використовувати .link-*допоміжні класи , які мають стани :hoverі :focus.

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

Непрозорість

Починаючи з версії 5.1.0, утиліти кольору тексту генеруються за допомогою Sass за допомогою змінних CSS. Це дозволяє змінювати колір у реальному часі без компіляції та динамічних змін альфа-прозорості.

Як це працює

Розглянемо нашу .text-primaryутиліту за замовчуванням.

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

Ми використовуємо RGB-версію нашої --bs-primary(зі значенням 13, 110, 253) змінної CSS і додаємо другу змінну CSS, --bs-text-opacity, для альфа-прозорості (зі значенням за замовчуванням 1завдяки локальній змінній CSS). Це означає, що кожного разу, коли ви використовуєте .text-primaryзараз, ваше обчислене colorзначення дорівнює rgba(13, 110, 253, 1). Локальна змінна CSS у кожному .text-*класі дозволяє уникнути проблем із успадкуванням, тому вкладені екземпляри утиліт не мають автоматично зміненої альфа-прозорості.

приклад

Щоб змінити цю непрозорість, замініть --bs-text-opacityза допомогою власних стилів або вбудованих стилів.

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

Або виберіть одну з .text-opacityутиліт:

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

Специфіка

Іноді контекстні класи неможливо застосувати через специфіку іншого селектора. У деяких випадках достатнім обхідним шляхом є загортання вмісту вашого елемента в <div>семантичний елемент або більше з потрібним класом.

Сасс

На додаток до наведених нижче функціональних можливостей Sass, подумайте прочитати про наші включені спеціальні властивості CSS (також відомі як змінні CSS) для кольорів тощо.

Змінні

Більшість colorутиліт генеруються кольорами нашої теми, перепризначеними з наших загальних змінних колірної палітри.

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

Також доступні кольори відтінків сірого, але для створення будь-яких утиліт використовується лише частина.

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

Карта

Потім кольори теми додаються до карти Sass, щоб ми могли циклічно використовувати їх для генерації наших утиліт, модифікаторів компонентів тощо.

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

Кольори відтінків сірого також доступні як карта Sass. Ця карта не використовується для створення будь-яких утиліт.

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

Кольори RGB генеруються з окремої карти Sass:

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

А непрозорість кольорів будується на цьому за допомогою власної карти, яка використовується API утиліт:

$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 утиліт

Утиліти кольору оголошено в нашому API утиліт у scss/_utilities.scss. Дізнайтеся, як використовувати API утиліт.

    "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
      )
    ),