Source

Avvisi

Fornisci messaggi di feedback contestuali per le azioni tipiche dell'utente con la manciata di messaggi di avviso disponibili e flessibili.

Esempi

Gli avvisi sono disponibili per qualsiasi lunghezza di testo, nonché un pulsante di annullamento opzionale. Per uno stile corretto, utilizzare una delle otto classi contestuali richieste.alert-success (ad esempio, ). Per il licenziamento in linea, usa il plugin jQuery di alerts .

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
Trasmettere significato alle tecnologie assistive

L'uso del colore per aggiungere significato fornisce solo un'indicazione visiva, che non verrà trasmessa agli utenti di tecnologie assistive, come i lettori di schermo. Assicurati che le informazioni denotate dal colore siano ovvie dal contenuto stesso (ad es. il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la .sr-onlyclasse.

Utilizza la .alert-linkclasse di utilità per fornire rapidamente collegamenti colorati corrispondenti all'interno di qualsiasi avviso.

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Contenuti aggiuntivi

Gli avvisi possono anche contenere elementi HTML aggiuntivi come intestazioni, paragrafi e divisori.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Licenziare

Utilizzando il plug-in JavaScript di avviso, è possibile ignorare qualsiasi avviso in linea. Ecco come:

  • Assicurati di aver caricato il plug-in di avviso o il JavaScript Bootstrap compilato.
  • Se stai creando il nostro JavaScript dal sorgente, richiedeutil.js . La versione compilata include questo.
  • Aggiungi un pulsante Ignora e la .alert-dismissibleclasse, che aggiunge un riempimento aggiuntivo a destra dell'avviso e posiziona il .closepulsante.
  • Sul pulsante Ignora, aggiungi l' data-dismiss="alert"attributo, che attiva la funzionalità JavaScript. Assicurati di utilizzare l' <button>elemento con esso per un comportamento corretto su tutti i dispositivi.
  • Per animare gli avvisi quando li elimini, assicurati di aggiungere le classi .fadee ..show

Puoi vederlo in azione con una demo dal vivo:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Comportamento JavaScript

Trigger

Abilita l'eliminazione di un avviso tramite JavaScript:

$('.alert').alert()

O con dataattributi su un pulsante all'interno dell'avviso , come dimostrato sopra:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Tieni presente che la chiusura di un avviso lo rimuoverà dal DOM.

Metodi

Metodo Descrizione
$().alert() Fa in modo che un avviso sia in ascolto per eventi di clic sugli elementi discendenti che hanno l' data-dismiss="alert"attributo. (Non necessario quando si utilizza l'inizializzazione automatica di data-api.)
$().alert('close') Chiude un avviso rimuovendolo dal DOM. Se le classi .fadee .showsono presenti sull'elemento, l'avviso svanirà prima di essere rimosso.
$().alert('dispose') Distrugge l'avviso di un elemento. 
$('.alert').alert('close')

Eventi

Il plug-in di avviso di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità di avviso.

Evento Descrizione
close.bs.alert Questo evento viene attivato immediatamente quando closeviene chiamato il metodo dell'istanza.
closed.bs.alert Questo evento viene attivato quando l'avviso è stato chiuso (attende il completamento delle transizioni CSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})