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>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.
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
);
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,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),