Farger
Formidle mening color
med en håndfull fargebruksklasser. Inkluderer støtte for styling av lenker med svevetilstander også.
Farger
Fargelegg tekst med fargeverktøy. Hvis du vil fargelegge lenker, kan du bruke .link-*
hjelpeklassene som har :hover
og :focus
stater.
.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>
.text-opacity-*
verktøy og CSS-variabler for tekstverktøy,
.text-black-50
og
.text-white-50
er 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-hidden
klassen.
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 1
takket være en lokal CSS-variabel). Det betyr at når som helst du bruker .text-primary
nå, er den beregnede color
verdien 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-opacity
via egendefinerte stiler eller innebygde stiler.
<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-opacity
verktøyene:
<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 color
verktø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
)
),