Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
in English

Värvid

Edastage tähendus läbi colorkäputäie värvikasutusklasside abil. Sisaldab ka hõljutusolekutega linkide kujundamise tuge.

Värvid

Teksti värvimine värviutiliitidega. Kui soovite linke värvida, võite kasutada .link-*abiklasse , millel on :hoverja :focusolekud.

.text-primary

.tekst-sekundaarne

.tekst-edu

.tekst-oht

.text-hoiatus

.text-info

.tekst-valgus

.tekst-tume

.text-body

.text-muted

.tekst-valge

.tekst-must-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>
Tuginemine : tekstiutiliitide jaoks on lisatud .text-opacity-*utiliidid ja CSS-muutujad .text-black-50ning need on alates versioonist 5.1.0 aegunud. .text-white-50Need eemaldatakse versioonis 6.0.0.
Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .visually-hiddenVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .

Läbipaistmatus

Lisatud versioonis v5.1.0

Alates versioonist 5.1.0 genereeritakse tekstivärvi utiliidid Sassiga, kasutades CSS-i muutujaid. See võimaldab reaalajas värvimuutusi ilma kompileerimiseta ja dünaamilisi alfa-läbipaistvuse muutusi.

Kuidas see töötab

Mõelge meie .text-primaryvaikeutiliidile.

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

Kasutame oma --bs-primary(väärtusega 13, 110, 253) CSS-muutuja RGB-versiooni ja lisame alfa-läbipaistvuse jaoks teise CSS-muutuja --bs-text-opacity(vaikeväärtusega 1tänu kohalikule CSS-muutujale). See tähendab, et alati, kui praegu kasutate .text-primary, on teie arvutatud colorväärtus rgba(13, 110, 253, 1). Iga .text-*klassi sees olev kohalik CSS-muutuja väldib pärimisprobleeme, nii et utiliitide pesastatud eksemplaridel ei ole automaatselt muudetud alfa-läbipaistvust.

Näide

Selle läbipaistmatuse muutmiseks alistage --bs-text-opacitykohandatud stiilide või tekstisiseste stiilide kaudu.

See on vaikimisi põhitekst
See on 50% läbipaistmatusega põhitekst
<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>

Või valige mõni .text-opacityutiliit:

See on vaikimisi põhitekst
See on 75% läbipaistmatusega põhitekst
See on 50% läbipaistmatusega põhitekst
See on 25% läbipaistmatusega põhitekst
<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>

Spetsiifilisus

Mõnikord ei saa kontekstuaalseid klasse rakendada mõne teise valija spetsiifilisuse tõttu. Mõnel juhul on piisav lahendus mähkida elemendi sisu <div>soovitud klassiga semantilisse või mitmesse elementi.

Sass

Lisaks järgmistele Sassi funktsioonidele lugege meie kaasatud CSS-i kohandatud atribuute (teise nimega CSS-i muutujaid) värvide ja muu kohta.

Muutujad

Enamiku colorutiliitide loovad meie teemavärvid, mis on ümber määratud meie üldiste värvipaleti muutujate põhjal.

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

Saadaval on ka halltoonid, kuid utiliitide genereerimiseks kasutatakse ainult alamhulka.

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

Kaart

Teemavärvid lisatakse seejärel Sassi kaardile, et saaksime nende vahel ringi liikuda, et luua oma utiliite, komponentide modifikaatoreid ja muud.

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

Halltoonid on saadaval ka Sassi kaardina. Seda kaarti ei kasutata utiliitide loomiseks.

$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 värvid genereeritakse eraldi Sassi kaardist:

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

Ja värvide läbipaistmatus tugineb sellele oma kaardiga, mida kasutab utiliitide 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");

Utiliidide API

Värviutiliidid on deklareeritud meie utiliitide API-s scss/_utilities.scss. Siit saate teada, kuidas utiliitide API-t kasutada.

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