Krāsas

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.

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

Necaurredzamība

No v5.1.0 teksta krāsu utilītas tiek ģenerētas ar Sass, izmantojot CSS mainīgos. Tas ļauj mainīt krāsu reāllaikā bez kompilācijas un dinamiskām alfa caurspīdīguma izmaiņām.

Kā tas strādā

Apsveriet mūsu noklusējuma .text-primaryutilītu.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

Mēs izmantojam sava CSS mainīgā --bs-primary(ar vērtību 13, 110, 253) RGB versiju un pievienojam otru CSS mainīgo , --bs-text-opacityalfa caurspīdīgumam (ar noklusējuma vērtību 1, pateicoties vietējam CSS mainīgajam). Tas nozīmē, ka jebkurā laikā, kad izmantojat .text-primarytagad, jūsu aprēķinātā colorvērtība ir rgba(13, 110, 253, 1). Vietējais CSS mainīgais katrā .text-*klasē novērš mantojuma problēmas, tāpēc ligzdotajiem utilītu gadījumiem automātiski nav modificētas alfa caurspīdīguma.

Piemērs

Lai mainītu šo necaurredzamību, ignorējiet, --bs-text-opacityizmantojot pielāgotos stilus vai iekļautos stilus.

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

Vai arī izvēlieties kādu no .text-opacityutilītprogrammām:

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

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

RGB krāsas tiek ģenerētas no atsevišķas Sass kartes:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Krāsu necaurredzamība balstās uz to, izmantojot savu karti, ko patērē utilītu API:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

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,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),