Couleurs
Transmettez du sens grâce colorà une poignée de classes utilitaires de couleur. Inclut également la prise en charge des liens de style avec des états de survol.
Couleurs
Colorisez le texte avec des utilitaires de couleur. Si vous souhaitez coloriser les liens, vous pouvez utiliser les .link-*classes d'assistance qui ont :hoveret :focusdéclarent.
.text-primaire
.text-secondaire
.text-succès
.text-danger
.texte-avertissement
.text-info
.text-light
.text-dark
.text-body
.text-muet
.text-white
.text-noir-50
.text-white-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>Donner du sens aux technologies d'assistance
L'utilisation de la couleur pour ajouter du sens ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations indiquées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple, le texte visible), soit incluses par des moyens alternatifs, tels que du texte supplémentaire masqué avec la .visually-hiddenclasse.
Spécificité
Parfois, les classes contextuelles ne peuvent pas être appliquées en raison de la spécificité d'un autre sélecteur. Dans certains cas, une solution de contournement suffisante consiste à envelopper le contenu de votre élément dans un <div>ou plusieurs éléments sémantiques avec la classe souhaitée.
Toupet
En plus des fonctionnalités Sass suivantes, pensez à lire nos propriétés personnalisées CSS incluses (ou variables CSS) pour les couleurs et plus encore.
variables
La plupart des colorutilitaires sont générés par nos couleurs de thème, réaffectées à partir de nos variables de palette de couleurs génériques.
$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;
Les couleurs en niveaux de gris sont également disponibles, mais seul un sous-ensemble est utilisé pour générer des utilitaires.
$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;
Carte
Les couleurs de thème sont ensuite placées dans une carte Sass afin que nous puissions les boucler pour générer nos utilitaires, nos modificateurs de composants, etc.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Les couleurs en niveaux de gris sont également disponibles sous forme de carte Sass. Cette carte n'est pas utilisée pour générer des utilitaires.
$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
);
API utilitaires
Les utilitaires de couleur sont déclarés dans notre API d'utilitaires au format scss/_utilities.scss. Apprenez à utiliser l'API des utilitaires.
"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,
)
)
),