Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
in English

Zabarwienie

Przekaż znaczenie dzięki colorkilku klasom użyteczności kolorów. Obejmuje również obsługę stylów linków ze stanami najechania.

Zabarwienie

Koloruj tekst za pomocą narzędzi do kolorowania. Jeśli chcesz pokolorować linki, możesz użyć .link-*klas pomocniczych, które mają :hoveri :focusstany.

.text-primary

.tekst-dodatkowy

.tekst-sukces

.text-niebezpieczeństwo

.ostrzeżenie tekstowe

.informacje-tekstowe

.tekst-światło

.tekst-ciemny

.tekst-treść

.wyciszony tekst

.tekst-biały

.tekst-czarny-50

.tekst-biały-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>
Nadawanie znaczenia technologiom wspomagającym

Użycie koloru w celu dodania znaczenia zapewnia jedynie wizualne wskazanie, które nie zostanie przekazane użytkownikom technologii wspomagających – takich jak czytniki ekranu. Upewnij się, że informacje oznaczone kolorem są oczywiste z samej treści (np. widoczny tekst) lub są zawarte w inny sposób, np. dodatkowy tekst ukryty z .visually-hiddenklasą.

Specyficzność

Czasami klas kontekstowych nie można zastosować ze względu na specyfikę innego selektora. W niektórych przypadkach wystarczającym obejściem jest zawinięcie zawartości elementu w <div>element semantyczny lub więcej z żądaną klasą.

Sass

Oprócz poniższych funkcji Sass, rozważ przeczytanie o dołączonych niestandardowych właściwościach CSS (zwanych zmiennymi CSS) dla kolorów i nie tylko.

Zmienne

Większość colornarzędzi jest generowanych przez nasze kolory motywu, przypisywane ponownie z naszych ogólnych zmiennych palety kolorów.

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

Dostępne są również kolory w skali szarości, ale tylko podzbiór jest używany do generowania dowolnych narzędzi.

$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

Kolory motywu są następnie umieszczane na mapie Sass, dzięki czemu możemy je zapętlić, aby wygenerować nasze narzędzia, modyfikatory komponentów i nie tylko.

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

Kolory w skali szarości są również dostępne jako mapa Sass. Ta mapa nie służy do generowania żadnych mediów.

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

Narzędzia API

Narzędzia kolorów są deklarowane w naszym interfejsie API narzędzi w scss/_utilities.scss. Dowiedz się, jak korzystać z interfejsu API narzędzi.

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