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>

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.

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

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