Bootstrap - Cartes : Un Guide Pour Débutants

Salut à toi, futur-e développeur-e de sites web ! Aujourd'hui, nous allons plonger dans le merveilleux monde des cartes Bootstrap. En tant que ton professeur de informatique du coin, je suis excité-e de t'accompagner dans cette aventure. Imagineons que nous construisons ensemble un album photo numérique - c'est essentiellement ce que nous allons faire avec les cartes Bootstrap !

Qu'est-ce qu'une Carte Bootstrap ?

Avant de nous lancer dans le code, comprenons ce qu'est une Carte Bootstrap. Pense à elle comme un conteneur flexible, comme une boîte, où tu peux mettre différents types de contenu - du texte, des images, des liens, et plus encore. C'est comme une version numérique de ces cartes de collection que tu peux avoir collectionnées étant enfant, mais bien plus cool et polyvalente !

Structure de Base de la Carte

Commençons par la structure de base de la carte :

<div class="card">
<div class="card-body">
<h5 class="card-title">Bonjour, je suis une Carte !</h5>
<p class="card-text">Je peux contenir toutes sortes d'informations intéressantes.</p>
</div>
</div>

Ce code crée une carte simple avec un titre et du texte. La classe card crée le conteneur, et card-body enveloppe le contenu à l'intérieur.

Types de Contenu

Maintenant, explorons les différents types de contenu que nous pouvons mettre dans nos cartes :

Titres, Texte et Liens

<div class="card">
<div class="card-body">
<h5 class="card-title">Titre de la Carte</h5>
<h6 class="card-subtitle mb-2 text-muted">Sous-titre de la Carte</h6>
<p class="card-text">Un exemple de texte rapide pour construire sur le titre de la carte et constituer l'essentiel du contenu de la carte.</p>
<a href="#" class="card-link">Lien de la carte</a>
<a href="#" class="card-link">Un autre lien</a>
</div>
</div>

Cet exemple montre comment nous pouvons ajouter un sous-titre, plus de texte, et des liens à notre carte. C'est comme ajouter différentes sections à notre page d'album photo numérique !

Images

Ajoutons un peu d'attrait visuel avec des images :

<div class="card">
<img src="chemin/vers/ton/image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Regarde cette belle image !</p>
</div>
</div>

La classe card-img-top place l'image en haut de la carte. C'est comme coller une photo en haut de ta page d'album photo !

Groupes de Listes

Nous pouvons même ajouter des listes à nos cartes :

<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">Un élément</li>
<li class="list-group-item">Un second élément</li>
<li class="list-group-item">Un troisième élément</li>
</ul>
</div>

Cela crée une carte avec une liste à l'intérieur. Parfait pour des listes de tâches ou des puces !

tout-en-un

Maintenant, combinons tout ce que nous avons appris en une carte "tout-en-un" :

<div class="card" style="width: 18rem;">
<img src="chemin/vers/ton/image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Titre de la Carte</h5>
<p class="card-text">Un exemple de texte rapide pour construire sur le titre de la carte et constituer l'essentiel du contenu de la carte.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Un élément</li>
<li class="list-group-item">Un second élément</li>
<li class="list-group-item">Un troisième élément</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Lien de la carte</a>
<a href="#" class="card-link">Un autre lien</a>
</div>
</div>

Cette carte a tout - une image, un titre, du texte, une liste, et des liens. C'est comme la multifonction de la carte !

En-tête et Pied de Page

Nous pouvons ajouter des en-têtes et des pieds de page à nos cartes pour une structure supplémentaire :

<div class="card">
<div class="card-header">
En vedette
</div>
<div class="card-body">
<h5 class="card-title">Traitement spécial du titre</h5>
<p class="card-text">Avec un texte de soutien ci-dessous en tant que lead-in naturel vers un contenu supplémentaire.</p>
<a href="#" class="btn btn-primary">Aller quelque part</a>
</div>
<div class="card-footer text-muted">
Il y a 2 jours
</div>
</div>

L'en-tête et le pied de page donnent à notre carte un aspect fini et poli.

Tailles

Nous pouvons contrôler la taille de nos cartes en utilisant des classes de grille ou du CSS personnalisé :

<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Titre de la Carte</h5>
<p class="card-text">Cette carte occupe 75% de la largeur de son conteneur.</p>
</div>
</div>

Cette carte occupera 75% de la largeur de son conteneur.

Utilisation du Balisage de Grille

Nous pouvons utiliser le système de grille Bootstrap pour organiser nos cartes :

<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Traitement spécial du titre</h5>
<p class="card-text">Avec un texte de soutien ci-dessous en tant que lead-in naturel vers un contenu supplémentaire.</p>
<a href="#" class="btn btn-primary">Aller quelque part</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Traitement spécial du titre</h5>
<p class="card-text">Avec un texte de soutien ci-dessous en tant que lead-in naturel vers un contenu supplémentaire.</p>
<a href="#" class="btn btn-primary">Aller quelque part</a>
</div>
</div>
</div>
</div>

Cela crée deux cartes côte à côte sur les écrans plus grands, et empilées sur les écrans plus petits.

Navigation

Nous pouvons même transformer nos cartes en éléments de navigation :

<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Actif</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Désactivé</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Traitement spécial du titre</h5>
<p class="card-text">Avec un texte de soutien ci-dessous en tant que lead-in naturel vers un contenu supplémentaire.</p>
<a href="#" class="btn btn-primary">Aller quelque part</a>
</div>
</div>

Cela crée une carte avec des onglets de navigation en haut.

Styles de Carte

Bootstrap propose divers styles pour les cartes :

Arrière-plan et Couleur

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">En-tête</div>
<div class="card-body">
<h5 class="card-title">Titre de la Carte Primaire</h5>
<p class="card-text">Un exemple de texte rapide pour construire sur le titre de la carte et constituer l'essentiel du contenu de la carte.</p>
</div>
</div>

Cela crée une carte bleue avec du texte blanc. Tu peux remplacer bg-primary par d'autres classes de couleur comme bg-success, bg-warning, etc.

Conclusion

Et voilà, les amis ! Nous avons fait le voyage à travers le pays des Cartes Bootstrap, de la structure de base aux mises en page avancées. Souviens-toi, la pratique rend parfait. Essaie de combiner différents éléments et styles pour créer tes cartes uniques. Qui sait ? Tu pourrais juste créer la prochaine grande chose dans le design web !

Voici un tableau récapitulatif des principales classes de Carte Bootstrap que nous avons couvertes :

Classe	Description
.card	Crée le conteneur de base de la carte
.card-body	Enveloppe le contenu de la carte
.card-title	Style le titre de la carte
.card-text	Style le texte de la carte
.card-link	Style les liens à l'intérieur de la carte
.card-img-top	Place une image en haut de la carte
.card-header	Crée un en-tête de carte
.card-footer	Crée un pied de page de carte
.bg-*	Change la couleur d'arrière-plan de la carte
.text-*	Change la couleur du texte de la carte

Maintenant, va et crée des mises en page de cartes incroyables ! Souviens-toi, dans le développement web, comme dans la vie, il s'agit de penser en dehors de la boîte - ou dans ce cas, à l'intérieur de la carte ! Bon codage !

Credits: Image by storyset