Bootstrap 4 : cartes et médias
Dans ce chapitre nous allons voir le nouveau composant Card qui remplace les composants panel, well et thumbnails de Bootstrap 3, et aussi l’objet média. La page d’exemple est la même que celle vue au chapitre précédent.
Les cartes (Cards)
C’est un nouveau composant de la version 4 de Bootstrap destiné à remplacer panel, well et thumbnails de l’ancienne version. C’est un conteneur versatile qui permet beaucoup de choses comme nous allons à présent le voir.
A la base on utilise la classe card :
<div class="card"> Une carte </div>
On a juste une bordure avec coins arrondis. Que peut-on mettre dans une carte ? En fait beaucoup de choses comme nous allons le voir.
Les blocs
Si on veut quelque chose dans une carte on va utiliser un bloc pour éloigner le contenu des bordures sinon il va être collé comme on l’a vu dans l’exemple ci-dessus. Pour créer un bloc on utilise la classe card-body et pour mettre du texte la classe card-text :
<div class="card">
<div class="card-body">
<p class="card-text">Un peu de texte pour montrer comment il se comporte à l'intérieur d'une carte.</p>
</div>
</div>
On se rend compte que le bloc met en place un remplissage (padding) :
Que peut-on mettre dans un bloc ?
On peut y mettre tout ce qu’on veut :
<div class="card-body"> <img src="images/t12.jpg"><span><em> Une image</em></span> <p class="card-text">Un peu de texte justifié à gauche</p> <p class="card-text text-right">Un peu de texte justifié à droite</p> <p class="card-text text-center">Un peu de texte centré</p> <p><a href="#" class="card-link">Un lien</a></p> <button class="btn btn-primary">Un bouton à gauche</button> <button class="btn btn-primary float-right">Un bouton à droite</button> </div>
Remarquez la classe card-link pour les liens pour éviter le soulignement au survol. D’autre part la classe float-right permet d’envoyer un bouton à droite.
Titres
Quand on utilise une balise de titre dans un bloc il faut ajouter la classe card-title pour bien régler les marges :
<div class="card-body"> <h4 class="card-title">Un titre</h4> <p class="card-text">Un peu de texte.</p> </div>
Il y a même la classe card-subtitle pour insérer un sous-titre :
<div class="card">
<div class="card-body">
<h4 class="card-title">Un titre</h4>
<h6 class="card-subtitle text-muted mb-3">Un sous-titre</h6>
<p class="card-text">Un peu de texte.</p>
</div>
</div>
Entête et pied de carte
On a les classes card-header et card-footer pour créer une entête et un pied de carte :
<div class="card">
<div class="card-header">
Contenu d'entête
</div>
<div class="card-body">
<h4 class="card-title">Un titre</h4>
<p class="card-text">Un peu de texte.</p>
</div>
<div class="card-footer">
Informations de bas de page
</div>
</div>
De la même manière les classes card-img-top et card-img-bottom permettent de placer une image en haut ou en bas d’une carte :
<div class="card">
<img class="card-img-top" src="images/t1.jpg">
<div class="card-body">
<h4 class="card-title">Titre</h4>
<p class="card-text">Du texte</p>
<p class="card-text"><small class="text-muted">Des informations</small></p>
</div>
<img class="card-img-bottom" src="images/t2.jpg">
</div>
Un peu de couleurs
On est pas limité au fond blanc. Pour mettre le fond en couleur on a des classes utilitaires qu’on a déjà vues :
<div class="card bg-primary text-white mb-2">
<div class="card-body">
<p class="card-text">Une carte "primary"</p>
</div>
</div>
<div class="card bg-secondary text-white mb-2">
<div class="card-body">
<p class="card-text">Une carte "secondary"</p>
</div>
</div>
<div class="card bg-success text-white mb-2">
<div class="card-body">
<p class="card-text">Une carte "success"</p>
</div>
</div>
<div class="card bg-info text-white mb-2">
<div class="card-body">
<p class="card-text">Une carte "info"</p>
</div>
</div>
<div class="card bg-warning text-white mb-2">
<div class="card-body">
<p class="card-text">Une carte "warning"</p>
</div>
</div>
<div class="card bg-danger text-white">
<div class="card-body">
<p class="card-text">Une carte "danger"</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body">
<p class="card-text">Une carte "light"</p>
</div>
</div>
<div class="card bg-dark text-white">
<div class="card-body">
<p class="card-text">Une carte "dark"</p>
</div>
</div>
Si aucun de ces fonds ne vous convient vous pouvez créer vos propres règles pour le fond et la bordure :
<div class="card text-white" style="background-color: #234E84; border-color: #234E84;">
<div class="card-body">
<p class="card-text text-center">Une carte personnalisée</p>
</div>
</div>
Cartes groupées et panneaux
Si vous avez besoin de cartes groupées avec la même largeur et la même hauteur rien de plus simple ! Il suffit d’utiliser la classe card-group :
<div class="card-group">
<div class="card">
<img class="card-img-top" src="images/t1.jpg">
<div class="card-body">
<h4 class="card-title">Tigre 1</h4>
<p class="card-text">Une tigre dans une posture intéressante.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/t2.jpg">
<div class="card-body">
<h4 class="card-title">Tigre 2</h4>
<p class="card-text">Deux tigres se faisant des calins.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/t3.jpg">
<div class="card-body">
<h4 class="card-title">Tigre 3</h4>
<p class="card-text">Un tigre dont on se demande s'il va continuer à dormir ou se jeter précipitamment sur une proie.</p>
</div>
</div>
</div>
Si vous avez plutôt besoin de cartes séparées utilisez la classe card-deck :
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="images/t1.jpg">
<div class="card-body">
<h4 class="card-title">Tigre 1</h4>
<p class="card-text">Une tigre dans une posture intéressante.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/t2.jpg">
<div class="card-body">
<h4 class="card-title">Tigre 2</h4>
<p class="card-text">Deux tigres se faisant des calins.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/t3.jpg">
<div class="card-body">
<h4 class="card-title">Tigre 3</h4>
<p class="card-text">Un tigre dont on se demande s'il va continuer à dormir ou se jeter précipitamment sur une proie.</p>
</div>
</div>
</div>
Maintenant la fonctionnalité qui me plait le plus : on laisse les cartes s’organiser comme elles le veulent selon la place disponible avec la classe card-columns :
<div class="card-columns">
<div class="card text-white bg-success card-body">
<p class="card-text">
Advenit post multos Scudilo Scutariorum tribunus velamento subagrestis.
</p>
</div>
<div class="card text-white bg-primary card-body">
<p class="card-text">
Advenit post multos Scudilo Scutariorum.
</p>
</div>
<div class="card text-white bg-danger card-body">
<p class="card-text">
Advenit post multos Scudilo Scutariorum tribunus velamento subagrestis ingenii persuasionis opifex callidus.
</p>
</div>
<div class="card text-white bg-warning card-body">
<p class="card-text">
Advenit post multos.
</p>
</div>
<div class="card text-white bg-primary card-body">
<p class="card-text">
Advenit post multos Scudilo Scutariorum tribunus velamento subagrestis ingenii persuasionis opifex callidus.
</p>
</div>
<div class="card text-white bg-warning card-body">
<p class="card-text">
Advenit post multos Scudilo Scutariorum tribunus.
</p>
</div>
<div class="card text-white bg-info card-body">
<p class="card-text">
Advenit post multos Scudilo Scutariorum tribunus velamento subagrestis ingenii persuasionis opifex callidus.
</p>
</div>
<div class="card text-white bg-success card-body">
<p class="card-text">
Advenit post multos Scudilo Scutariorum tribunus velamento subagrestis ingenii persuasionis opifex callidus.
</p>
</div>
</div>
C’est ce que j’ai utilisé pour la page d’exemple avec ce code :
<div class="card-columns d-none d-md-block">
<div class="card">
<div class="card-header">
Les sous-espèces des tigres
</div>
<div class="list-group">
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Tigre de Sibérie
<span class="badge badge-secondary badge-pill">120</span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Tigre de Chine méridionale
<span class="badge badge-secondary badge-pill">540</span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Tigre de Bali
<span class="badge badge-secondary badge-pill">230</span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Tigre de d'Indochine
<span class="badge badge-secondary badge-pill">240</span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Tigre de Malaisie
<span class="badge badge-secondary badge-pill">1200</span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Tigre de Java
<span class="badge badge-secondary badge-pill">710</span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Tigre de Sumatra
<span class="badge badge-secondary badge-pill">20</span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Tigre du Bengale
<span class="badge badge-secondary badge-pill">40</span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Tigre de la Caspienne
<span class="badge badge-secondary badge-pill">200</span>
</a>
</div>
</div>
<div class="card">
<img class="img-fluid rounded" src="images/tigre1.jpg" alt="Tigre">
</div>
<div class="card">
<img class="img-fluid rounded" src="images/tigre2.jpg" alt="Tigre">
</div>
<div class="card">
<img class="img-fluid rounded" src="images/tigre3.jpg" alt="Tigre">
</div>
<div class="">
<div class="card">
<img class="img-fluid rounded" src="images/tigre4.jpg" alt="Tigre">
</div>
<div class="card">
<img class="img-fluid rounded" src="images/tigre5.jpg" alt="Tigre">
</div>
<div class="card">
<img class="img-fluid rounded" src="images/tigre6.jpg" alt="Tigre">
</div>
<div class="card">
<img class="img-fluid rounded" src="images/tigre8.jpg" alt="Tigre">
</div>
<div class="card">
<img class="img-fluid rounded" src="images/tigre9.jpg" alt="Tigre">
</div>
</div>
Avec ce résultat :
L’objet media
Simple insertion
L’objet média permet d’insérer un média (audio, image, vidéo…) à gauche ou à droite d’un texte. C’est ce que j’ai prévu dans la page d’exemple avec une vidéo de tigre :
<div class="media">
<div class="d-flex mr-3">
<iframe class="media-object" width="420" height="320" src="http://www.youtube.com/embed/VmnIeLmjuHA" allowfullscreen></iframe>
</div>
<div class="media-body">
<h4>Un tigre domestique dans son canapé</h4>
<p>Admirez ce noble animal...</p>
</div>
</div>
Le positionnement
La classe media englobe l’ensemble. Ensuite on se contente d’utiliser flexbox et/ou les utilitaires d’espacement qu’on a déjà rencontrés.
Voici un premier exemple avec un média en haut à gauche :
<div class="media bg-warning p-3">
<img class="mr-3" src="images/t3.jpg">
<div class="media-body">
<h5 class="mt-0">Un beau tigre</h5>
<p>N'est-il pas majestueux ?</p>
</div>
</div>
Centrage vertical
Par défaut on a l’image collée en haut. Pour changer ce comportement il faut utiliser flexbox, par exemple pour centrer l’image verticalement :
<div class="media bg-warning p-3">
<img class="d-flex align-self-center mr-3 img-fluid" src="images/t3.jpg">
<div class="media-body">
<h5 class="mt-0">Un beau tigre</h5>
<p>N'est-il pas majestueux ?</p>
<p>Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés (Felidae) du genre Panthera. Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands carnivores du monde.</p>
</div>
</div>
Pour coller l’image en bas on utilise align-self-end :
<img class="d-flex align-self-end mr-3" src="images/t3.jpg">
Liste de médias
Une autre possibilité fort intéressante consiste à créer une liste de médias avec la classe media-list. Prenons par exemple le cas d’un forum, on peut imaginer ce type de scénario :
<ul class="list-unstyled col">
<li class="media">
<a class="d-flex mr-3" href="#"><img src="images/ico01.png"></a>
<div class="media-body">
<h4>Suggestion</h4>
<p>Je pense souhaitable d'interdire la chasse au tigre pour préserver l'espèce !</p>
<div class="media">
<a class="d-flex mr-3" href="#"><img src="images/ico02.png"></a>
<div class="media-body">
<h4>Animaux dangereux</h4>
<p>Tu délires complètement, ce sont des animaux trop dangereux pour les laisser vivre.</p>
<div class="media">
<a class="d-flex mr-3" href="#"><img src="images/ico01.png"></a>
<div class="media-body">
<h4>Quel délire !</h4>
<p>C'est toi qui délires ! Il faut préserver la bio-diversité. Les tigres ne sont pas vraiment dangereux, c'est l'homme qui l'est !</p>
</div>
</div>
</div>
</div>
<div class="media">
<a class="d-flex mr-3" href="#"><img src="images/ico02.png"></a>
<div class="media-body">
<h4>Quel courage !</h4>
<p>J'aimerais te voir face à un tigre toi !</p>
</div>
</div>
<div class="media">
<a class="d-flex mr-3" href="#"><img src="images/ico03.png"></a>
<div class="media-body">
<h4>Un peu de calme</h4>
<p>Je suis favorable à la préservation de l'espèce mais dans des sites protégés.</p>
<div class="media">
<a class="d-flex mr-3" href="#"><img src="images/ico04.png"></a>
<div class="media-body">
<h4>Tu as vu ta tête !</h4>
<p>Avec la tête que tu as tu ferais même peur à un tigre toi !</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Remarquez qu’on peut imbriquer des médias.
En résumé
- Les cartes permettent de créer des organisations très libres pour les pages.
- L’objet media permet de positionner facilement un média.
