Barvy

Přeneste význam pomocí colorněkolika tříd barevných nástrojů. Zahrnuje také podporu pro stylování odkazů se stavy přechodu.

Na této straně

Barvy

Vybarvěte text pomocí barevných nástrojů. Pokud chcete vybarvit odkazy, můžete použít .link-*pomocné třídy , které mají :hovera :focusstavy.

.text-primární

.text-sekundární

.text-úspěch

.text-nebezpečí

.text-varování

.textové informace

.text-light

.text-tmavý

.text-body

.text-ztlumený

.text-bílý

.text-black-50

.text-bílá-50

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

Zastarání: S přidáním .text-opacity-*obslužných programů a proměnných CSS pro textové nástroje .text-black-50a .text-white-50jsou zastaralé od verze 5.1.0. Budou odstraněny ve verzi 6.0.0.

Předávání významu asistenčním technologiím

Použití barvy k přidání významu poskytuje pouze vizuální indikaci, která nebude zprostředkována uživatelům asistenčních technologií – jako jsou čtečky obrazovky. Ujistěte se, že informace označené barvou jsou buď zřejmé ze samotného obsahu (např. viditelný text), nebo jsou zahrnuty alternativními prostředky, jako je další text skrytý ve .visually-hiddentřídě.

Neprůhlednost

Přidáno ve verzi 5.1.0

Od verze 5.1.0 jsou nástroje pro barvu textu generovány pomocí Sass pomocí proměnných CSS. To umožňuje změny barev v reálném čase bez kompilace a dynamických změn průhlednosti alfa.

Jak to funguje

Zvažte náš výchozí .text-primarynástroj.

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

Používáme RGB verzi naší --bs-primary(s hodnotou 13, 110, 253) CSS proměnné a připojenou druhou CSS proměnnou, --bs-text-opacity, pro průhlednost alfa (s výchozí hodnotou 1díky lokální CSS proměnné). To znamená, že kdykoli použijete .text-primarynyní, vaše vypočítaná colorhodnota je rgba(13, 110, 253, 1). Lokální proměnná CSS uvnitř každé .text-*třídy zabraňuje problémům s dědičností, takže vnořené instance nástrojů nemají automaticky upravenou průhlednost alfa.

Příklad

Chcete-li změnit neprůhlednost, přepište --bs-text-opacitypomocí vlastních stylů nebo vložených stylů.

Toto je výchozí primární text

Toto je 50% neprůhlednost primárního textu

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

Nebo si vyberte některou z .text-opacityutilit:

Toto je výchozí primární text

Toto je 75% neprůhlednost primárního textu

Toto je 50% neprůhlednost primárního textu

Toto je 25% neprůhlednost primárního textu

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

Specifičnost

Někdy nelze kontextové třídy použít kvůli specifičnosti jiného selektoru. V některých případech je dostatečným řešením zabalit obsah prvku do <div>sémantického prvku nebo sémantického prvku s požadovanou třídou.

Sass

Kromě následujících funkcí Sass zvažte přečtení o našich vlastních vlastnostech CSS (známých také jako proměnné CSS) pro barvy a další.

Proměnné

Většina colornástrojů je generována našimi barvami motivu, přeřazenými z našich obecných proměnných palety barev.

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

Dostupné jsou také odstíny šedi, ale ke generování nástrojů se používá pouze podmnožina.

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

Mapa

Barvy motivu jsou poté vloženy do mapy Sass, abychom je mohli přepínat a vytvářet naše nástroje, modifikátory komponent a další.

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

Barvy ve stupních šedi jsou k dispozici také jako mapa Sass. Tato mapa neslouží ke generování žádných utilit.

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

Barvy RGB jsou generovány ze samostatné mapy Sass:

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

A krytí barev na tom staví svou vlastní mapou, kterou spotřebovává API utilit:

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

Utility API

Nástroje pro barvy jsou deklarovány v našem rozhraní API pro nástroje v scss/_utilities.scss. Naučte se používat rozhraní API utilit.

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