Koulè

Transmèt siyifikasyon atravè coloryon ti ponyen klas itilite koulè. Gen ladan sipò pou lyen manier ak eta hover, tou.

Nan paj sa a

Koulè

Kolorye tèks ak sèvis piblik koulè. Si ou vle koloran lyen, ou ka itilize .link-*klas asistan ki genyen :hoverak :focuseta yo.

.tèks-prensipal

.tèks-segondè

.tèks-siksè

.tèks-danje

.tèks-avètisman

.text-info

.tèks-limyè

.tèks-fè nwa

.tèks-kò

.tèks-mute

.tèks-blan

.tèks-nwa-50

.tèks-blan-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>

Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a se swa evidan nan kontni an li menm (egzanp tèks vizib la), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .visually-hiddenklas la.

Espesifik

Pafwa klas kontèks yo pa ka aplike akòz espesifik yon lòt seleksyon. Nan kèk ka, yon solisyon ase se vlope kontni eleman ou a nan yon <div>oswa plis eleman semantik ak klas la vle.

Sass

Anplis fonksyonalite Sass sa yo, konsidere li sou pwopriyete koutim CSS ki enkli nou yo (aka CSS varyab) pou koulè ak plis ankò.

Varyab

Pifò colorsèvis piblik yo te pwodwi pa koulè tèm nou yo, reasignate nan varyab palèt koulè jenerik nou an.

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

Koulè echèl gri yo disponib tou, men se sèlman yon subset yo itilize pou jenere nenpòt sèvis piblik.

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

Kat jeyografik

Lè sa a, koulè tèm yo mete nan yon kat Sass pou nou ka bouk sou yo pou jenere sèvis piblik nou yo, modifikatè eleman, ak plis ankò.

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

Koulè gri yo disponib tou kòm yon kat Sass. Kat sa a pa itilize pou jenere okenn sèvis piblik.

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

Itilite API

Koulè sèvis piblik yo deklare nan API sèvis piblik nou an nan scss/_utilities.scss. Aprann kijan pou itilize API sèvis piblik yo.

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