Bootstrap - Avvisi

Questo capitolo discuterà degli avvisi e delle classi che Bootstrap fornisce per gli avvisi. Gli avvisi forniscono un modo per definire lo stile dei messaggi per l'utente. Forniscono messaggi di feedback contestuali per le azioni tipiche degli utenti.

È possibile aggiungere un'icona di chiusura opzionale all'avviso. Per l'eliminazione in linea utilizzare il plug-in jQuery di avvisi .

Puoi aggiungere un avviso di base creando un wrapper <div> e aggiungendo una classe di .alert e una delle quattro classi contestuali (ad es. .alert-success, .alert-info, .alert-warning, .alert-danger). Il seguente esempio lo dimostra:

<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>

Avvisi di licenziamento

Per creare un avviso di licenziamento:

  • Aggiungi un avviso di base creando un wrapper <div> e aggiungendo una classe di .alert e una delle quattro classi contestuali (ad es. .alert-success, .alert-info, .alert-warning, .alert-danger)

  • Aggiungi anche opzionale .alert-dismissable alla classe <div> sopra.

  • Aggiungi un pulsante di chiusura.

Il seguente esempio lo dimostra:

<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>
Assicurati di utilizzare l'elemento <button> con l' attributo dati data-dismiss = "alert" .

Collegamenti negli avvisi

Per ottenere collegamenti negli avvisi:

  • Aggiungi un avviso di base creando un wrapper <div> e aggiungendo una classe di .alert e una delle quattro classi contestuali (ad es. .alert-success, .alert-info, .alert-warning, .alert-danger)

  • Utilizzare il .alert-link classe di utilità per fornire rapidamente collegamenti colorati corrispondenti all'interno di qualsiasi avviso.

<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>