Alertes Bootstrap 5
Bootstrap 5 facilite la création de boîtes d'alerte.
Les alertes peuvent utiliser la.alertclasse, suivie des.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-lightou.alert-darkclasse pour obtenir :
Exemple
<div class="alert alert-success">
<strong>Succès !</strong>Indique une action réussie ou positive.</div>
Essayez-le vous-même »
Alertes avec liens
Dans les alertes, ajoutez laalert-linkclasse pour définir un lien correspondant à la couleur de l'alerte :
Exemple
<div class="alert alert-success">
<strong>Succès !</strong>Vous devez lire attentivement<a href="#" class="alert-link">ce message</a>。
</div>
Essayez-le vous-même »
Fermeture des alertes
Nous pouvons ajouter la.alert-dismissibleclasse au div dans l'alerte, puis ajouterclass="btn-close"etdata-bs-dismiss="alert"classe au lien du bouton de fermeture pour définir l'action de fermeture de l'alerte.
Exemple
<div class="alert alert-success alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Succès !</strong>Indique une action réussie ou positive.</div>
Essayez-le vous-même »
Animations d'alertes
.fadeet.showLa classe est utilisée pour définir les effets de fondu sortant et entrant lors de la fermeture de l'alerte :
Autres extensions