Farby

Preneste význam pomocou colorniekoľkých tried farieb. Zahŕňa aj podporu pre styling odkazov so stavmi vznášania.

Na tejto stránke

Farby

Vyfarbite text pomocou farebných pomôcok. Ak chcete zafarbiť odkazy, môžete použiť .link-*pomocné triedy , ktoré majú :hovera :focusstavy.

.text-primárny

.text-sekundárny

.text-úspech

.text-nebezpečenstvo

.textové varovanie

.text-info

.text-light

.text-tmavý

.text-body

.text stlmený

.text-biely

.text-black-50

.text-biely-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>

Zastarané: S pridaním .text-opacity-*pomocných programov a premenných CSS pre textové pomocné programy .text-black-50a .text-white-50sú zastarané od verzie 5.1.0. Vo verzii 6.0.0 budú odstránené.

Odovzdanie významu asistenčným technológiám

Použitie farby na pridanie významu poskytuje iba vizuálnu indikáciu, ktorá nebude poskytnutá používateľom asistenčných technológií – ako sú čítačky obrazovky. Uistite sa, že informácia označená farbou je buď zrejmá zo samotného obsahu (napr. viditeľný text), alebo je zahrnutá alternatívnymi prostriedkami, ako je dodatočný text skrytý spolu s .visually-hiddentriedou.

Nepriehľadnosť

Pridané vo verzii 5.1.0

Od verzie 5.1.0 sa pomocné programy pre farbu textu generujú pomocou Sass pomocou premenných CSS. To umožňuje zmeny farieb v reálnom čase bez kompilácie a dynamických zmien priehľadnosti alfa.

Ako to funguje

Zvážte náš predvolený .text-primarynástroj.

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

Používame RGB verziu našej --bs-primary(s hodnotou 13, 110, 253) CSS premennej a pripojenú druhú premennú CSS, --bs-text-opacity, pre priehľadnosť alfa (s predvolenou hodnotou 1vďaka lokálnej premennej CSS). To znamená, že kedykoľvek použijete .text-primaryteraz, vaša vypočítaná colorhodnota je rgba(13, 110, 253, 1). Lokálna premenná CSS vo vnútri každej .text-*triedy zabraňuje problémom s dedičnosťou, takže vnorené inštancie pomôcok nemajú automaticky upravenú priehľadnosť alfa.

Príklad

Ak chcete zmeniť túto nepriehľadnosť, prepíšte --bs-text-opacitypomocou vlastných štýlov alebo vložených štýlov.

Toto je predvolený primárny text

Toto je 50% nepriehľadnosť primárneho 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>

Alebo si vyberte niektorý z .text-opacitynástrojov:

Toto je predvolený primárny text

Toto je 75% nepriehľadnosť primárneho textu

Toto je 50% nepriehľadnosť primárneho textu

Toto je 25% nepriehľadnosť primárneho 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>

Špecifickosť

Niekedy sa kontextové triedy nedajú použiť kvôli špecifickosti iného selektora. V niektorých prípadoch je dostatočným riešením zabaliť obsah vášho prvku do <div>sémantického prvku alebo sémantického prvku s požadovanou triedou.

Sass

Okrem nasledujúcej funkcie Sass si prečítajte o našich vlastných vlastnostiach CSS (známe ako premenné CSS) pre farby a ďalšie.

Premenné

Väčšina colorpomôcok je generovaná našimi farbami tém, ktoré boli preradené z našich všeobecných premenných farebnej palety.

$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é sú aj odtiene šedej, ale na generovanie nástrojov sa používa iba 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

Farby tém sa potom vložia do mapy Sass, aby sme ich mohli prechádzať a vytvárať naše nástroje, modifikátory komponentov a ďalšie.

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

Farby v odtieňoch sivej sú k dispozícii aj ako mapa Sass. Táto mapa sa nepoužíva na generovanie žiadnych nástrojov.

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

Farby RGB sa generujú zo samostatnej mapy Sass:

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

A na tom stavajú farebné nepriehľadnosti so svojou vlastnou mapou, ktorú využíva rozhranie API nástrojov:

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

Utilities API

Pomôcky pre farby sú deklarované v našom rozhraní API nástrojov v scss/_utilities.scss. Zistite, ako používať pomocné rozhranie 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
      )
    ),