Farger

Formidle mening colormed en håndfull fargebruksklasser. Inkluderer støtte for styling av lenker med svevetilstander også.

På denne siden

Farger

Fargelegg tekst med fargeverktøy. Hvis du vil fargelegge lenker, kan du bruke .link-*hjelpeklassene som har :hoverog :focusstater.

.tekst-primær

.tekst-sekundær

.tekst-suksess

.tekstfare

.tekst-advarsel

.tekst-info

.tekst-lys

.tekst-mørk

.tekst-tekst

.tekst-dempet

.tekst-hvit

.text-black-50

.tekst-hvit-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>

Avskrivning: Med tillegg av .text-opacity-*verktøy og CSS-variabler for tekstverktøy, .text-black-50og .text-white-50er avviklet fra og med v5.1.0. De vil bli fjernet i v6.0.0.

Formidle mening til hjelpeteknologier

Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .visually-hiddenklassen.

Opasitet

Lagt til i v5.1.0

Fra og med v5.1.0 genereres tekstfargeverktøy med Sass ved å bruke CSS-variabler. Dette tillater fargeendringer i sanntid uten kompilering og dynamiske endringer i alfa-transparens.

Hvordan det fungerer

Vurder vårt standardverktøy .text-primary.

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

Vi bruker en RGB-versjon av CSS-variabelen vår --bs-primary(med verdien av 13, 110, 253) og vedlagt en andre CSS-variabel, --bs-text-opacity, for alfa-transparensen (med en standardverdi 1takket være en lokal CSS-variabel). Det betyr at når som helst du bruker .text-primarynå, er den beregnede colorverdien rgba(13, 110, 253, 1). Den lokale CSS-variabelen i hver .text-*klasse unngår arveproblemer, slik at nestede forekomster av verktøyene ikke automatisk har en modifisert alfa-transparens.

Eksempel

For å endre opasiteten, overstyr --bs-text-opacityvia egendefinerte stiler eller innebygde stiler.

Dette er standard primærtekst

Dette er primærtekst med 50 % tetthet

<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 velg fra et av .text-opacityverktøyene:

Dette er standard primærtekst

Dette er primærtekst med 75 % opasitet

Dette er primærtekst med 50 % tetthet

Dette er primærtekst med 25 % opasitet

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

Spesifisitet

Noen ganger kan ikke kontekstuelle klasser brukes på grunn av spesifisiteten til en annen velger. I noen tilfeller er en tilstrekkelig løsning å pakke elementets innhold inn i et <div>eller flere semantiske element med ønsket klasse.

Sass

I tillegg til følgende Sass-funksjonalitet, bør du vurdere å lese om våre inkluderte egendefinerte CSS-egenskaper (aka CSS-variabler) for farger og mer.

Variabler

De fleste colorverktøyene er generert av temafargene våre, omtilordnet fra våre generiske fargepalettvariabler.

$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åtonefarger er også tilgjengelige, men bare et delsett brukes til å generere verktøy.

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

Kart

Temafarger legges deretter inn i et Sass-kart, slik at vi kan sløyfe dem for å generere våre verktøy, komponentmodifikatorer og mer.

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

Gråtonefarger er også tilgjengelige som et Sass-kart. Dette kartet brukes ikke til å generere verktøy.

$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-farger genereres fra et separat Sass-kart:

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

Og fargeopacitet bygger på det med sitt eget kart som forbrukes av 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

Fargeverktøy er deklarert i vår utilities API i scss/_utilities.scss. Lær hvordan du bruker 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
      )
    ),