Les cartes COMPOSANTS D’INTERFACE:Cartes

1. L’objectifs 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 :

images/C08-024.png

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...

Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les listes d'éléments
Suivant
Les bulles d'aide