Krāsas

Norādiet nozīmi, izmantojot colordažas krāsu lietderības klases. Ietver atbalstu arī saišu veidošanai ar kursora novietošanas stāvokļiem.

Šajā lapā

Krāsas

Krāsojiet tekstu, izmantojot krāsu utilītus. Ja vēlaties krāsot saites, varat izmantot .link-*palīgklases , kurām ir :hoverun :focusstāvokļi.

.text-primary

.teksts-sekundārais

.teksts-veiksmi

.teksts-bīstamība

.text-warning

.text-info

.text-light

.text-tumšs

.text-body

.text-muted

.text-white

.text-black-50

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

Nozīmes nodošana palīgtehnoloģijām

Krāsu izmantošana nozīmes pievienošanai nodrošina tikai vizuālu norādi, kas netiks nodota palīgtehnoloģiju lietotājiem, piemēram, ekrāna lasītājiem. Nodrošiniet, lai informācija, kas apzīmēta ar krāsu, būtu vai nu acīmredzama no paša satura (piemēram, redzamā teksta), vai arī tā ir iekļauta, izmantojot alternatīvus līdzekļus, piemēram, ar .visually-hiddenklasi paslēptu papildu tekstu.

Specifiskums

Dažreiz kontekstuālās klases nevar lietot cita atlasītāja specifikas dēļ. Dažos gadījumos pietiekams risinājums ir ietīt elementa saturu vienā <div>vai vairākā semantiskā elementā ar vajadzīgo klasi.

Sass

Papildus tālāk norādītajai Sass funkcionalitātei apsveriet iespēju izlasīt informāciju par mūsu iekļautajiem CSS pielāgotajiem rekvizītiem (aka CSS mainīgajiem) krāsām un citiem.

Mainīgie lielumi

Lielāko daļu colorutilītu ģenerē mūsu motīvu krāsas, kas ir atkārtoti piešķirtas no mūsu vispārīgajiem krāsu paletes mainīgajiem.

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

Ir pieejamas arī pelēktoņu krāsas, taču utilītu ģenerēšanai tiek izmantota tikai apakškopa.

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

Karte

Pēc tam motīvu krāsas tiek ievietotas Sass kartē, lai mēs varētu tām pāriet, lai ģenerētu utilītas, komponentu modifikatorus un daudz ko citu.

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

Pelēktoņu krāsas ir pieejamas arī kā Sass karte. Šī karte netiek izmantota utilītu ģenerēšanai.

$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

Krāsu utilītas ir deklarētas mūsu utilītu API scss/_utilities.scss. Uzziniet, kā izmantot utilītu 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,
        )
      )
    ),