Koulè

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.

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

Opakite

Apati v5.1.0, sèvis piblik koulè tèks yo pwodwi ak Sass lè l sèvi avèk varyab CSS. Sa a pèmèt chanjman koulè an tan reyèl san yo pa konpilasyon ak chanjman dinamik transparans alfa.

Ki jan li fonksyone

Konsidere sèvis piblik default nou an .text-primary.

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

Nou itilize yon vèsyon RVB nan varyab CSS nou an --bs-primary(avèk valè 13, 110, 253) epi nou tache yon dezyèm varyab CSS, --bs-text-opacity, pou transparans alfa (ak yon valè default 1gras a yon varyab CSS lokal). Sa vle di nenpòt lè ou itilize kounye a, valè .text-primarykalkile ou se . Varyab lokal CSS andedan chak klas evite pwoblèm eritaj, kidonk ka enbrike nan sèvis piblik yo pa otomatikman gen yon transparans alfa modifye.colorrgba(13, 110, 253, 1).text-*

Egzanp

Pou chanje opakite sa a, pase sou desizyon --bs-text-opacityatravè estil koutim oswa estil inline.

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

Oswa, chwazi nan nenpòt nan .text-opacitysèvis piblik yo:

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

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

Koulè RGB yo pwodwi nan yon kat Sass separe:

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

Ak opakite koulè bati sou sa ak pwòp kat jeyografik pa yo ke API sèvis piblik yo konsome:

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

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