in English

Mga kulay

Ihatid ang kahulugan sa pamamagitan colorng ilang mga klase ng utility ng kulay. Kasama rin ang suporta para sa pag-istilo ng mga link na may mga estado ng hover.

Sa pahinang ito

Mga kulay

Kulayan ang teksto gamit ang mga utility na may kulay. Kung gusto mong kulayan ang mga link, maaari mong gamitin ang mga .link-*klase ng helper na mayroon :hoverat :focusnakasaad.

.teksto-pangunahin

.teksto-pangalawang

.text-tagumpay

.text-panganib

.text-warning

.text-info

.text-light

.text-madilim

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

Paghinto sa paggamit: Sa pagdaragdag ng mga .text-opacity-*utility at CSS variable para sa mga text utilities, .text-black-50at .text-white-50hindi na ginagamit simula sa v5.1.0. Aalisin ang mga ito sa v6.0.0.

Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .visually-hiddenklase.

Opacity

Idinagdag sa v5.1.0

Simula sa v5.1.0, nabuo ang mga gamit ng kulay ng teksto gamit ang Sass gamit ang mga variable ng CSS. Nagbibigay-daan ito para sa real-time na mga pagbabago sa kulay nang walang compilation at dynamic na alpha transparency na mga pagbabago.

Paano ito gumagana

Isaalang-alang ang aming default .text-primaryna utility.

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

Gumagamit kami ng RGB na bersyon ng aming --bs-primary(na may halaga ng 13, 110, 253) CSS variable at nag-attach ng pangalawang CSS variable, --bs-text-opacity, para sa alpha transparency (na may default na value 1salamat sa lokal na CSS variable). Ibig sabihin, anumang oras na gagamitin mo .text-primaryngayon, ang iyong nakalkulang colorhalaga ay rgba(13, 110, 253, 1). Ang lokal na variable ng CSS sa loob ng bawat .text-*klase ay umiiwas sa mga isyu sa pagmamana kaya ang mga nested instance ng mga utility ay hindi awtomatikong may binagong alpha transparency.

Halimbawa

Para baguhin ang opacity na iyon, i-override sa --bs-text-opacitypamamagitan ng mga custom na istilo o inline na istilo.

Ito ay default na pangunahing teksto

Ito ay 50% opacity pangunahing teksto

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

O, pumili mula sa alinman sa mga .text-opacityutility:

Ito ay default na pangunahing teksto

Ito ay 75% opacity pangunahing teksto

Ito ay 50% opacity pangunahing teksto

Ito ay 25% opacity pangunahing teksto

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

Pagtitiyak

Minsan hindi mailalapat ang mga contextual class dahil sa pagiging tiyak ng isa pang selector. Sa ilang mga kaso, ang isang sapat na solusyon ay upang ibalot ang nilalaman ng iyong elemento sa isang <div>o higit pang elemento ng semantiko na may nais na klase.

Sass

Bilang karagdagan sa sumusunod na functionality ng Sass, isaalang-alang ang pagbabasa tungkol sa aming kasamang CSS custom na mga katangian (aka CSS variable) para sa mga kulay at higit pa.

Mga variable

Karamihan colorsa mga utility ay nabuo ng aming mga kulay ng tema, na muling itinalaga mula sa aming mga generic na color palette variable.

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

Available din ang mga grayscale na kulay, ngunit isang subset lang ang ginagamit upang bumuo ng anumang mga utility.

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

Mapa

Pagkatapos ay inilalagay ang mga kulay ng tema sa isang mapa ng Sass upang mabuo namin ang mga ito upang mabuo ang aming mga utility, mga component modifier, at higit pa.

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

Available din ang mga grayscale na kulay bilang isang mapa ng Sass. Ang mapa na ito ay hindi ginagamit upang bumuo ng anumang mga kagamitan.

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

Ang mga kulay ng RGB ay nabuo mula sa isang hiwalay na mapa ng Sass:

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

At ang mga opacity ng kulay ay nabubuo doon gamit ang sarili nilang mapa na ginagamit ng mga utility 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

Ang mga color utilities ay ipinahayag sa aming mga utility API sa scss/_utilities.scss. Matutunan kung paano gamitin ang utility 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
      )
    ),