Outils pratiques Bootstrap 5

Classes utilitaires / assistants

Bootstrap 5 comporte de nombreuses classes utilitaires / assistants qui permettent de définir rapidement les styles des éléments sans utiliser de code CSS.

Bordure

Ajouter ou supprimer des bordures pour les éléments en utilisant les classes de bordure :

Exemple

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Essayez-le vous-même

Largeur de bordure

Utilisation .border-1 à .border-5 Pour changer la largeur de la bordure :

Exemple

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Essayez-le vous-même

Couleur de bordure

Ajouter une couleur à la bordure en utilisant n'importe quelle classe de couleur de bordure de contexte :

Exemple

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Essayez-le vous-même

Bord arrondi

Utilisation rounded Ajouter des bords arrondis aux éléments :

Exemple

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

Essayez-le vous-même

Flottement et nettoyage des flottements

Utilisation .float-end Classe pour floter à droite un élément, ou utiliser .float-start Flotter à gauche, et utiliser .clearfix Classe de nettoyage des flottements :

Exemple

<div class="clearfix">
  <span class="float-start">Flotter à gauche</span>
  <span class="float-end">Flotter à droite</span>
</div>

Essayez-le vous-même

Flottement réactif

Floter un élément à gauche ou à droite en fonction de la largeur de l'écran, en utilisant les classes de flottement réactives (.float-*-left|right) où * est :

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Exemple

<div class="float-sm-end">Flotter à droite sur les écrans petits ou plus larges</div><br>
<div class="float-md-end">Flotter à droite sur les écrans moyens ou plus larges</div><br>
<div class="float-lg-end">Flotter à droite sur les écrans grands ou plus larges</div><br>
<div class="float-xl-end">Flotter à droite sur les écrans extra-grands ou plus larges</div><br>
<div class="float-xxl-end">Flotter à droite sur les écrans extra-grands ou plus larges</div><br>
<div class="float-none">Ne pas flotter</div>

Essayez-le vous-même

Centrer

Utilisation .mx-auto Élément centré (ajouter margin-left et margin-right: auto) :

Exemple

<div class="mx-auto bg-warning" style="width:150px">Centré</div>

Essayez-le vous-même

Largeur

