Espacement

Classes utilitaires pour ajouter de l'espacement entre les éléments.

Cette page présente les fonctionnalités utilitaires de wet-boew, y compris certaines intégrations de Bootstrap 4.

Veuillez noter que certaines classes Bootstrap 4 rétroportées ont été ajustées pour suivre les points d'arrêt de vue de Bootstrap 3.4. Par exemple, la largeur minimale d'une vue de petite taille (sm) est de 768 px dans Bootstrap 3.4, contre 576 px dans Bootstrap 4.

Comment ça marche

Attribuez des valeurs de marge ou de remplissage adaptées à la réactivité à un élément ou à un sous-ensemble de ses côtés avec des classes abrégées. Inclut la prise en charge des propriétés individuelles, de toutes les propriétés et des propriétés verticales et horizontales.

Notation

Les utilitaires d'espacement qui s'appliquent à tous les points d'arrêt, de xs à lg, n'ont pas d'abréviation de point d'arrêt. Cela est dû au fait que ces classes sont appliquées à partir de min-width: 0 et plus, et ne sont donc pas liées par une requête média. Les points d'arrêt restants incluent cependant une abréviation de point d'arrêt.

Les classes sont nommées selon le format {propriété}{côtés}-{grosseur} pour xs et {propriété}{côtés}-{point d'arrêt}-{grosseur} pour sm, md et lg.

Où propriété est l'un des éléments suivants :

• m - pour les classes qui définissent la margin
• p - pour les classes qui définissent le padding

Où côtés est l'un des éléments suivants :

• t - pour les classes qui définissent margin-top ou padding-top
• b - pour les classes qui définissent margin-bottom ou padding-bottom
• l - pour les classes qui définissent margin-left ou padding-left
• r - pour les classes qui définissent margin-right ou padding-right
• x - pour les classes qui définissent à la fois *-left et *-right
• y - pour les classes qui définissent à la fois *-top et *-bottom
• blank - pour les classes qui définissent une margin ou padding sur les 4 côtés de l'élément

Où grosseur est l'une des valeurs suivantes :

• 0 - pour les classes qui éliminent la margin ou le padding en le définissant sur 0
• 1 - pour les classes qui définissent le margin ou le padding à 5px
• 2 - pour les classes qui définissent le margin ou le padding à 10px
• 3 - pour les classes qui définissent le margin ou le padding à 20px
• 4 - pour les classes qui définissez le margin ou le padding à 30px
• 5 - pour les classes qui définissent le margin ou le padding à 60px
• auto - pour les classes qui définissent la marge à auto

Quelques exemples fonctionnels

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

Exemple de code

<p class="bg-primary mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
<p class="bg-primary px-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
<p class="bg-primary mt-sm-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
<div class="d-flex">
	<div class="col-xs-6 mx-auto"><p class="bg-primary">Lorem ipsum dolor sit amet.</p></div>
</div>

Classes d'espacement additionnelles

mrgn-{position}-{grosseur}

Où position est l'une des suivantes :

• tp - pour les classes qui définissent margin-top
• lft - pour les classes qui définissent margin-left
• rght - pour les classes qui définissent margin-right
• bttm - pour les classes qui définissent margin-bottom

Où grosseur est l'une des suivantes :

• 0 - pour les classes qui définissent une marge de 0px
• sm - pour les classes qui définissent une marge de 5px
• md - pour les classes qui définissent une marge de 15px
• lg - pour les classes qui définissent une marge de 30px
• xl - pour les classes qui définissent une marge de 50px

Exemples pratiques

Aucune marge (en haut, en bas, à droite et à gauche)

Petite marge (en haut, en bas, à droite et à gauche)

Moyenne marge (en haut, en bas, à droite et à gauche)

Grande marge (en haut, en bas, à droite et à gauche)

Extra grande marge (en haut, en bas, à droite et à gauche)

Code sample

<p class="bg-primary mrgn-tp-0 mrgn-rght-0 mrgn-bttm-0 mrgn-lft-0">Aucune marge (en haut, en bas, à droite et à gauche)</p>
<p class="bg-primary mrgn-tp-sm mrgn-rght-sm mrgn-bttm-sm mrgn-lft-sm">Petite marge (en haut, en bas, à droite et à gauche)</p>
<p class="bg-primary mrgn-tp-md mrgn-rght-md mrgn-bttm-md mrgn-lft-md">Moyenne marge (en haut, en bas, à droite et à gauche)</p>
<p class="bg-primary mrgn-tp-lg mrgn-rght-lg mrgn-bttm-lg mrgn-lft-lg">Grande marge (en haut, en bas, à droite et à gauche)</p>
<p class="bg-primary mrgn-tp-xl mrgn-rght-xl mrgn-bttm-xl mrgn-lft-xl">Extra grande marge (en haut, en bas, à droite et à gauche)</p>

Héritage

Recommandation, ne les utilisez pas. Il s'agit de styles hérités de WET-BOEW 3 qui est toujours dans notre base de code.

margin-bottom-none

Retire la marge du bas.

Exemple pratique

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

Exemple de code

<p class="margin-bottom-none">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>

margin-bottom-small

Ajoute une marge en bas de .25em.

Exemple pratique

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

Exemple de code

<p class="margin-bottom-small">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>

margin-top-medium

Ajoute une marge en haut de .75em.

Exemple pratique

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

Exemple de code

<p class="margin-top-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>

margin-top-large

Ajoute une marge en haut de 1.5em.

Exemple pratique

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

Exemple de code

<p class="margin-top-large">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>