Spring til hovedindhold Spring til dokumentnavigation
Check
in English

Farver

Formidle mening colormed en håndfuld farvefunktionsklasser. Inkluderer også støtte til styling af links med svævetilstande.

Farver

Farvelæg tekst med farveværktøjer. Hvis du vil farvelægge links, kan du bruge .link-*hjælperklasserne, som har :hoverog :focusangiver.

.tekst-primær

.tekst-sekundær

.tekst-succes

.tekst-fare

.tekst-advarsel

.tekst-info

.tekst-lys

.tekst-mørk

.tekst-brødtekst

.tekst-dæmpet

.tekst-hvid

.tekst-sort-50

.tekst-hvid-50

html
<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>
Forældet: Med tilføjelse af .text-opacity-*hjælpeprogrammer og CSS-variabler for tekstværktøjer, .text-black-50og .text-white-50er forældet fra v5.1.0. De vil blive fjernet i v6.0.0.
Formidle mening til hjælpeteknologier

Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .visually-hiddenklassen.

Gennemsigtighed

Tilføjet i v5.1.0

Fra v5.1.0 genereres tekstfarveværktøjer med Sass ved hjælp af CSS-variabler. Dette giver mulighed for farveændringer i realtid uden kompilering og dynamiske ændringer i alfa-gennemsigtighed.

Hvordan det virker

Overvej vores standardværktøj .text-primary.

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

Vi bruger en RGB-version af vores --bs-primary(med værdien af 13, 110, 253​​) CSS-variabel og vedhæftede en anden CSS-variabel, --bs-text-opacity, for alfa-gennemsigtigheden (med en standardværdi 1takket være en lokal CSS-variabel). Det betyder, at når som helst du bruger .text-primarynu, er din beregnede colorværdi rgba(13, 110, 253, 1). Den lokale CSS-variabel inde i hver .text-*klasse undgår arveproblemer, så indlejrede forekomster af hjælpeprogrammerne ikke automatisk har en ændret alfa-gennemsigtighed.

Eksempel

For at ændre denne opacitet skal du tilsidesætte --bs-text-opacityvia brugerdefinerede typografier eller indlejrede typografier.

Dette er standard primær tekst
Dette er primær tekst med 50 % opacitet
html
<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>

Eller vælg mellem et af .text-opacityhjælpeprogrammerne:

Dette er standard primær tekst
Dette er primær tekst med 75 % opacitet
Dette er primær tekst med 50 % opacitet
Dette er primær tekst med 25 % opacitet
html
<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>

Specificitet

Nogle gange kan kontekstuelle klasser ikke anvendes på grund af en anden vælgers specificitet. I nogle tilfælde er en tilstrækkelig løsning at pakke dit elements indhold ind i et <div>eller flere semantiske element med den ønskede klasse.

Sass

Ud over følgende Sass-funktionalitet kan du overveje at læse om vores inkluderede CSS-tilpassede egenskaber (også kaldet CSS-variabler) for farver og mere.

Variabler

De fleste colorhjælpeprogrammer er genereret af vores temafarver, omtildelt fra vores generiske farvepaletvariabler.

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

Gråtonefarver er også tilgængelige, men kun en delmængde bruges til at generere hjælpeprogrammer.

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

Kort

Temafarver sættes derefter ind i et Sass-kort, så vi kan sløjfe over dem for at generere vores hjælpeprogrammer, komponentmodifikatorer og mere.

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

Gråtonefarver er også tilgængelige som et Sass-kort. Dette kort bruges ikke til at generere nogen hjælpeprogrammer.

$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-farver genereres fra et separat Sass-kort:

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

Og farveopacitet bygger på det med deres eget kort, der forbruges af 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");

Hjælpeprogrammer API

Farveværktøjer er deklareret i vores hjælpeprogrammer API i scss/_utilities.scss. Lær, hvordan du bruger 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
      )
    ),