Créez des sites web responsives avec Bootstrap 5

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 une  img  ainsi qu’une autre  div  avec la classe  card-body. 

• Ce dernier div.card-body  indique l’emplacement du corps de la carte, dans lequel on retrouve le  card-title, le  card-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.