Boutons, alertes, badges et cartes

Boutons, alertes, badges et cartes — Cours Bootstrap 5

Leçon 1

Les boutons

Les variantes de boutons

html

<button type="button" class="btn btn-primary">Principal</button>
<button type="button" class="btn btn-outline-primary">Contour</button>
<button type="button" class="btn btn-success btn-lg">Grand</button>
<button type="button" class="btn btn-secondary btn-sm">Petit</button>
<a href="inscription.html" class="btn btn-warning">Un lien qui ressemble à un bouton</a>
<button type="button" class="btn btn-primary" disabled>Désactivé</button>
<div class="d-grid"><button class="btn btn-dark">Pleine largeur</button></div>

Tableau: Les classes de bouton

Classe	Effet
`btn`	obligatoire : le style de base
`btn-primary`, `btn-danger`…	couleur pleine
`btn-outline-primary`…	contour seulement
`btn-link`	apparence de lien
`btn-lg`, `btn-sm`	taille
`disabled` (attribut)	bouton désactivé
`btn-group` (sur un conteneur)	boutons collés en groupe

Vidéo · À regarder

Bootstrap 5 Crash Course

Web Dev Simplified · YouTube

Regarde de 36:05 à 40:284 min 23 s

Ouvrir sur YouTube à 36:05

Leçon 2

Les alertes

Vidéo · À regarder

Bootstrap 5 Crash Course

Web Dev Simplified · YouTube

Regarde de 40:28 à 42:362 min 8 s

Ouvrir sur YouTube à 40:28

Leçon 3

Les badges

Leçon 4

Les cartes

Classe	Rôle
`card`	le conteneur
`card-img-top`	image en haut
`card-header` / `card-footer`	en-tête / pied
`card-body`	le contenu avec padding
`card-title`, `card-subtitle`, `card-text`	textes
`h-100` (sur la carte)

Travaux pratiques

Le message de confirmation

Exercices

Exercice 5.1

Choisis la bonne réponse

1Quelle classe est obligatoire sur un bouton Bootstrap ?
2Pour un bouton avec seulement un contour :
3Fermer une alerte demande…
4Pour que les cartes d'une ligne aient la même hauteur :
5Pour aller vers une autre page, on utilise…
6visually-hidden…

0/6 répondues

Exercice 5.2

Les offres

L'essentiel du chapitre

À retenir

Boutons : btn + btn-{couleur} ou btn-outline-{couleur}, btn-lg/btn-sm, d-grid pour la pleine largeur ; <a> pour naviguer, <button> pour agir.
Alertes : alert alert-{couleur} ; refermable avec alert-dismissible fade show + btn-close data-bs-dismiss="alert".
Badges : badge text-bg-{couleur}, rounded-pill.
Cartes : card, card-img-top, card-body, card-title, card-text, card-footer ; h-100 + mt-auto en grille.

Une alerte simple et une alerte refermable

html

<div class="alert alert-success" role="alert">
  <strong>Bravo !</strong> Ton inscription est enregistrée.
</div>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Ta session expire dans 5 minutes.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
</div>

Des badges

html

<h2>Notifications <span class="badge text-bg-danger">3</span></h2>
<span class="badge rounded-pill text-bg-success">Nouveau</span>
<button class="btn btn-primary position-relative">
  Panier
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    2 <span class="visually-hidden">articles</span>
  </span>
</button>

Une carte complète

html

<div class="card" style="width: 18rem;">
  <img src="images/chefchaouen.webp" class="card-img-top" alt="Ruelle bleue de Chefchaouen">
  <div class="card-body">
    <h3 class="card-title h5">Week-end à Chefchaouen</h3>
    <p class="card-text">Deux jours dans la perle bleue du Rif, guide et riad compris.</p>
    <a href="#" class="btn btn-primary">Réserver</a>
  </div>
  <div class="card-footer text-body-secondary">À partir de 1 200 DH</div>
</div>

Des cartes de même hauteur en grille

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <div class="card-body d-flex flex-column">
        <h3 class="card-title h5">Formation HTML</h3>
        <p class="card-text">Structurer une page web de zéro.</p>
        <a href="#" class="btn btn-primary mt-auto">Découvrir</a>
      </div>
    </div>
  </div>
  <!-- deux autres colonnes identiques -->
</div>