• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 30/03/2022

Structurez du contenu grâce au composant card

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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. 

Le composant card est composé d'une image au dessus d'un titre et du texte. Tout en bas du composant se trouve un bouton.
Le composant card

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.

Exemple de certificat de réussite
Exemple de certificat de réussite