Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
Check
in English

Dagiti kolor

Ipaawat ti kaipapanan babaen colorti sumagmamano a klase ti utilidad ti kolor. Iramanna ti suporta para kadagiti silpo ti estilo kadagiti estado ti hover, met.

Dagiti kolor

Kolor ti teksto babaen kadagiti utilidad ti kolor. No kayatmo ti mangkolor kadagiti silpo, mabalinmo nga usaren dagiti .link-*katulongan a klase nga addaan :hoverken :focusestado.

.teksto-pangruna

.teksto-segundario

.teksto-balligi

.teksto-peggad

.teksto-a-pakdaar

.teksto-info

.teksto-silaw

.teksto-nasipnget

.teksto-bagi

.teksto-naulimek

.teksto-puraw

.teksto-nangisit-50

.teksto-puraw-50

html nga
<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: Iti pannakainayon dagiti .text-opacity-*utilidad ken dagiti variable ti CSS para kadagiti utilidad ti teksto, .text-black-50ken .text-white-50naikkaten manipud iti v5.1.0. Maikkat dagitoy iti v6.0.0.
Panangipaay ti kaipapanan kadagiti makatulong a teknolohia

Ti panagusar ti kolor tapno mangnayon ti kaipapanan ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – kas dagiti screen reader. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (kas pagarigan ti makita a teksto), wenno mairaman babaen dagiti alternatibo a wagas, a kas ti kanayonan a teksto a nailemmeng a kadua ti .visually-hiddenklase.

Opacity nga

Nainayon iti v5.1.0

Manipud iti v5.1.0, dagiti utilidad ti kolor ti teksto ket napataud babaen ti Sass babaen ti panagusar kadagiti variable ti CSS. Daytoy ket mangipalubos kadagiti aktual nga oras a panagbalbaliw ti kolor nga awan ti panagtipon ken dagiti dinamiko a panagbalbaliw ti alpha a kinalawag.

No kasano ti panagandar dayta

Panunotem ti default .text-primaryutility-tayo.

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

Usarenmi ti bersion ti RGB ti --bs-primary(nga addaan iti pateg ti 13, 110, 253) a CSS a variablemi ken nangikapet ti maikadua a CSS a variable, --bs-text-opacity, para iti alpha a kinalawag (nga addaan iti default a pateg 1gapu iti lokal a CSS a variable). Kayatna a sawen nga aniaman nga oras nga usarem .text-primaryita, ti nakumpirma a colorpategmo ket rgba(13, 110, 253, 1). Ti lokal a CSS a variable iti uneg ti tunggal maysa .text-*a klase ket mangliklik kadagiti isyu ti panagtawid isu a dagiti naisanglad a pagarigan dagiti utilidad ket saan nga automatiko nga addaan iti nabaliwan nga alpha a kinalawag.

Pagwadan

Tapno mabaliwan dayta nga opacity, i-override --bs-text-opacitybabaen dagiti kostumbre nga estilo wenno dagiti estilo ti inline.

Daytoy ti default a kangrunaan a teksto
Daytoy ket 50% nga opacity a kangrunaan a teksto
html nga
<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>

Wenno, agpili manipud iti aniaman kadagiti .text-opacityutilidad:

Daytoy ti default a kangrunaan a teksto
Daytoy ket 75% nga opacity a kangrunaan a teksto
Daytoy ket 50% nga opacity a kangrunaan a teksto
Daytoy ket 25% nga opacity a kangrunaan a teksto
html nga
<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

No dadduma dagiti klase ti konteksto ket saan a maipakat gapu ti kinaespesipiko ti sabali a mangpili. Iti sumagmamano a kaso, ti umdas a panagliklik ket ti panangibalkot ti linaon ti elementom iti maysa <div>wenno ad-adu pay a semantiko nga elemento nga addaan ti tarigagayan a klase.

Sass nga

Malaksid ti sumaganad a panagusar ti Sass, ibilang ti panagbasa maipapan kadagiti nairaman a kostumbre a tagikua ti CSSmi (aka dagiti variable ti CSS) para kadagiti kolor ken dadduma pay.

Dagiti Variable

Kaaduan kadagiti colorutilidad ket pinartuat babaen dagiti kolor ti temami, a naituding manen manipud kadagiti sapasap a variable ti paleta ti kolormi.

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

Dagiti kolor ti grayscale ket magun-od pay, ngem ti laeng subgrupo ti maus-usar a mangpataud ti ania man a utilidad.

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

Kalpasanna dagiti kolor ti tema ket maikabil iti mapa ti Sass tapno mabalintayo ti ag-loop kadagitoy tapno mangpataud kadagiti utilidadtayo, dagiti mangbalbaliw ti paset, ken dadduma pay.

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

Magun-odan met dagiti kolor ti grayscale kas mapa ti Sass. Daytoy a mapa ket saan a maus-usar a mangpataud ti ania man a utilidad.

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

Dagiti kolor ti RGB ket napataud manipud iti naisina a mapa ti Sass:

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

Ket dagiti opacities ti kolor ket mangbangon iti dayta nga addaan iti bukodda a mapa a nabusbos babaen ti 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");

API dagiti utilidad

Dagiti utilidad ti kolor ket naideklara kadagiti utilidadmi nga API iti scss/_utilities.scss. Ammuem no kasano nga usaren ti 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
      )
    ),