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
<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-*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 informationer, 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.
<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:
<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
)
),