Mga kulay

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.

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

Opacity

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.

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

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