Alertes Bootstrap4

Bootstrap 4 permet de mettre facilement en œuvre des boîtes d'alerte d'information.

Les alertes peuvent être créées en utilisant la.alertclasse, suivie de.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-lightou.alert-darkclasse :

Exemple

<div class="alert alert-success"> <strong>Succès !</strong>Un message de succès indiquant une opération réussie.</div>

Essayez-le vous-même »

Alertes avec liens

Pour ajouter des liens dans une alerte, ajoutez laalert-linkclasse pour définir un lien qui correspond à la couleur de l'alerte :

Exemple

<div class="alert alert-success"> <strong>Succès !</strong>Vous devriez 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 dans le div de l'alerte, puis ajouter laclass="close"etdata-dismiss="alert"classe au lien du bouton de fermeture pour définir l'opération de fermeture de l'alerte.

Exemple

<div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">&times;</button> <strong>Succès !</strong>Un message de succès indiquant une opération réussie.</div>

Essayez-le vous-même »

Astuce :&times; (×) est un caractère d'entité HTML pour indiquer l'opération de fermeture, plutôt que la lettre « x ».

Animations d'alertes

.fadeet.showLa classe est utilisée pour définir les effets de fondu de sortie et d'entrée lorsque l'alerte se ferme :

Exemple

<div class="alert alert-danger alert-dismissible fade show">

Essayez-le vous-même »
Autres extensions