Salta al contenuto principale Passa alla navigazione dei documenti
Check
in English

Avvisi

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

Su questa pagina

Esempi

Gli avvisi sono disponibili per qualsiasi lunghezza di testo, nonché un pulsante di chiusura opzionale. Per uno stile corretto, utilizzare una delle otto classi contestuali richieste.alert-success (ad esempio, ). Per il licenziamento in linea, utilizza il plug-in JavaScript per gli avvisi .

html 
<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 esempio il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la .visually-hiddenclasse.

Esempio dal vivo

Fai clic sul pulsante in basso per mostrare un avviso (nascosto con stili in linea per iniziare), quindi eliminalo (e distruggilo) con il pulsante di chiusura integrato.

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Usiamo il seguente JavaScript per attivare la nostra demo di avviso dal vivo:

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

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

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

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

Icone

Allo stesso modo, puoi utilizzare le utilità flexbox e le icone Bootstrap per creare avvisi con icone. A seconda delle icone e dei contenuti, potresti voler aggiungere più utilità o stili personalizzati.

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

Hai bisogno di più di un'icona per i tuoi avvisi? Prendi in considerazione l'utilizzo di più icone Bootstrap e la creazione di uno sprite SVG locale in questo modo per fare facilmente riferimento alle stesse icone ripetutamente.

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</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.
  • Aggiungi un pulsante di chiusura e la .alert-dismissibleclasse, che aggiunge un riempimento aggiuntivo a destra dell'avviso e posiziona il pulsante di chiusura.
  • Sul pulsante di chiusura, aggiungi l' data-bs-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:

html 
<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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Quando un avviso viene eliminato, l'elemento viene completamente rimosso dalla struttura della pagina. Se un utente della tastiera ignora l'avviso utilizzando il pulsante di chiusura, il suo focus verrà perso improvvisamente e, a seconda del browser, verrà ripristinato all'inizio della pagina/del documento. Per questo motivo, ti consigliamo di includere JavaScript aggiuntivo che ascolta l' closed.bs.alertevento e imposta focus()a livello di codice la posizione più appropriata nella pagina. Se hai intenzione di spostare lo stato attivo su un elemento non interattivo che normalmente non riceve lo stato attivo, assicurati di aggiungere tabindex="-1"all'elemento.

CSS

Variabili

Aggiunto nella v5.2.0

Come parte dell'approccio in evoluzione delle variabili CSS di Bootstrap, gli avvisi ora utilizzano le variabili CSS locali .alertper una migliore personalizzazione in tempo reale. I valori per le variabili CSS vengono impostati tramite Sass, quindi anche la personalizzazione di Sass è ancora supportata.

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

variabili Sas

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Sass mixin

Usato in combinazione con $theme-colorsper creare classi di modificatori contestuali per i nostri avvisi.

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Ciclo di Sass

Ciclo che genera le classi di modifica con il alert-variant()mixin.

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);

  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

Comportamento JavaScript

Inizializzare

Inizializza gli elementi come avvisi

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

Al solo scopo di eliminare un avviso, non è necessario inizializzare il componente manualmente tramite l'API JS. Utilizzando data-bs-dismiss="alert", il componente verrà inizializzato automaticamente e correttamente eliminato.

Vedere la sezione trigger per maggiori dettagli.

Trigger

Il licenziamento può essere ottenuto con l' dataattributo su un pulsante all'interno dell'avviso , come illustrato di seguito:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

o su un pulsante esterno all'avviso utilizzando data-bs-targetcome illustrato di seguito:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

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

Metodi

È possibile creare un'istanza di avviso con il costruttore di avvisi, ad esempio:

const bsAlert = new bootstrap.Alert('#myAlert')

Questo fa sì che un avviso sia in ascolto per eventi di clic sugli elementi discendenti che hanno l' data-bs-dismiss="alert"attributo. (Non necessario quando si utilizza l'inizializzazione automatica di data-api.)

Metodo Descrizione
close Chiude un avviso rimuovendolo dal DOM. Se le classi .fadee .showsono presenti sull'elemento, l'avviso svanirà prima di essere rimosso.
dispose Distrugge l'avviso di un elemento. (Rimuove i dati memorizzati sull'elemento DOM)
getInstance Metodo statico che consente di ottenere l'istanza di avviso associata a un elemento DOM. Ad esempio: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Metodo statico che restituisce un'istanza di avviso associata a un elemento DOM o ne crea una nuova nel caso non sia stata inizializzata. Puoi usarlo in questo modo: bootstrap.Alert.getOrCreateInstance(element).

Utilizzo di base:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
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 Si attiva immediatamente quando closeviene chiamato il metodo di istanza.
closed.bs.alert Attivato quando l'avviso è stato chiuso e le transizioni CSS sono state completate. 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})