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>

Deprevansyon: Avèk adisyon .text-opacity-*sèvis piblik yo ak varyab CSS pou sèvis piblik tèks, .text-black-50epi .text-white-50yo depreche apati v5.1.0. Yo pral retire nan v6.0.0.

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.

Opakite

Te ajoute nan v5.1.0

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 (avèk 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.

Sa a se tèks prensipal default

Sa a se 50% opakite tèks prensipal

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

Sa a se tèks prensipal default

Sa a se 75% opakite tèks prensipal

Sa a se 50% opakite tèks prensipal

Sa a se 25% opakite tèks prensipal

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