in English

Koloroj

Transdonu signifon per colormanpleno da koloraj utilaj klasoj. Inkluzivas ankaŭ subtenon por stilaj ligiloj kun ŝvebŝtatoj.

Sur ĉi tiu paĝo

Koloroj

Kolorigi tekston per koloraj utilecoj. Se vi volas kolorigi ligilojn, vi povas uzi la .link-*helpklasojn kiuj havas :hoverkaj :focusŝtatojn.

.text-primary

.teksto-sekundara

.teksto-sukceso

.teksto-danĝero

.teksto-averto

.text-info

.teksto-lumo

.teksto-malluma

.teksto-korpo

.text-mutita

.teksto-blanka

.teksto-nigra-50

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

Malrekomendiĝo: Kun la aldono de .text-opacity-*utilecoj kaj CSS-variabloj por tekstaj utilecoj, .text-black-50kaj .text-white-50estas malrekomenditaj ekde v5.1.0. Ili estos forigitaj en v6.0.0.

Transdonante signifon al helpaj teknologioj

Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidentaj el la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivitaj per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .visually-hiddenklaso.

Opakeco

Aldonita en v5.1.0

Ekde v5.1.0, tekstkoloraj utilecoj estas generitaj kun Sass uzante CSS-variablojn. Ĉi tio permesas realtempajn kolorŝanĝojn sen kompilo kaj dinamikaj alfa-travideblecoj.

Kiel ĝi funkcias

Konsideru nian defaŭltan .text-primaryilon.

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

Ni uzas RGB-version de nia --bs-primary(kun la valoro de 13, 110, 253) CSS-variablo kaj aldonis duan CSS-variablon, --bs-text-opacity, por la alfa-travidebleco (kun defaŭlta valoro 1danke al loka CSS-variablo). Tio signifas kiam ajn vi uzas .text-primarynun, via komputita colorvaloro estas rgba(13, 110, 253, 1). La loka CSS-variablo ene de ĉiu .text-*klaso evitas heredajn problemojn, do nestitaj okazoj de la utilecoj ne aŭtomate havas modifitan alfa-travideblecon.

Ekzemplo

Por ŝanĝi tiun opakecon, anstataŭigu --bs-text-opacityper kutimaj stiloj aŭ enliniaj stiloj.

Ĉi tio estas defaŭlta primara teksto

Ĉi tio estas 50% opakeco primara 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>

Aŭ elektu el iu ajn el la .text-opacityutilecoj:

Ĉi tio estas defaŭlta primara teksto

Ĉi tio estas 75% opakeco primara teksto

Ĉi tio estas 50% opakeco primara teksto

Ĉi tio estas 25% opakeco primara 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>

Specifeco

Foje kuntekstaj klasoj ne povas esti aplikataj pro la specifeco de alia elektilo. En iuj kazoj, sufiĉa solvo estas envolvi la enhavon de via elemento en <div>aŭ pli semantika elemento kun la dezirata klaso.

Sass

Aldone al la sekva Sass-funkcio, konsideru legi pri niaj inkluzivitaj CSS-propraj propraĵoj (alinome CSS-variabloj) por koloroj kaj pli.

Variabloj

Plej multaj colorutilecoj estas generitaj de niaj etkoloroj, reasignitaj de niaj ĝeneralaj koloraj variabloj.

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

Grizskalaj koloroj ankaŭ haveblas, sed nur subaro estas uzata por generi iujn ajn servaĵojn.

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

Mapo

Temkoloroj tiam estas metitaj en Sass-mapon por ke ni povu cirkuli super ili por generi niajn utilecojn, komponantajn modifaĵojn kaj pli.

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

Grizskalaj koloroj ankaŭ haveblas kiel Sass-mapo. Ĉi tiu mapo ne estas uzata por generi ajnajn ilojn.

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

RGB-koloroj estas generitaj de aparta Sass-mapo:

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

Kaj koloraj opakaĵoj konstruas sur tio kun sia propra mapo konsumita de la utilecoj 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");

Utilaĵoj API

Koloraj utilecoj estas deklaritaj en nia utileco API en scss/_utilities.scss. Lernu kiel uzi la utilecojn 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
      )
    ),