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>

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

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

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