2 Outils Simples d’Utilisation Proposés par Bootstrap pour Déplacer ou Ordonner un Elément sur une Page Web

Tout comme une reine a la liberté et la facilité de se déplacer sur un échiquier, Bootstrap aussi propose des outils vous permettant de déplacer un élément sur une page web comme bon vous semble.

Ces outils ont une manière particulière d’agir sur les éléments d’une page web, qui est différente de celles des classes flexbox utilisées pour l’alignement. Vous découvrirez dans cet article comment fonctionne ces outils et comment les utiliser.

Voici ce dont vous serez capable de faire quand vous finirez la lecture de ce tutoriel :

• Ordonner un élément d’un ensemble dans la position qui vous sied

• Définir les types d’écran sur lequel votre ordonnément doit être pris en compte
• Imprimer un mouvement à un élément sur la distance qui vous convient

• Et aussi choisir les types d’écran sur lesquels ce mouvement doit être imprimé

PS : Pour que vous puissiez bien remarquer les comportements définis dans les exemples, j’ajouterai une bordure et des marges internes aux éléments.

Pour une bonne compréhension de la suite du tutoriel, il faut que vous sachiez et comprenez au préalable le concept sur lequel ces outils fonctionnent. 

Concept de base de Bootstrap pour déplacer ou ordonner un élément sur une page web 

LA SUITE APRÈS CETTE PUBLICITÉ

Bootstrap met à votre disposition les outils offset et order pour mouvoir un élément sur une page. Alors que le premier permet d’imprimer un mouvement à un élément, le second lui permet d’ordonner l’élément.

Comme la grille de Bootstrap, ces deux outils fonctionnent sur un système de 12 colonnes.

L’outil order permet d’ordonner un élément sur une échelle de 0 à 12(0 étant la première position et 12 la dernière).

Et offset quant à lui, il permet de déplacer un élément horizontalement de la gauche vers la droite sur un échelon de 0 à 11.

Découvrez comment utiliser le premier outil offset pour déplacer un élément sur une page web :

En réalité que fait l’offset ? Il applique une marge externe gauche à l’élément qui lui fait appel. Cette marge est en fonction du degré choisi.

Comme dit dans le dernier paragraphe de la section précédente, il varie sur un échelon de 0 à 11, ainsi nous avons les classes suivantes pour nos besoins : offset-0, offset-1, offset-2, ……, offset-11.

Nous allons réaliser 2 exemples pour voir comment utiliser ces classes offset pour déplacer un élément sur une page web horizontalement en répondant à un besoin spécifique.

Exemple 1 :

Nous allons créer un élément qui au préalable sera au début d’une ligne, mais à l’aide de l’offset nous le déplacerons et nous le positionnerons à la fin de la ligne

<!-- Disposition par défaut -->
	<h5>Disposition par défaut</h5>
	<div class="d-flex">
		<p>Elément à déplacer</p>
	</div>

	<!-- Utilisation de l'offset -->
	<h5>Utilisation de l'offset</h5>
	<div class="d-flex border mb-5 p-2">
		<p class=" mb-0 border p-2 offset-11">Elément déplacé</p>

Exemple 2 :

Nous allons créer un élément et le centrer sur une ligne à l’aide de l’offset

<h5>Disposition par défaut</h5>
<div class="row">
    <div class="col-2">Elément à centrer</div>
</div>

<!-- Utilisation de l'offset -->
<h5>Utilisation de l'offset</h5>
<div class="row">
    <div class="col-2">Elément centré sur ligne</div>
</div>

Maintenant que vous savez déplacer un élément sur une page web, découvrez comment faire mieux, en ordonnant un élément dans la position que vous voulez peu importe les éléments à ses côtés.

Découvrez comment utiliser le second outil order pour mouvoir un élément sur une position souhaitée :

Comme l’offset, Bootstrap propose des classes : order-0, order-1, ……, order-12, pour disposer l’élément selon le rang qui vous sied.

La particularité de l’order, est qu’en plus de ces classes, les classes order-first et order-last sont aussi ajoutées. Order-first permet de placer l’élément en première position et order-last place l’élément en dernière position.

Réalisons deux exemples pour voir comment s’utilisent ces classes.

Exemple 3 :

Nous allons créer 4 éléments sur une ligne, ensuite nous allons ordonner le troisième élément au début et ordonner le second élément à la fin.

