Faarwen
Vermëttelt Bedeitung duerch colormat enger Handvoll Faarf Utility Klassen. Ëmfaasst Ënnerstëtzung fir Styling Links mat Hover Staaten och.
Faarwen
Colorize Text mat Faarf Utilities. Wann Dir Linke wëllt faarwen, kënnt Dir d' .link-*Helferklassen benotzen déi :hovera :focusStaaten hunn.
.text-primär
.text-sekundär
.Text-Erfolleg
.Text-Gefor
.Text-Warnung
.text-info
.Text-Liicht
.Text-däischter
.Text-Kierper
.Text gedämpft
.Text-wäiss
.text-schwaarz-50
.text-wäiss-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-*Utilities an CSS Variablen fir Text Utilities,
.text-black-50a
.text-white-50ginn ab v5.1.0 ofgeschaaft. Si ginn an v6.0.0 geläscht.
Bedeitung vun Hëllefstechnologien
D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .visually-hiddenKlass.
Opazitéit
Dobäi an v5.1.0
Zënter v5.1.0 ginn Textfaarf Utilities mat Sass generéiert mat CSS Variablen. Dëst erlaabt Echtzäit Faarf Ännerungen ouni Kompiléierung an dynamesch Alpha Transparenz Ännerungen.
Wéi et funktionnéiert
Betruecht eis Standard .text-primaryUtility.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Mir benotzen eng RGB Versioun vun eiser --bs-primary(mat dem Wäert vun 13, 110, 253) CSS Variabel an befestegt eng zweet CSS Variabel, --bs-text-opacity, fir d'Alpha Transparenz (mat engem Standardwäert 1dank enger lokaler CSS Variabel). Dat heescht wann Dir .text-primaryelo benotzt, Äre berechente colorWäert ass rgba(13, 110, 253, 1). Déi lokal CSS Variabel an all .text-*Klass vermeit Ierfschaftsprobleemer sou datt nested Instanzen vun den Utilities net automatesch eng modifizéiert Alpha Transparenz hunn.
Beispill
Fir dës Opazitéit z'änneren, iwwerschreift --bs-text-opacityiwwer personaliséiert Stiler oder Inline 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>Oder, wielt aus engem vun den .text-opacityUtilities:
<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>Spezifizitéit
Heiansdo kënnen kontextuell Klassen net applizéiert ginn wéinst der Spezifizitéit vun engem anere Selektor. A verschiddene Fäll ass eng genuch Léisung fir Ären Element Inhalt an engem <div>oder méi semanteschen Element mat der gewënschter Klass ze wéckelen.
Sass
Zousätzlech zu der folgender Sass Funktionalitéit, betruecht iwwer eis abegraff CSS Custom Properties (alias CSS Variablen) fir Faarwen a méi ze liesen.
Variablen
Déi meescht colorUtilities ginn duerch eis Thema Faarwen generéiert, vun eise generesche Faarfpalette Variabelen nei zougewisen.
$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;
Grayscale Faarwen sinn och verfügbar, awer nëmmen e Subset gëtt benotzt fir all Utilities ze generéieren.
$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
Themefaarwen ginn dann an eng Sass Kaart gesat, sou datt mir iwwer si kënne schloe fir eis Utilities, Komponentmodifikateuren a méi ze generéieren.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Grayscale Faarwen sinn och als Sass Kaart verfügbar. Dës Kaart gëtt net benotzt fir Utilities ze generéieren.
$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 Faarwen ginn aus enger separater Sass Kaart generéiert:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
A Faarfopazitéiten bauen op dat mat hirer eegener Kaart déi vun der Utilities API verbraucht gëtt:
$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
Faarf Utilities sinn an eiser Utilities API deklaréiert an scss/_utilities.scss. Léiert wéi Dir d'Utilities API benotzt.
"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
)
),