Bootstrap4 Cartes
Le composant Card de Bootstrap 4 est un conteneur de contenu flexible et puissant qui peut être utilisé pour afficher divers types de contenu, tels que du texte, des images, des listes, etc.
Le composant Card est un élément d'interface utilisateur très courant dans Bootstrap 4, généralement utilisé pour afficher des informations, des articles de blog, des produits ou des publications sur les réseaux sociaux, etc.
Structure de base
Le composant Card est composé de plusieurs éléments imbriqués, comprenant principalement les parties suivantes :
.card: Le conteneur le plus externe de la carte..card-body: Un conteneur qui contient le contenu de la carte, généralement utilisé pour placer du texte, des titres ou d'autres éléments..card-title: Le titre de la carte..card-text: Le contenu textuel de la carte..card-img-topou.card-img-bottom: Utilisé pour afficher une image, placée en haut ou en bas de la carte.
Descriptions des classes de style :
| Nom de classe | Description | Exemple d'utilisation |
|---|---|---|
.card | La classe de conteneur de carte, utilisée pour créer le cadre de la carte. | <div class="card">...</div> |
.card-body | Un conteneur pour le contenu de la carte, utilisé pour envelopper la partie principale du contenu de la carte. | <div class="card-body">...</div> |
.card-title | La classe pour le titre de la carte, utilisée pour définir le titre de la carte. | <h5 class="card-title">Card Title</h5> |
.card-text | La classe pour le texte du corps de la carte, utilisée pour ajouter du texte à la carte. | <p class="card-text">Some quick example text...</p> |
.card-img-top | La classe d'image pour le haut de la carte, généralement utilisée pour afficher une image en haut de la carte. | <img src="image.jpg.html" class="card-img-top"> |
.card-img-bottom | La classe d'image pour le bas de la carte, généralement utilisée pour afficher une image en bas de la carte. | <img src="image.jpg.html" class="card-img-bottom"> |
.card-header | L'en-tête de la carte, utilisé pour placer des titres, des libellés, etc. | <div class="card-header">Card Header</div> |
.card-footer | Le pied de page de la carte, généralement utilisé pour placer des informations sur l'auteur, la date ou les droits d'auteur, etc. | <div class="card-footer">Card Footer</div> |
.card-link | Utilisé pour créer des liens à l'intérieur de la carte, généralement utilisé avec d'autres contenus de carte. | <a href="../index.html" class="card-link">Card link</a> |
.card-deck | Utilisé pour disposer les cartes horizontalement, en répartissant automatiquement un espacement égal entre les cartes. | <div class="card-deck">...</div> |
.card-columns | Utilisé pour créer une mise en page de cartes à plusieurs colonnes, adaptée aux mises en page de cartes de style magazine. | <div class="card-columns">...</div> |
.no-gutters | Supprime les gouttières de colonnes du système de grille, utilisé pour supprimer l'espacement par défaut entre les cartes. | <div class="row no-gutters">...</div> |
.card-group | Regroupe les cartes ensemble, et elles s'ajustent automatiquement à la même hauteur. | <div class="card-group">...</div> |
.card-img-overlay | Superpose une couche de contenu sur l'image de la carte, généralement utilisée pour afficher du texte ou d'autres éléments. | <div class="card-img-overlay">Overlay content</div> |
.card-subtitle | Sous-titre de carte, utilisé pour afficher des informations supplémentaires sous le titre. | <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> |
Carte simple
Nous pouvons utiliser les classes.cardet.card-bodyde Bootstrap4 pour créer une carte simple, voici un exemple :
Les cartes Bootstrap4 sont similaires aux panneaux, aux vignettes d'images et aux wells de Bootstrap 3.
En-tête et pied de page
.card-headerla classe est utilisée pour créer le style d'en-tête de carte,.card-footerla classe est utilisée pour créer le style de pied de carte :
Exemple
Essayez-le vous-même »
Cartes colorées
Bootstrap 4 fournit plusieurs classes de couleur d'arrière-plan de carte :.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darket.bg-light。
Exemple
Essayez-le vous-même »
Titre, texte et liens
Sur l'élément header, nous pouvons utiliser la classe.card-titlepour définir le titre de la carte.La classe .card-textest utilisée pour définir le contenu du corps de la carte..card-linkLa classe est utilisée pour définir la couleur des liens.
Exemple
Essayez-le vous-même »
Cartes avec images
Nous pouvons <img>ajoutez.card-img-top(image au-dessus du texte) ou.card-img-bottom(image sous le texte) pour créer une carte avec image :
Exemple
Essayez-le vous-même »
Si vous souhaitez définir l'image comme arrière-plan, vous pouvez utiliser la classe.card-img-overlay:
Exemple
Essayez-le vous-même »
Cartes horizontales
En combinant les grilles et les classes utilitaires, vous pouvez disposer les cartes horizontalement d'une manière qui s'adapte aux appareils mobiles.
Dans l'exemple suivant, nous utilisons.no-gutterspour supprimer l'espacement de la grille, et nous utilisons la classe.col-md-*au niveau du point de rupturemdd'écran pour disposer les cartes dans une mise en page horizontale.
Exemple
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Titre de la carte</h5>
<p class="card-text">Il s'agit d'une carte plus large avec un texte d'accompagnement en dessous, comme une introduction naturelle à un contenu supplémentaire. Ce contenu est un peu plus long.</p>
<p class="card-text"><small class="text-muted">Dernière mise à jour il y a 3 mins</small></p>
</div>
</div>
</div>
</div>
Essayez-le vous-même »
