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

Salut à vous, aspirants développeurs web ! Aujourd'hui, nous allons plonger dans une des fonctionnalités les plus utiles de Bootstrap : les utilitaires d'affichage. En tant que votre enseignant bienveillant en informatique, je suis là pour vous guider à travers ce sujet avec des explications claires et un grand nombre d'exemples. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et c'est parti !

Qu'est-ce que l'Affichage Bootstrap ?

Avant de rentrer dans les détails, comprenons ce que nous entendons par "affichage" dans Bootstrap. En développement web, "affichage" se réfère à la façon dont un élément est montré sur une page web. Bootstrap fournit un ensemble de classes qui vous permettent de contrôler facilement le comportement d'affichage des éléments.

Pensez à cela comme si vous arrangez du mobilier dans une pièce. Parfois, vous souhaitez que piece soit visible, parfois que vous souhaitez la cacher, et parfois vous souhaitez qu'elle se comporte différemment en fonction de la taille de la pièce (ou, dans notre cas, de l'écran).

Notation

Bootstrap utilise une notation simple et intuitive pour ses classes d'affichage. Le format général est :

.d-{value}

Où {value} peut être l'un des suivants :

Valeur	Description
none	Cache l'élément
inline	Affiche l'élément comme un élément inline
inline-block	Affiche l'élément comme un conteneur de bloc inline
block	Affiche l'élément comme un élément de bloc
table	Affiche l'élément comme un tableau
table-cell	Affiche l'élément comme une cellule de tableau
table-row	Affiche l'élément comme une ligne de tableau
flex	Affiche l'élément comme un conteneur flex de niveau bloc
inline-flex	Affiche l'élément comme un conteneur flex de niveau inline

Voyons quelques exemples :

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

Dans cet exemple, nous utilisons d-inline pour faire apparaître deux éléments div en ligne. Ils apparaîtront côte à côte au lieu de s'empiler verticalement.

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

Ici, nous utilisons d-block pour faire apparaître des éléments span (qui sont normalement en ligne) comme des blocs. Ils s'empileront verticalement.

Variations Responsives

Maintenant, c'est où cela devient vraiment intéressant ! Bootstrap vous permet d'appliquer différentes propriétés d'affichage en fonction de la taille de l'écran. Le format pour cela est :

.d-{breakpoint}-{value}

Où {breakpoint} peut être :

Point de rupture	Description
sm	Petits appareils (≥576px)
md	Appareils de taille moyenne (≥768px)
lg	Appareils grands (≥992px)
xl	Appareils très grands (≥1200px)

Par exemple :

<div class="d-none d-md-block">
Ce texte sera caché sur les petits écrans mais visible sur les écrans de taille moyenne et plus grands.
</div>

Cette div sera cachée (d-none) par défaut, mais s'affichera comme un bloc (d-md-block) sur les écrans de taille moyenne et plus grands.

Cacher des Éléments

Cacher des éléments est une tâche courante dans le design responsive. Bootstrap rend cela facile avec la classe d-none :

<div class="d-none">Vous ne pouvez pas me voir !</div>

Cet élément sera complètement caché, indépendamment de la taille de l'écran.

Mais que faire si vous souhaitez cacher un élément uniquement sur certaines tailles d'écran ? C'est là que les variations responsives deviennent pratiques :

<div class="d-lg-none">Je suis visible sur tous les écrans plus petits que grands.</div>
<div class="d-none d-lg-block">Je n'apparaîs que sur les écrans grands et plus.</div>

Affichage en Impression

Bootstrap vous permet même de contrôler comment les éléments s'affichent lorsque la page est imprimée ! Utilisez les classes d-print-{value} pour cela :

<div class="d-none d-print-block">Je n'apparaîs que lorsque vous imprimez la page !</div>
<div class="d-print-none">Je disparais lorsque vous imprimez la page !</div>

Cela est particulièrement utile pour créer des versions d'impression de vos pages web sans avoir besoin de feuilles de style séparées.

Mettre Tout Ensemble

Créons un petit exemple qui utilise plusieurs utilitaires d'affichage :

<div class="container">
<h1 class="d-none d-md-block">Bienvenue Sur Mon Site Web</h1>
<h2 class="d-md-none">Bienvenue</h2>

<p class="d-inline-block bg-light p-2">Je suis toujours inline-block.</p>
<p class="d-none d-lg-inline-block bg-light p-2">Je s'affiche en ligne sur les écrans grands.</p>

<div class="d-flex justify-content-between">
<div>Élément Flex 1</div>
<div>Élément Flex 2</div>
<div class="d-none d-xl-block">Je n'apparaîs que sur les écrans très grands</div>
</div>

<footer class="d-print-none">This footer won't appear when printed.</footer>
</div>

Dans cet exemple :

• Nous avons un grand titre pour les écrans de taille moyenne et plus, et un plus petit pour les écrans plus petits.
• Nous avons deux paragraphes, l'un desquels n'apparaît que sur les écrans grands.
• Nous utilisons la flexbox, avec un troisième élément qui n'apparaît que sur les écrans très grands.
• Le pied de page ne sera pas imprimé.

Conclusion

Et voilà, les amis ! Nous avons exploré les détails des utilitaires d'affichage de Bootstrap. Souvenez-vous, la clé pour maîtriser ceux-ci est la pratique. Essayez de créer vos propres mises en page, expérimentez avec différentes tailles d'écran, et n'ayez pas peur de mélanger ces classes.

En tant que votre ancien enseignant en informatique, je ne peux insister suffisamment sur à quel point ces utilitaires sont précieux dans le développement web réel. Ils vous feront économiser des heures d'écriture de CSS personnalisé et de débogage de problèmes de mise en page.

Maintenant, allez-y et créez des mises en page responsives et adaptatives avec confiance ! Et souvenez-vous, dans le monde du développement web, comme dans la vie, parfois la meilleure outil est de savoir quand faire disparaître quelque chose. Bon codage !

Credits: Image by storyset