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.

Sur cette page

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-blanc

.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>

Obsolescence : avec l'ajout d' .text-opacity-*utilitaires et de variables CSS pour les utilitaires de texte, .text-black-50et .text-white-50sont 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-hiddenclasse.

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-primaryutilitaire 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 1grâce à une variable CSS locale). Cela signifie que chaque fois que vous utilisez .text-primarymaintenant, votre valeur calculée colorest 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.

Ceci est le texte principal par défaut

Il s'agit d'un texte principal à 50 % d'opacité

<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-opacityutilitaires :

Ceci est le texte principal par défaut

Il s'agit d'un texte principal à 75 % d'opacité

Il s'agit d'un texte principal à 50 % d'opacité

Il s'agit d'un texte principal d'opacité de 25 %

<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.

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
);

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
      )
    ),