Kleure
Dra betekenis deur colormet 'n handvol kleurnutsklasse. Sluit ook ondersteuning vir stileringskakels met sweeftoestande in.
Kleure
Kleur teks in met kleurhulpmiddels. As jy skakels wil inkleur, kan jy die .link-*helperklasse gebruik wat :hoveren :focusstate het.
.teks-primêr
.teks-sekondêr
.teks-sukses
.teks-gevaar
.teks-waarskuwing
.teks-inligting
.teks-lig
.teks-donker
.teks-liggaam
.teks gedemp
.teks-wit
.teks-swart-50
.teks-wit-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-*nutsprogramme en CSS-veranderlikes vir tekshulpmiddels,
.text-black-50en
.text-white-50word vanaf v5.1.0 afgekeur. Hulle sal verwyder word in v6.0.0.
Dra betekenis aan ondersteunende tegnologieë oor
Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .visually-hiddenklas versteek is.
Ondeursigtigheid
Bygevoeg in v5.1.0
Vanaf v5.1.0 word tekskleurhulpmiddels met Sass gegenereer deur CSS-veranderlikes te gebruik. Dit maak voorsiening vir intydse kleurveranderinge sonder samestelling en dinamiese alfa-deursigtigheidsveranderinge.
Hoe dit werk
Oorweeg ons verstekhulpmiddel .text-primary.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Ons gebruik 'n RGB-weergawe van ons --bs-primary(met die waarde van 13, 110, 253) CSS-veranderlike en het 'n tweede CSS-veranderlike, --bs-text-opacity, aangeheg vir die alfa-deursigtigheid (met 'n verstekwaarde 1danksy 'n plaaslike CSS-veranderlike). Dit beteken dat enige tyd wat jy .text-primarynou gebruik, jou berekende colorwaarde rgba(13, 110, 253, 1). Die plaaslike CSS-veranderlike binne elke .text-*klas vermy oorerwingskwessies, so geneste gevalle van die nutsprogramme het nie outomaties 'n gewysigde alfa-deursigtigheid nie.
Voorbeeld
Om daardie ondeursigtigheid te verander, vervang --bs-text-opacityvia gepasmaakte style of inlynstyle.
<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 uit enige van die .text-opacitynutsprogramme:
<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 kan kontekstuele klasse nie toegepas word nie as gevolg van die spesifisiteit van 'n ander keurder. In sommige gevalle is 'n voldoende oplossing om jou element se inhoud in 'n <div>of meer semantiese element met die verlangde klas toe te draai.
Sass
Benewens die volgende Sass-funksionaliteit, oorweeg dit om te lees oor ons ingesluit CSS-pasgemaakte eienskappe (ook bekend as CSS-veranderlikes) vir kleure en meer.
Veranderlikes
Die meeste colornutsprogramme word gegenereer deur ons temakleure, hertoegewys vanaf ons generiese kleurpaletveranderlikes.
$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;
Grysskaalkleure is ook beskikbaar, maar slegs 'n subset word gebruik om enige nutsprogramme te genereer.
$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
Temakleure word dan in 'n Sass-kaart geplaas sodat ons daaroor kan loop om ons nutsprogramme, komponent-wysigers en meer te genereer.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Grysskaalkleure is ook beskikbaar as 'n Sass-kaart. Hierdie kaart word nie gebruik om enige hulpprogramme te genereer nie.
$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-kleure word gegenereer vanaf 'n aparte Sass-kaart:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
En kleurondeursigtighede bou daarop voort met hul eie kaart wat deur die utilities API verbruik word:
$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 nutsprogramme word verklaar in ons nutsprogramme API in scss/_utilities.scss. Leer hoe om die utilities API te gebruik.
"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
)
),