Utilitaires Bootstrap4

Bootstrap4 fournit quelques utilitaires qui nous permettent d'obtenir les effets souhaités sans écrire de code CSS.

---

Bordures

Utilisez la classeborderpour ajouter ou supprimer des bordures :

---

Couleur de bordure

Bootstrap4 fournit quelques classes pour définir la couleur de bordure :

---

Rayon de bordure

Utilisezroundedla classe peut ajouter des bordures arrondies :

---

Float

.float-rightla classe est utilisée pour faire flotter l'élément à droite,.float-leftdéfinit l'élément pour flotter à gauche,.clearfixla classe est utilisée pour effacer les flottants :

---

Flottants responsives

Nous pouvons définir des flottants (.float-*-left|right- * peut être sm, md, lg ou xl) la direction dépend de la taille de l'écran :

---

Alignement centré

Utilisez.mx-autoclass pour définir l'alignement centré :

---

Largeur

Utilisez les classes w-* sur les éléments (.w-25, .w-50, .w-75, .w-100, .mw-100) pour définir la largeur :

---

Height

Utilisez les classes h-* sur les éléments (.h-25, .h-50, .h-75, .h-100, .mh-100) pour définir la hauteur :

---

Espacement

La syntaxe d'espacement est la suivante :

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

Les breakpoints correspondent aux largeurs d'écran : xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px).

propertyreprésente la propriété, notamment :

• m- utilisé pour définirmargin
• p- utilisé pour définirpadding

sidesdésigne principalement la direction :

• t- utilisé pour définirmargin-topoupadding-top
• b- utilisé pour définirmargin-bottomoupadding-bottom
• l- utilisé pour définirmargin-leftoupadding-left
• r- utilisé pour définirmargin-rightoupadding-right
• x- utilisé pour définir*-leftet*-right
• y- utilisé pour définir*-topet*-bottom
• blank - utilisé pour définir l'élément dans les quatre directionsmarginoupadding

sizefait référence à la taille de l'espacement :

• 0- définirmarginoupaddingest0
• 1- définirmarginoupaddingest$spacer * .25
• 2- définirmarginoupaddingest$spacer * .5
• 3- définirmarginoupaddingest$spacer
• 4- définirmarginoupaddingest$spacer * 1.5
• 5- définirmarginoupaddingest$spacer * 3
• auto- définirmarginà auto

marginmarginVous pouvez définir des nombres négatifs en ajoutant une lettre avant le nombre."n" :

• n1- Définir la marge à -.25rem (-4px si font-size est 16px)
• n2- Définir la marge à -.5rem (-8px si font-size est 16px)
• n3- Définir la marge à -1rem (-16px si font-size est 16px)
• n4- Définir la marge à -1.5rem (-24px si font-size est 16px)
• n5- Définir la marge à -3rem (-48px si font-size est 16px)

Voir les paramètres du code source pour quelques 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 sur tous les côtés	Essayez-le
.mt-# / mt-*-#	marge en haut	Essayez-le
.mb-# / mb-*-#	marge en bas	Essayez-le
.ml-# / ml-*-#	marge à gauche	Essayez-le
.mr-# / mr-*-#	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
.pl-# / pl-*-#	padding à gauche	Essayez-le
.pr-# / pr-*-#	padding à droite	Essayez-le
.py-# / py-*-#	padding en haut et en bas	Essayez-le
.px-# / px-*-#	padding à gauche et à droite	Essayez-le

Autres extensions