Bootstrap5 Utilitaires

Bootstrap 5 fournit de nombreuses classes utiles pour nous aider à obtenir rapidement des effets sans réécrire du code CSS.

---

Couleurs d'arrière-plan

Lorsque vous définissez la couleur d'arrière-plan de différents éléments, vous devez utiliser la classe.text-*pour définir la couleur de texte correspondante :

.bg-gradientLa classe peut définir un effet de dégradé de couleur d'arrière-plan :

---

Bordures

Nous pouvons utiliser les classes associées àborderpour afficher des bordures selon les besoins :

.border-1à.border-5La classe est utilisée pour définir la largeur de la ligne de bordure :

Ce qui suit définit différentes couleurs pour la bordure :

roundedLes classes associées sont utilisées pour définir des coins arrondis :

rounded-0àrounded-3La classe est utilisée pour définir la taille des coins arrondis :

---

Flottement et Clearfix

Les éléments flottent à droite à l'aide de la classe .float-end, à gauche à l'aide de la classe .float-start, et la classe .clearfix est utilisée pour effacer les flottements :

Vous pouvez également définir l'effet de flottement en fonction de la taille de l'écran (.float-*-left|right - * signifie sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) ou xxl (>=1400px)) :

---

Alignement centré

Utilisez.mx-autocomme classe pour définir l'élément sur un alignement centré (ajouter margin-left et margin-right en auto) :

---

Largeur et hauteur

La largeur utilisew-* (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100)comme classe pour la définir.

La hauteur utiliseh-* (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100)comme classe pour la définir.

---

Espacement

La syntaxe de définition de l'espacement est la suivante :

{property}{sides}-{size}  // 适用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) ou  xxl (>=1400px)

Les points de rupture correspondent à la largeur d'écran : xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) ou xxl (>=1400px).

propertyReprésente la propriété, notamment :

• mUtilisé pour définirmargin
• pUtilisé pour définirpadding

sidesDésigne principalement la direction :

• tUtilisé pour définirmargin-topoupadding-top
• bUtilisé pour définirmargin-bottomoupadding-bottom
• sUtilisé pour définirmargin-leftoupadding-left
• eUtilisé pour définirmargin-rightoupadding-right
• xUtilisé pour définir*-leftet*-right
• yUtilisé pour définir*-topet*-bottom
• blank - Utilisé pour définir les quatre directions de l'élémentmarginoupadding

sizeDésigne la taille de la marge :

• 0- Définimarginoupaddingest0
• 1- Définimarginoupaddingest$spacer * .25
• 2- Définimarginoupaddingest$spacer * .5
• 3- Définimarginoupaddingest$spacer
• 4- Définimarginoupaddingest$spacer * 1.5
• 5- Définimarginoupaddingest$spacer * 3
• auto- Définimarginà auto

Regardez les paramètres du code source pour certaines marges :

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Plus d’exemples

.m-# / m-*-#	Définir les marges pour tous les côtés	Essayez-le
.mt-# / mt-*-#	marge en haut	Essayez-le
.mb-# / mb-*-#	marge en bas	Essayez-le
.ms-# / ms-*-#	marge à gauche	Essayez-le
.me-# / me-*-#	marge à droite	Essayez-le
.mx-# / mx-*-#	marge à gauche et à droite	Essayez-le
.my-# / my-*-#	marge en haut et en bas	Essayez-le
.p-# / p-*-#	Utiliser les côtés pour définir le padding	Essayez-le
.pt-# / pt-*-#	padding en haut	Essayez-le
.pb-# / pb-*-#	padding en bas	Essayez-le
.ps-# / ps-*-#	padding à gauche	Essayez-le
.pe-# / pe-*-#	padding à droite	Essayez-le
.py-# / py-*-#	padding en haut et en bas	Essayez-le
.px-# / px-*-#	padding à gauche et à droite	Essayez-le

Autres extensions