Bootstrap - Alertes

Ce chapitre abordera les alertes et les classes fournies par Bootstrap pour les alertes. Les alertes fournissent un moyen de styliser les messages à l'utilisateur. Ils fournissent des messages de retour contextuels pour les actions typiques des utilisateurs.

Vous pouvez ajouter une icône de fermeture facultative pour alerter. Pour le licenciement en ligne, utilisez le plug-in Alerts jQuery .

Vous pouvez ajouter une alerte de base en créant un wrapper <div> et en ajoutant une classe de .alert et l'une des quatre classes contextuelles (par exemple, .alert-success, .alert-info, .alert-warning, .alert-danger). L'exemple suivant illustre ceci -

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

Alertes de rejet

Pour créer une alerte de licenciement -

• Ajoutez une alerte de base en créant un wrapper <div> et en ajoutant une classe de .alert et l'une des quatre classes contextuelles (par exemple, .alert-success, .alert-info, .alert-warning, .alert-danger)

• Ajoutez également facultatif .alert-dismissable à la classe <div> ci-dessus.

• Ajoutez un bouton de fermeture.

L'exemple suivant illustre ceci -

<div class = "alert alert-success alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Success! Well done its submitted.
</div>

<div class = "alert alert-info alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Info! take this info.
</div>

<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Warning ! Dont submit this.
</div>

<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Error ! Change few things.
</div>

Veillez à utiliser l'élément <button> avec l' attribut de données data-licenciement = "alert" .

Liens dans les alertes

Pour obtenir des liens dans les alertes -

• Ajoutez une alerte de base en créant un wrapper <div> et en ajoutant une classe de .alert et l'une des quatre classes contextuelles (par exemple, .alert-success, .alert-info, .alert-warning, .alert-danger)

• Utilisez le .alert-link classe utilitaire pour fournir rapidement des liens colorés correspondants dans n'importe quelle alerte.

<div class = "alert alert-success">
   <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>

<div class = "alert alert-info">
   <a href = "#" class = "alert-link">Info! take this info.</a>
</div>

<div class = "alert alert-warning">
   <a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>

<div class = "alert alert-danger">
   <a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>