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 :hover et :focus déclarent.
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-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>.text-opacity-* utilitaires et de variables CSS pour les utilitaires de texte, .text-black-50 et .text-white-50 sont obsolètes à partir de la v5.1.0. Ils seront supprimés dans la v6.0.0.
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 désigné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-hidden classe.
Opacité
Ajouté dans v5.1.0
Depuis la v5.1.0, les utilitaires de couleur de texte sont générés avec Sass à l'aide de variables CSS. Cela permet des changements de couleur en temps réel sans compilation et des changements dynamiques de transparence alpha.
Comment ça fonctionne
Considérez notre .text-primary utilitaire par défaut.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Nous utilisons une version RVB de notre variable CSS --bs-primary (avec la valeur de 13, 110, 253) et attachons une deuxième variable CSS, --bs-text-opacity, pour la transparence alpha (avec une valeur par défaut 1 grâce à une variable CSS locale). Cela signifie que chaque fois que vous utilisez .text-primary maintenant, votre valeur calculée color est rgba(13, 110, 253, 1). La variable CSS locale à l'intérieur de chaque .text-* classe évite les problèmes d'héritage, de sorte que les instances imbriquées des utilitaires n'ont pas automatiquement une transparence alpha modifiée.
Exemple
Pour modifier cette opacité, remplacez --bs-text-opacity la par des styles personnalisés ou des styles en ligne.
<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>Ou, choisissez parmi l'un des .text-opacity utilitaires:
<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>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.
Sass
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 color utilitaires 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
);
Les couleurs RVB sont générées à partir d'une carte Sass distincte :
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Et les opacités de couleur s'appuient sur cela avec leur propre carte qui est consommée par l'API des utilitaires :
$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");
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,
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
)
),