Culori

Transmiteți sens prin intermediul colorunor clase de utilitate de culoare. Include și suport pentru link-uri de stil cu stări de hover.

Pe aceasta pagina

Culori

Colorați textul cu utilitare de culoare. Dacă doriți să colorați legăturile, puteți utiliza .link-*clasele de ajutor care au :hoverși :focusstate.

.text-primar

.text-secundar

.text-succes

.text-pericol

.text-avertisment

.text-info

.text-lumină

.text-întuneric

.text-corp

.text dezactivat

.text-alb

.text-negru-50

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

Transmiterea sensului tehnologiilor de asistență

Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .visually-hiddenclasa.

Specificitate

Uneori, clasele contextuale nu pot fi aplicate din cauza specificului altui selector. În unele cazuri, o soluție suficientă este să împachetați conținutul elementului într-un <div>sau mai multe elemente semantice cu clasa dorită.

Sass

Pe lângă următoarea funcționalitate Sass, luați în considerare să citiți despre proprietățile noastre personalizate CSS incluse (alias variabilele CSS) pentru culori și multe altele.

Variabile

Cele mai multe colorutilități sunt generate de culorile temei noastre, reatribuite din variabilele noastre generice ale paletei de culori.

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

Culorile în tonuri de gri sunt, de asemenea, disponibile, dar numai un subset este folosit pentru a genera orice utilități.

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

Hartă

Culorile temei sunt apoi puse într-o hartă Sass, astfel încât să putem trece peste ele pentru a ne genera utilitățile, modificatorii de componente și multe altele.

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

Culorile în tonuri de gri sunt disponibile și ca hartă Sass. Această hartă nu este folosită pentru a genera utilitare.

$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

Utilitățile de culoare sunt declarate în API-ul nostru de utilitare în scss/_utilities.scss. Aflați cum să utilizați API-ul utilitare.

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