Bootstrap - Redimensionnement : Un Guide Complet Pour Les Débutants

Bonjour à tous, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde passionnant du redimensionnement Bootstrap. En tant que votre enseignant de quartier en informatique, je suis là pour vous guider dans ce voyage, étape par étape. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - nous allons commencer par les bases et progresser petit à petit. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et c'est parti !

Qu'est-ce que le Redimensionnement Bootstrap ?

Avant de rentrer dans les détails, comprenons ce qu'est le redimensionnement Bootstrap. Imaginez que vous êtes en train de décorer une pièce. Vous voulez que certains meubles s'adaptent parfaitement, d'autres occupent la moitié de l'espace, et d'autres encore s'ajustent en fonction de la taille de la pièce. C'est exactement ce que le redimensionnement Bootstrap nous aide à faire avec les éléments sur une page web !

Relatif au Parent

Commençons par redimensionner les éléments par rapport à leur parent. C'est comme décider combien d'espace une image devrait occuper sur un mur.

Classes de Largeur

Bootstrap propose des classes qui vous permettent de définir la largeur d'un élément en pourcentage de la largeur de son parent. Voici un tableau pratique de ces classes :

Classe	Description
w-25	Largeur 25%
w-50	Largeur 50%
w-75	Largeur 75%
w-100	Largeur 100%
w-auto	Largeur automatique

Voyons ces classes en action :

<div class="container">
<div class="w-25 p-3" style="background-color: #eee;">Largeur 25%</div>
<div class="w-50 p-3" style="background-color: #ddd;">Largeur 50%</div>
<div class="w-75 p-3" style="background-color: #ccc;">Largeur 75%</div>
<div class="w-100 p-3" style="background-color: #bbb;">Largeur 100%</div>
<div class="w-auto p-3" style="background-color: #aaa;">Largeur automatique</div>
</div>

Dans cet exemple, nous créons cinq éléments div, chacun avec une classe de largeur différente. La classe p-3 ajoute un peu de padding pour la visibilité. Vous verrez que chaque div occupe un pourcentage différent de la largeur de son conteneur parent.

Classes de Hauteur

De même, Bootstrap offre des classes pour définir les hauteurs :

Classe	Description
h-25	Hauteur 25%
h-50	Hauteur 50%
h-75	Hauteur 75%
h-100	Hauteur 100%
h-auto	Hauteur automatique

Voici comment vous pourriez utiliser ces classes :

<div style="height: 200px;">
<div class="h-25 d-inline-block" style="width: 120px; background-color: #eee;">Hauteur 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: #ddd;">Hauteur 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: #ccc;">Hauteur 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: #bbb;">Hauteur 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: #aaa;">Hauteur automatique</div>
</div>

Dans cet exemple, nous définissons une hauteur fixe pour le parent div et utilisons des classes de hauteur sur les éléments enfants. La classe d-inline-block rend ces div éléments inline.

Relatif à la Largeur de la Fenêtre

Maintenant, parlons du redimensionnement des éléments par rapport à la largeur de la fenêtre. C'est comme ajuster un écran de télévision pour s'adapter à différentes tailles de pièces.

Bootstrap utilise l'unité vw, qui signifie "largeur de la fenêtre". Voici quelques classes :

Classe	Description
vw-100	Largeur 100vw
min-vw-100	Min-largeur 100vw
max-vw-100	Max-largeur 100vw

Voyons un exemple :

<div class="vw-100" style="background-color: #eee;">Ce div fait 100vw de large.</div>

Ce div sera toujours aussi large que la fenêtre, même si vous redimensionnez la fenêtre du navigateur.

Relatif à la Hauteur de la Fenêtre

Similaire à la largeur de la fenêtre, nous pouvons également dimensionner les éléments par rapport à la hauteur de la fenêtre en utilisant l'unité vh.

Classe	Description
vh-100	Hauteur 100vh
min-vh-100	Min-hauteur 100vh
max-vh-100	Max-hauteur 100vh

Voici comment vous pourriez utiliser cela :

<div class="vh-100" style="background-color: #eee;">Ce div fait 100vh de haut.</div>

Ce div sera toujours aussi haut que la fenêtre, s'ajustant lorsque vous redimensionnez la fenêtre du navigateur.

Relatif à la Fenêtre

Enfin, regardons le redimensionnement relatif à la largeur et à la hauteur de la fenêtre.

Min-largeur 100%

<div class="min-vw-100" style="background-color: #eee;">100vw</div>

Ce div sera au moins aussi large que la fenêtre, mais peut s'étendre si le contenu nécessite plus d'espace.

Min-hauteur 100%

<div class="min-vh-100" style="background-color: #eee;">100vh</div>

De même, ce div sera au moins aussi haut que la fenêtre, mais peut s'étendre si nécessaire.

Mettre Tout Ensemble

Maintenant que nous avons couvert toutes ces options de redimensionnement, créons un petit exemple amusant qui les met en œuvre :

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="w-75 p-3 mb-2" style="background-color: #e9ecef;">
Je suis large à 75% par rapport à mon parent !
</div>
<div class="h-50 p-3" style="background-color: #ced4da;">
Je suis haut à 50% par rapport à mon parent !
</div>
</div>
<div class="col-md-6">
<div class="vw-100 p-3 mb-2" style="background-color: #adb5bd;">
Je suis aussi large que la fenêtre !
</div>
<div class="vh-50 p-3" style="background-color: #6c757d; color: white;">
Je suis la moitié de la hauteur de la fenêtre !
</div>
</div>
</div>
</div>

Dans cet exemple, nous utilisons une combinaison de largeur, hauteur et redimensionnement relatif à la fenêtre pour créer un layout diversifié et réactif. Essayez de redimensionner votre fenêtre de navigateur pour voir comment ces éléments s'adaptent !

Et voilà, les amis ! Vous avez appena fait vos premiers pas dans le monde du redimensionnement Bootstrap. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces classes dans vos propres projets. Avant de savoir, vous serez créer des layouts réactifs comme un pro !

Bonne programmation, et puissent vos sites web toujours s'ajuster parfaitement ! ?

Credits: Image by storyset