<!-- Disposition par défaut -->
	<h5>Disposition par défaut</h5>
	<div class="d-flex">
		<p>Premier Elément</p>
		<p>Second Elément</p>
		<p>Troisième Elément</p>
		<p>Quatrième Elément</p>
	</div>

	<!-- Utilisation de l'offset -->
	<h5>Utilisation de ORDER</h5>
	<div class="d-flex">
		<p>Premier Elément</p>
		<p class="order-last">Second Elément</p>
		<p class="order-first">Troisième Elément</p>
		<p >Quatrième Elément</p>
	</div>

LA SUITE APRÈS CETTE PUBLICITÉ

Exemple 4 :

Dans cet exemple, nous allons créer 5 éléments, et les réordonner en positionnant le dernier élément en première position, l’avant-dernier en seconde position ainsi de de suite jusqu’à positionner le premier élément en dernière position.

<h5>Disposition par défaut</h5>
<div class="d-flex">
    <p>Premier Elément</p>
    <p>Second Elément</p>
    <p>Troisième Elément</p>
    <p>Quatrième Elément</p>
    <p>Cinquième Elément</p>
</div>

<!-- Utilisation de l'offset -->
<h5>Utilisation de ORDER</h5>
<div class="d-flex">
    <p class="order-5">Premier Elément</p>
    <p class="order-4">Second Elément</p>
    <p class="order-3">Troisième Elément</p>
    <p class="order-2">Quatrième Elément</p>
    <p class="order-1">Cinquième Elément</p>
</div>

Déplacer ou ordonner votre élément sur le type d’écran que vous voulez :

Bootstrap a tout pensé à notre place, il a défini différents contextes pour ces outils pour que nous puissions réaliser toutes les folies que nous voulons.

Redécouvrons d’abord ces différents contextes :

• Pour les écrans supérieurs ou égaux à 576px, Bootstrap nous propose le suffixe -sm pour agir en fonction de ces types d’écran
• Pour les écrans supérieurs ou égaux à 768px, c’est le suffixe -md que nous propose Bootstrap
• Et pour les écrans supérieurs ou égaux à 992px, le suffixe proposé est -lg

• Et enfin, Bootstrap nous propose le suffixe -xl pour les écrans au-delà de 1200px

Du coup, vous pouvez déplacer ou ordonner les éléments en fonction de l’écran que vous voulez.

Classes offset pour les écrans > ou = 576px :

Offset-sm-0, Offset-sm-1, Offset-sm-3, ……, Offset-sm-11

Classes order pour les écrans > ou = 576px :

Order-sm-first, order-sm-last, order-sm-0, order-sm-1, …, order-sm-12

L’écriture des classes est pareille pour les autres types d’écran, seul le suffixe change.

Réalisons deux exemples pour vous montrer un petit aperçu des différentes possibilités qui s’offrent à vous.

PS : Pour les exemples qui vont suivre, quand vous accédez aux démos, redimensionner l’écran de votre navigateur pour voir les comportements définis.

Exemple 5 :

Nous allons créer un élément et sur les écrans inférieurs à 768 px le centrer au milieu d’une ligne et sur les écrans supérieurs à cette taille le placer à la fin de la ligne

<h5>Disposition par défaut</h5>
<div class="row">
    <div class="col-3">Elément à déplacer</div>
</div>

<!-- Utilisation des classes -->
<h5>Elément centré sur mobile et tablette, puis disposé à la fin les écrans larges</h5>
<div class="row">
    <div class="col-3 offset-5 offset-lg-9">Elément à déplacer</div>
</div>

Exemple 6 :

Nous allons créer 3 éléments, l’élément du milieu sera en première position sur les mobiles (écrans dont leurs tailles sont comprises entre 576px et 768px), gardera sa position sur les tablettes (écrans dont leurs tailles sont comprises entre 768px et 992px) et en dernière position sur les écrans larges (écran dont la taille est au-delà de 992px).

<!-- Disposition par défaut -->
	<h5>Disposition par défaut</h5>
	<div class="d-flex">
		<p>Premier Elément</p>
		<p>Second Elément</p>
		<p>Troisième Elément</p>
	</div>

	<!-- Utilisation des classes -->
	<h5>Disposition selon différents types d'écran</h5>
	<div class="d-flex">
		<p>Premier Elément</p>
		<p class="order-first order-md-2 order-lg-3">Second Elément</p>
		<p class="order-md-3 order-lg-2">Troisième Elément</p>
	</div>

Faites découvrir ce tutoriel à vos amis en le partageant sur les réseaux sociaux par le biais des boutons de partage présents en bas de l’article.