Kleuren
Breng betekenis over colormet een handvol kleurgebruiksklassen. Bevat ook ondersteuning voor het opmaken van links met zweeftoestanden.
Kleuren
Kleur tekst in met kleurhulpprogramma's. Als u links wilt inkleuren, kunt u de .link-*helperklassen gebruiken die hebben :hoveren :focusstaten.
.tekst-primair
.tekst-secundair
.tekst-succes
.tekst-gevaar
.tekst-waarschuwing
.text-info
.text-light
.text-donker
.text-body
.tekst-gedempt
.text-wit
.tekst-zwart-50
.text-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-*hulpprogramma's en CSS-variabelen voor teksthulpprogramma's,
.text-black-50en
.text-white-50zijn verouderd vanaf v5.1.0. Ze worden verwijderd in v6.0.0.
Betekenis overbrengen aan ondersteunende technologieën
Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (bijv. de zichtbare tekst), of op alternatieve manieren wordt opgenomen, zoals extra tekst die verborgen is bij de .visually-hiddenklasse.
dekking
Toegevoegd in v5.1.0
Vanaf v5.1.0 worden hulpprogramma's voor tekstkleur gegenereerd met Sass met behulp van CSS-variabelen. Dit maakt realtime kleurveranderingen mogelijk zonder compilatie en dynamische alfatransparantieveranderingen.
Hoe het werkt
Overweeg ons standaardhulpprogramma .text-primary.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
We gebruiken een RGB-versie van onze --bs-primary(met de waarde van 13, 110, 253) CSS-variabele en gekoppeld een tweede CSS-variabele, --bs-text-opacity, voor de alpha-transparantie (met een standaardwaarde 1dankzij een lokale CSS-variabele). Dat betekent dat wanneer u .text-primarynu gebruikt, uw berekende colorwaarde rgba(13, 110, 253, 1). De lokale CSS-variabele binnen elke .text-*klasse vermijdt overervingsproblemen, zodat geneste instanties van de hulpprogramma's niet automatisch een gewijzigde alfatransparantie hebben.
Voorbeeld
Om die dekking te wijzigen, overschrijft u --bs-text-opacityvia aangepaste stijlen of inline stijlen.
<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 een van de .text-opacityhulpprogramma's:
<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>Specificiteit:
Soms kunnen contextuele klassen niet worden toegepast vanwege de specificiteit van een andere selector. In sommige gevallen is een afdoende oplossing om de inhoud van uw element in een <div>of meer semantisch element met de gewenste klasse te verpakken.
Sass
Overweeg, naast de volgende Sass-functionaliteit, te lezen over onze opgenomen aangepaste CSS-eigenschappen (ook bekend als CSS-variabelen) voor kleuren en meer.
Variabelen
De meeste colorhulpprogramma's worden gegenereerd door onze themakleuren, opnieuw toegewezen vanuit onze generieke kleurenpaletvariabelen.
$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;
Grijswaardenkleuren zijn ook beschikbaar, maar er wordt slechts een subset gebruikt om hulpprogramma's te genereren.
$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
Themakleuren worden vervolgens in een Sass-kaart geplaatst, zodat we er overheen kunnen lopen om onze hulpprogramma's, componentmodifiers en meer te genereren.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Grijswaardenkleuren zijn ook beschikbaar als Sass-kaart. Deze kaart wordt niet gebruikt om hulpprogramma's te genereren.
$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 worden gegenereerd vanuit een afzonderlijke Sass-kaart:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
En kleuropaciteiten bouwen daarop voort met hun eigen kaart die wordt gebruikt door de hulpprogramma-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");
Hulpprogramma's-API
Kleurhulpprogramma's worden gedeclareerd in onze hulpprogramma's-API in scss/_utilities.scss. Leer hoe u de hulpprogramma's-API gebruikt.
"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
)
),