Kleuren
Bring betsjutting troch colormei in hantsjefol kleurnutsklassen. Omfettet ek stipe foar stylingkeppelings mei hoverstaten.
Kleuren
Kleurje tekst mei kleurhelpprogramma's. As jo keppelings wolle kleurje, kinne jo de .link-*helperklassen brûke dy't hawwe :hoveren :focussteaten.
.text-primary
.tekst-sekundêr
.tekst-sukses
.tekst-gefaar
.tekst-warskôging
.tekst-ynfo
.tekst-ljocht
.text-donker
.text-body
.tekst-muted
.tekst-wyt
.text-swart-50
.tekst-wyt-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-*nutsfoarsjennings en CSS fariabelen foar tekst nutsbedriuwen,
.text-black-50en
.text-white-50wurde ôfret as v5.1.0. Se sille fuortsmiten wurde yn v6.0.0.
Betsjutting oerbringe oan assistinte technologyen
It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .visually-hiddenklasse.
Opaciteit
Taheakke yn v5.1.0
Fanôf v5.1.0 wurde tekstkleurhelpprogramma's generearre mei Sass mei CSS-fariabelen. Dit soarget foar real-time kleurferoarings sûnder kompilaasje en dynamyske feroarings fan alfa-transparânsje.
Hoe't it wurket
Beskôgje ús standert .text-primaryhulpprogramma.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Wy brûke in RGB-ferzje fan ús --bs-primary(mei de wearde fan 13, 110, 253) CSS-fariabele en hechte in twadde CSS-fariabele, --bs-text-opacity, foar de alfa-transparânsje (mei in standertwearde 1troch in lokale CSS-fariabele). Dat betsjut as jo .text-primaryno brûke, jo berekkene colorwearde is rgba(13, 110, 253, 1). De lokale CSS-fariabele binnen elke .text-*klasse foarkomt erfskipproblemen, sadat geneste eksimplaren fan 'e nutsbedriuwen net automatysk in wizige alfa-transparânsje hawwe.
Foarbyld
Om dy dekking te feroarjen, oerskriuwe --bs-text-opacityfia oanpaste stilen of ynline stilen.
<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>Of kies út ien fan 'e .text-opacitynutsbedriuwen:
<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>Spesifisiteit
Soms kinne kontekstuele klassen net tapast wurde fanwege de spesifisiteit fan in oare selector. Yn guon gefallen is in foldwaande oplossing om de ynhâld fan jo elemint yn in <div>of mear semantysk elemint te wikkeljen mei de winske klasse.
Sass
Njonken de folgjende Sass-funksjonaliteit, beskôgje it lêzen oer ús opnommen CSS-oanpaste eigenskippen (aka CSS-fariabelen) foar kleuren en mear.
Fariabelen
De measte colornutsbedriuwen wurde generearre troch ús temakleuren, opnij tawiisd fan ús generyske fariabelen fan kleurenpalet.
$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;
Griisskaalkleuren binne ek beskikber, mar allinich in subset wurdt brûkt om alle nutsbedriuwen te generearjen.
$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;
Map
Temakleuren wurde dan yn in Sass-kaart pleatst, sadat wy der oerhinne kinne om ús nutsbedriuwen, komponintmodifiers en mear te generearjen.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Griisskaalkleuren binne ek beskikber as in Sass-kaart. Dizze kaart wurdt net brûkt om nutsbedriuwen te generearjen.
$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-kleuren wurde generearre út in aparte Sass-kaart:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
En kleuropaciteiten bouwe dêrop mei har eigen kaart dy't wurdt konsumearre troch de 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
Kleur nutsbedriuwen wurde ferklearre yn ús nutsbedriuwen API yn scss/_utilities.scss. Learje hoe't jo de utilities API brûke.
"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
)
),