HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Alertes d'amorçage

❮ Précédent Suivant ❯

Alertes

Bootstrap fournit un moyen simple de créer des messages d'alerte prédéfinis :

× Succès! Cette boîte d'alerte indique une action réussie ou positive.
× Info! Cette boîte d'alerte indique un changement informatif neutre ou une action.
× Avertissement! Cette boîte d'alerte indique un avertissement qui peut nécessiter votre attention.
× Danger! Cette boîte d'alerte indique une action dangereuse ou potentiellement négative.

Les alertes sont créées avec la classe , .alertsuivie de l'une des quatre classes contextuelles .alert-success, ou .alert-info:.alert-warning.alert-danger

Exemple

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative 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":

Succès! Vous devriez lire ce message .
Info! Vous devriez lire ce message .
Avertissement! Vous devriez lire ce message .
Danger! Vous devriez lire ce message .

Exemple

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Alertes de fermeture

× Cliquez sur le symbole "x" à droite pour me fermer.

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">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

L'attribut aria-* et × explication

Pour aider à améliorer l'accessibilité pour les personnes utilisant des lecteurs d'écran, vous devez inclure l'attribut aria-label="close" lors de la création d'un bouton de fermeture.

&fois; (×) 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

× Cliquez sur le symbole "x" à droite pour me fermer. Je vais "disparaître".

Les classes .fadeet .inajoute un effet de fondu à la fermeture du message d'alerte :

Exemple

<div class="alert alert-danger fade in">

Testez-vous avec des exercices

Exercer:

Ajoutez une classe "alerte" Bootstrap pour afficher le résultat d'une action réussie.

<div class="">
  Success!
</div>

Référence complète des alertes Bootstrap

Pour une référence complète de toutes les options, méthodes et événements d'alerte, accédez à notre Bootstrap JS Alert Reference .


❮ Précédent Suivant ❯