Mga kolor

Ipahayag ang kahulogan pinaagi colorsa pipila ka mga klase sa gamit sa kolor. Naglakip sa suporta alang sa pag-istilo sa mga link nga adunay hover states, usab.

Niini nga panid

Mga kolor

Kolori ang teksto gamit ang mga gamit sa kolor. Kung gusto nimo nga kolori ang mga link, mahimo nimong gamiton ang mga .link-*klase sa katabang nga adunay :hoverug :focusestado.

.text-primary

.text-secondary

.teks-kalamposan

.text-kakuyaw

.text-warning

.text-info

.text-kahayag

.text-ngitngit

.text-lawas

.text-muted

.text-puti

.text-black-50

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

Deprecation: Uban sa pagdugang sa mga .text-opacity-*utilities ug CSS variables alang sa text utilities, .text-black-50ug .text-white-50wala na gamita sa v5.1.0. Matangtang sila sa v6.0.0.

Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit og kolor aron makadugang og kahulogan naghatag lang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor klaro gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .visually-hiddenklase.

Opacity

Gidugang sa v5.1.0

Sa v5.1.0, ang mga gamit sa kolor sa teksto gihimo gamit ang Sass gamit ang CSS variables. Gitugotan niini ang mga pagbag-o sa kolor sa tinuud nga oras nga wala’y compilation ug dinamikong pagbag-o sa transparency sa alpha.

Giunsa kini paglihok

Hunahunaa ang among default .text-primaryutility.

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

Gigamit namo ang RGB nga bersyon sa among --bs-primary(uban ang bili sa 13, 110, 253) CSS variable ug gilakip ang ikaduha nga CSS variable, --bs-text-opacity, alang sa alpha transparency (nga adunay default nga bili 1salamat sa lokal nga CSS variable). Kana nagpasabut nga bisan unsang orasa nga imong gamiton .text-primarykaron, ang imong gikalkula nga colorkantidad mao ang rgba(13, 110, 253, 1). Ang lokal nga CSS variable sa sulod sa matag .text-*klase naglikay sa mga isyu sa kabilin mao nga ang mga nested instance sa mga utilities dili awtomatik nga adunay giusab nga alpha transparency.

Pananglitan

Aron mausab kana nga opacity, i-override --bs-text-opacitypinaagi sa custom nga mga estilo o inline nga mga estilo.

Kini ang default nga panguna nga teksto

Kini mao ang 50% opacity panguna nga 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, pagpili gikan sa bisan unsang mga .text-opacityutilities:

Kini ang default nga panguna nga teksto

Kini ang 75% nga opacity nga panguna nga teksto

Kini mao ang 50% opacity panguna nga teksto

Kini ang 25% nga opacity nga panguna nga 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>

Espesipiko

Usahay ang mga klase sa konteksto dili magamit tungod sa espesipiko sa lain nga tigpili. Sa pipila ka mga kaso, ang usa ka igo nga solusyon mao ang pagputos sa sulud sa imong elemento sa usa <div>o daghan pa nga elemento sa semantiko nga adunay gusto nga klase.

Sass

Dugang pa sa mosunod nga Sass functionality, ikonsiderar ang pagbasa bahin sa among gilakip nga CSS custom properties (aka CSS variables) para sa mga kolor ug uban pa.

Mga variable

Kadaghanan sa colormga utilities namugna pinaagi sa among mga kolor sa tema, gi-reassign gikan sa among generic color palette variables.

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

Anaa usab ang mga grayscale nga kolor, apan usa ra ka subset ang gigamit aron makamugna og bisan unsang mga utilities.

$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

Ang mga kolor sa tema gibutang dayon sa usa ka mapa sa Sass aron ma-loop namo kini aron makamugna ang among mga utilities, component modifiers, ug uban pa.

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

Ang grayscale nga mga kolor magamit usab isip usa ka mapa sa Sass. Kini nga mapa wala gigamit sa pagmugna og bisan unsang mga utilities.

$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 kolor sa RGB namugna gikan sa lahi nga mapa sa Sass:

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

Ug ang mga opacity sa kolor nagtukod niana gamit ang ilang kaugalingon nga mapa nga gigamit sa mga utilities 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 gamit sa kolor gideklarar sa among mga utilities API sa scss/_utilities.scss. Pagkat-on unsaon paggamit ang mga utilities 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
      )
    ),