Découvrez le composant card
Les cards en anglais (“cartes” en français) sont un type d’élément d’interface utilisateur très populaire. Presque tous les frameworks CSS ont leur propre système de cards pour permettre aux développeurs de proposer un affichage structuré des informations de leur site.
Dans notre cas, nous allons les utiliser pour afficher nos projets à la suite de notre expertise.
Je ne fais que me répéter, mais commençons par aller voir la documentation Bootstrap 5 concernant les cartes. Rendez-vous dans “components” puis “card”.
En parcourant rapidement la page, nous pouvons voir qu’il existe plusieurs types de cartes sur Bootstrap 5. La diversité des affichages permet de répondre à une multitude de besoins et de cas d’usage spécifiques (galerie photo, résumé de produits e-commerce, etc). Et comme d’habitude, il est toujours possible de pousser les composants encore plus loin grâce aux classes utilitaires.
Dans notre cas, nous allons utiliser l’affichage le plus populaire, c'est-à-dire le premier exemple de la doc Bootstrap : image, titre, texte, bouton.
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Nous pouvons voir que le composant suit une architecture donnée :
Une
div
globale avec une classe du nom du composant (l’attribut style de l’exemple Bootstrap n’est pas à garder).À l’intérieur de cette
div
, nous trouvons uneimg
ainsi qu’une autrediv
avec la classecard-body
.Ce dernier
div.card-body
indique l’emplacement du corps de la carte, dans lequel on retrouve lecard-title
, lecard-text
et notre bouton.
À vous de jouer !
Votre mission pour ce chapitre est de créer 4 cartes dans la section “Projets perso et pro” :
Les 4 cartes devront tenir sur une ligne à partir des grands écrans, elles prendront 4 colonnes sur les écrans moyens, 6 colonnes sur les petits puis la totalité de la ligne sur les très petits écrans.
Les cartes seront composées d’une image, d’un
body
avec un titre, une description et un bouton “En savoir plus”.Pour les images, vous utiliserez un lien piscum.photo en suivant cette structure d’URL :
https://picsum.photos/300/150?random=1
(en remplaçant 1 par 2 pour le deuxième projet, etc.).
Une fois que vous avez effectué ces modifications, suivez-moi dans le screencast ci-dessous pour comparer votre travail avec le mien !
Et voilà, nous avons mis en place notre structure pour accueillir nos projets. L’avantage de cette structure, c’est qu’elle est évolutive et responsive.
Nous verrons dans la suite du cours à quoi va servir le bouton “En savoir plus”.
En résumé
Les cards nous permet de structurer le contenu d’un site.
Bootstrap propose plusieurs types de cards pour répondre aux besoins des développeurs.
Maintenant que vous savez intégrer différents types de contenu, vous êtes prêt à améliorer l'expérience utilisateur en ajoutant de l'interactivité au site ! Mais avant d’avancer à la prochaine partie, vérifiez vos acquis dans le quiz.