Comment les classes utilitaires d'espacement de Bootstrap ont-elles changé dans Bootstrap 4 et 5 ?

Comment utiliser les classes utilitaires d'espacement dans Bootstrap ?

Dans un article, vous avez rencontré les classes utilitaires d'espacement Bootstrap 4 telles que m-b- lg, que vous avez tenté d'implémenter dans une application React MeteorJS sans succès. Pour clarifier, explorons l'utilisation et les mises à jour des utilitaires d'espacement de Bootstrap.

Bootstrap 5 (bêta 2021)

Depuis que Bootstrap 5 a introduit la prise en charge RTL, les concepts gauche et droite ont été remplacés par start et end, entraînant des modifications dans les utilitaires d'espacement l- et r- :

• pl-* = ps-*
• pr-* = pe-*
• ml-* = ms-*
• mr-* = moi-*

Bootstrap 4 (Mise à jour 2020)

Les utilitaires d'espacement de Bootstrap 4 ont évolué depuis sa version alpha. La syntaxe mise à jour est :

• Marges : m{sides}-{size}
• Padding : p{sides}-{ size>

Par exemple :

• mb-2 = marge inférieure 2 unités d'espacement
• m-0 = pas de marges
• pt-3 = rembourrage des 3 unités d'espacement supérieures
• p-1 = rembourrage de tous les côtés 1 unité d'espacement

Bootstrap 4 fournit 6 tailles (0-5) qui représentent une partie du Unité d'espacement .5rem par défaut. De plus, vous pouvez désormais spécifier les utilitaires de l'axe X (gauche/droite) et de l'axe Y (haut/bas) :

• my-2 = marge supérieure et inférieure de 2 unités d'espacement
• mx-0 = pas de marges gauche et droite
• px-3 = remplissage gauche et droite de 3 unités d'espacement

De plus, ces utilitaires d'espacement sont réactifs, avec le plus petit point d'arrêt (xs ) implicite si aucun point d'arrêt n'est spécifié :

• mt-md-2 = marge supérieure des 2 unités d'espacement, sur md (et plus)
• py-sm-0 = pas de remplissage supérieur & en bas, sur sm (et plus)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!