Utiliser les classes w-* (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）Définir la largeur de l'élément :

Exemple

<div class="w-25 bg-warning">Largeur 25%</div>
<div class="w-50 bg-warning">Largeur 50%</div>
<div class="w-75 bg-warning">Largeur 75%</div>
<div class="w-100 bg-warning">Largeur 100%</div>
<div class="w-auto bg-warning">Largeur automatique</div>
<div class="mw-100 bg-warning">Largeur maximale 100%</div>

Essayez-le vous-même

Hauteur

Utiliser les classes h-* (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）Définir la hauteur de l'élément :

Exemple

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Hauteur 25%</div>
  <div class="h-50 bg-warning">Hauteur 50%</div>
  <div class="h-75 bg-warning">Hauteur 75%</div>
  <div class="h-100 bg-warning">Hauteur 100%</div>
  <div class="h-auto bg-warning">Hauteur automatique</div>
  <div class="mh-100 bg-warning" style="height:500px">Hauteur maximale 100%</div>
</div>

Essayez-le vous-même

Espaces

Bootstrap 5 dispose d'une large gamme de classes utilitaires réactives pour les marges et les paddings. Elles sont applicables à tous les points de rupture :

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

L'utilisation de ces classes suit le format suivant :{propriété}{côtes}-{taille} utilisé pour xs，et {propriété}{côtes}-{breakpoint}-{taille} utilisé pour sm、md、lg、xl et xxl。

propriété est l'un des suivants :

  • m - Définir marge
  • p - Définir remplissage

côtes est l'un des suivants :

  • t - Définir marge-haut ou remplissage-haut
  • b - Définir marge-bas ou remplissage-bas
  • s - Définir marge-gauche ou remplissage-gauche
  • e - Définir marge-droite ou remplissage-droite
  • x - Définir en même temps remplissage-gauche et remplissage-droite ou marge-gauche et marge-droite
  • y - Définir en même temps remplissage-haut et remplissage-bas ou marge-haut et marge-bas
  • blank - Mettre à la même taille sur les quatre côtés de l'élément marge ou remplissage

taille est l'un des suivants :

  • 0 - Mettre marge ou remplissage Définir 0
  • 1 - Mettre marge ou remplissage Définir .25rem
  • 2 - Mettre marge ou remplissage Définir .5rem
  • 3 - Mettre marge ou remplissage Définir 1rem
  • 4 - Mettre marge ou remplissage Définir 1.5rem
  • 5 - Mettre marge ou remplissage Définir 3rem
  • auto - Mettre marge Définir en auto

Exemple

<div class="pt-4 bg-warning">Je n'ai que des marges internes hautes (1.5rem)</div>
<div class="p-5 bg-success">J'ai des marges internes (3rem) sur tous les côtés</div>
<div class="m-5 pb-5 bg-info">J'ai des marges externes (3rem) et des marges internes basses (3rem) sur tous les côtés</div>

Essayez-le vous-même

Plus d'exemples d'espacement

.m-# / m-*-# Marge externe de tous les côtés Essayez
.mt-# / mt-*-# Marge externe haute Essayez
.mb-# / mb-*-# Marge externe basse Essayez
.ms-# / ms-*-# Marge externe gauche Essayez
.me-# / me-*-# Marge externe droite Essayez
.mx-# / mx-*-# Marge interne gauche et droite Essayez
.my-# / my-*-# Marge externe haute et basse Essayez
.p-# / p-*-# Marge interne (remplissage) de tous les côtés Essayez
.pt-# / pt-*-# Marge interne haute Essayez
.pb-# / pb-*-# Marge interne basse Essayez
.ps-# / ps-*-# Marge interne gauche Essayez
.pe-# / pe-*-# Marge interne droite Essayez
.py-# / py-*-# Marge interne haute et basse Essayez
.px-# / px-*-# Marge interne gauche et droite Essayez

Vous pouvez consulter nos Manuel de référence des unités CSS En savoir plus sur rem et les unités de dimensions différentes.

ombre

Utilisez ombre- Ajouter une ombre à l'élément de classe :

Exemple

<div class="shadow-none p-4 mb-4 bg-light">sans ombre</div>
<div class="shadow-sm p-4 mb-4 bg-white">Ombre petite</div>
<div class="shadow p-4 mb-4 bg-white">Ombre par défaut</div>
<div class="shadow-lg p-4 mb-4 bg-white">Ombre grande</div>

Essayez-le vous-même

Alignement vertical

Utilisez align- Les classes changent l'alignement des éléments (seulement pour les éléments inline, inline-block, inline-table et les cellules de table) :

Exemple

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Essayez-le vous-même

Rapport d'aspect

Créez des vidéos ou des diapositives réactives en fonction de la largeur du parent.

Ajoutez .ratio Les classes sont en rapport avec le rapport d'aspect que vous avez choisi .aspect-ratio-* Ajoutez-les à l'élément parent et ajoutez-y des embeddings (vidéos ou iframe) :

Exemple

<!-- Ratio d'aspect 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Ratio d'aspect 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Ratio d'aspect 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Ratio d'aspect 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

Essayez-le vous-même

Visibilité

Utilisation .visible ou .invisible Les classes peuvent contrôler la visibilité des éléments :

Remarque :Ces classes ne changent pas la valeur de display CSS. Elles ajoutent uniquement visibility:visible ou visibility:hidden.

Exemple

<div class="visible">Je suis visible.</div>
<div class="invisible">Je suis invisible.</div>

Essayez-le vous-même

Icône de fermeture

Utilisation .btn-close Les classes peuvent définir le style de l'icône de fermeture. Habituellement utilisé dans les boîtes de dialogue et les fenêtres modales.

Exemple

<button type="button" class="btn-close"></button>

Essayez-le vous-même

Lecteur d'écran

Utilisation .visually-hidden Les classes peuvent cacher les éléments sur tous les appareils, sauf pour les lecteurs d'écran :

Exemple

<span class="visually-hidden">Je serai caché sur tous les écrans sauf pour les lecteurs d'écran.</span>

Essayez-le vous-même

Couleurs

Comme mentionné dans le chapitre "Couleurs", voici la liste de toutes les classes de couleurs de texte et de fond :

Les classes pour les couleurs du texte sont :

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（par défaut couleur du body / généralement noire)
  • .text-light

Exemple

Essayez-le vous-même

Les classes de texte contextuelles peuvent également être utilisées pour les liens :

Exemple

Essayez-le vous-même

Vous pouvez également utiliser .text-black-50 ou .text-white-50 pour ajouter 50% d'opacité aux textes noirs ou blancs :

Exemple

Essayez-le vous-même

Couleur de fond

Les classes pour les couleurs de fond sont :

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Veuillez noter que la couleur de fond ne configure pas la couleur du texte, par conséquent, dans certains cas, vous devez les utiliser avec .text-* Les classes peuvent être utilisées ensemble.

Exemple

Essayez-le vous-même