Bootstrap 4 Alertes
Bootstrap 4 Alertes
Bootstrap 4 fournit un moyen simple de créer des messages d'alerte prédéfinis :
Les alertes sont créées avec la .alertclasse, suivie de l'une des classes contextuelles .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, .alert-secondary, .alert-lightou .alert-dark:
Exemple
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Liens d'alerte
Ajoutez la alert-linkclasse à tous les liens à l'intérieur de la boîte d'alerte pour créer des "liens de couleur assortis":
Exemple
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Alertes de fermeture
Pour fermer le message d'alerte, ajoutez une .alert-dismissible
classe au conteneur d'alerte. Ajoutez ensuite class="close"et data-dismiss="alert"
à un lien ou à un élément de bouton (lorsque vous cliquez dessus, la boîte d'alerte disparaît).
Exemple
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Astuce : × ; (×) est une entité HTML qui est l'icône préférée pour les boutons de fermeture, plutôt que la lettre "x".
Pour obtenir une liste de toutes les entités HTML, consultez notre référence sur les entités HTML .
Alertes animées
Les classes .fadeet .showajoute un effet de fondu à la fermeture du message d'alerte :
Exemple
<div class="alert alert-danger
alert-dismissible fade show">
Référence complète des alertes Bootstrap 4
Pour une référence complète de toutes les options, méthodes et événements d'alerte, accédez à notre Bootstrap 4 JS Alert Reference .