Les cartes COMPOSANTS D’INTERFACE:Cartes

1. L’objectif CARTES:Insérer

Les cartes, cards en anglais, permettent d’afficher des informations produit avec, par exemple, une image d’illustration et du texte d’information. Vous avez la possibilité de structurer le texte avec des en-têtes et des pieds de page.

Le dossier à télécharger pour ces exemples est nommé 08-Interface-05.

2. Une carte simple CARTES:Simples

Pour ce premier exemple, nous allons afficher une carte simple avec une illustration et un texte d’information.

Voici le code utilisé :

<div class="card" style="width: 300px;"> 
   <img class="card-img-top" src="dorsoduro-01.jpg" alt="Santa Maria della Salute"> 
   <div class="card-body"> 
        <h5 class="card-title">Venise</h5> 
        <h6 class="card-subtitle">Le Dorsoduro</h6> 
        <p class="card-text">La basilique Santa Maria<br> della Salute</p> 
   </div> 
</div> 

Voici l’affichage obtenu :

La carte est dans le conteneur <div class="card">. La classe .card permet le bon affichage de l’ensemble. Nous avons ici un style en ligne qui détermine la largeur de la carte...