Bootstrap - Stacks : Guide pour Débutants

Salut à toi, futur(e) développeur(euse) web ! Aujourd'hui, nous allons plonger dans le monde merveilleux des Bootstrap Stacks. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - je serai ton guide amical sur ce voyage passionnant. À la fin de ce tutoriel, tu seras capable de superposer des éléments comme un pro !

Qu'est-ce que les Bootstrap Stacks ?

Avant de commencer, parlons de ce que sont les stacks dans Bootstrap. Imagine que tu construis une tour avec des briques Lego. Tu peux les superposer verticalement (l'une sur l'autre) ou horizontalement (côte à côte). Les stacks Bootstrap fonctionnent de manière similaire, mais au lieu de briques Lego, nous organisons des éléments HTML sur une page web.

Maintenant, explorons les deux principaux types de stacks dans Bootstrap :

Stack Verticale

Une stack verticale est comme une pile de crêpes - chaque élément repose sur celui qui est en dessous. Dans Bootstrap, nous créons des stacks verticales en utilisant la classe .vstack.

Stack Verticale de Base

Commençons par un exemple simple :

<div class="vstack gap-3">
<div class="p-2">Premier élément</div>
<div class="p-2">Deuxième élément</div>
<div class="p-2">Troisième élément</div>
</div>

Dans ce code :

• Nous créons un conteneur <div> avec la classe vstack.
• gap-3 ajoute un peu d'espace entre nos éléments empilés.
• Chaque élément est un <div> avec la classe p-2 pour le padding.

Lorsque tu exécuteras ce code, tu verras trois boîtes empilées verticalement, chacune contenant du texte. C'est aussi simple que ça !

Stack Verticale avec Contenu Différent

Reprenons avec un exemple un peu plus fun :

<div class="vstack gap-3">
<button class="btn btn-secondary">Clique-moi !</button>
<div class="bg-light border">Je suis une boîte</div>
<div class="bg-light border">
<h3>Je suis un titre</h3>
<p>Et je suis du texte</p>
</div>
</div>

Ici, nous avons mélangé différents types de contenu :

• Un bouton (en utilisant les classes de bouton Bootstrap)
• Un simple <div> avec un arrière-plan clair et une bordure
• Un <div> plus complexe avec un titre et un paragraphe

Cela montre à quel point les stacks verticales peuvent être polyvalentes. Vous n'êtes pas limité(e) à des boîtes de texte simples !

Stack Horizontale

Passons maintenant aux stacks horizontales. Si les stacks verticales sont comme des crêpes, les stacks horizontales sont comme une ligne de dés - les éléments sont arrangés côte à côte. Nous utilisons la classe .hstack pour cela.

Stack Horizontale de Base

Voici un exemple simple :

<div class="hstack gap-3">
<div class="p-2">Premier</div>
<div class="p-2">Deuxième</div>
<div class="p-2">Troisième</div>
</div>

Ce code est très similaire à notre stack verticale, mais nous utilisons hstack au lieu de vstack. Le résultat ? Trois boîtes arrangées horizontalement !

Stack Horizontale avec Alignement

Faisons les choses plus intéressantes :

<div class="hstack gap-3">
<div class="bg-light border">Premier élément</div>
<div class="bg-light border ms-auto">Deuxième élément</div>
<div class="bg-light border">Troisième élément</div>
</div>

Dans cet exemple :

• Nous avons ajouté des arrière-plans et des bordures à nos éléments.
• La classe ms-auto sur le deuxième élément le pousse à droite, créant un espace entre le premier et le deuxième éléments.

Cela montre comment nous pouvons contrôler la position dans notre stack horizontale.

Combinaison de Stacks Verticales et Horizontales

Maintenant, c'est là que la magie opère. Nous pouvons combiner des stacks verticales et horizontales pour créer des mises en page complexes :

<div class="vstack gap-3">
<div class="hstack gap-3">
<input class="form-control me-auto" type="text" placeholder="Ajoute ton élément ici...">
<button type="button" class="btn btn-secondary">Soumettre</button>
<div class="vr"></div>
<button type="button" class="btn btn-outline-danger">Réinitialiser</button>
</div>
<div class="bg-light border">Élément personnalisé</div>
<div class="bg-light border">Élément personnalisé</div>
</div>

Cet exemple complexe montre :

• Une stack verticale en tant que conteneur principal
• Une stack horizontale à l'intérieur de la stack verticale (l'input et les boutons)
• Plus d'éléments dans la stack verticale en dessous

Le résultat est une structure en forme de formulaire avec des éléments supplémentaires en dessous - un patron commun dans la conception web !

Table des Méthodes et Classes

Voici un tableau pratique résumant les principales classes et méthodes que nous avons discutées :

Classe/Méthode	Description	Exemple
.vstack	Crée une stack verticale	<div class="vstack">
.hstack	Crée une stack horizontale	<div class="hstack">
gap-{taille}	Ajoute de l'espace entre les éléments de la stack	<div class="vstack gap-3">
ms-auto	Pousse un élément à droite dans une hstack	<div class="ms-auto">
.vr	Crée une règle verticale (separateur) dans une hstack	<div class="vr"></div>

Conclusion

Et voilà, amis ! Nous avons traversé le territoire des Bootstrap Stacks, des arrangements verticaux simples aux combinaisons complexes de stacks horizontales et verticales. Souviens-toi, la conception web est comme construire avec des briques Lego - commence avec ces pièces simples, et bientôt tu créeras des structures incroyables !

Pratique avec ces exemples, expérimente avec différentes combinaisons, et n'aie pas peur de faire des erreurs. C'est ainsi que nous apprenons et grandissons en tant que développeurs. Avant de t'en rendre compte, tu seras capable de superposer des éléments comme un pro !

Bonne programmation, et puisses tes stacks s'aligner parfaitement ! ?

Credits: Image by storyset