Cartes Bootstrap 5

Carte

Les cartes Bootstrap 5 sont des boîtes bordées, avec un certain espace intérieur autour du contenu. Elles incluent des options telles que l'en-tête, le pied de page, le contenu, les couleurs, etc.

Carte de base

Une carte de base est utilisée .card Créée par la classe .card-body Classe :

Exemple

<div class="card">
  <div class="card-body"> Carte de base </div>
</div>

Essayer par vous-même

En-tête et pied de page

.card-header Ajoutez un titre à la carte en utilisant la classe :.card-footer Ajoutez un pied de page à la carte en utilisant la classe :

Exemple

<div class="card">
  <div class="card-header"> En-tête de page </div>
  <div class="card-body"> Contenu </div>
  <div class="card-footer"> Pied de page </div>
</div>

Essayer par vous-même

Carte de contexte

Pour ajouter une couleur de fond à la carte, utilisez les classes de contexte :

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Exemple

Essayer par vous-même

titre, texte et lien

Veuillez utiliser .card-title Ajoutez le titre de la carte à n'importe quel élément de titre. Si <p> l'élément est .card-body le dernier élément fils (ou l'unique élément fils), alors .card-text La classe est utilisée pour supprimer <p> Marge inférieure de l'élément..card-link Ajouter un effet bleu et de survol aux liens d'ordre arbitraire.

Exemple

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Titre de la carte</h4>
    <p class="card-text">Certains textes d'exemple. Certains textes d'exemple.</p>
    <a href="#" class="card-link">Lien de la carte</a>
    <a href="#" class="card-link">Un autre lien</a>
  </div>
</div>

Essayer par vous-même

Image de la carte

Transformer .card-img-top ou .card-img-bottom Ajouter à <img>，vous pouvez placer l'image en haut ou en bas de la carte.

Veuillez noter que nous avons ajouté une image en dehors de .card-body pour couvrir toute la largeur :

Exemple

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Image de la carte">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates est un programmeur et ingénieur. Certains textes d'exemple. Certains textes d'exemple.</p>
    <a href="#" class="btn btn-primary">Voir le profil personnel</a>
  </div>
</div>

Essayer par vous-même

Carte image superposée

Transformer l'image en arrière-plan de la carte et utiliser .card-img-overlay Ajouter du texte en haut de l'image :

Exemple

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Image de la carte">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Certains textes d'exemple. Certains textes d'exemple.</p>
    <a href="#" class="btn btn-primary">Voir le profil personnel</a>
  </div>
</div>

Essayer par vous-même