Source

Alerts

Fornite missaghji di feedback contextuale per l'azzioni tipici di l'utilizatori cù una mansa di messagi d'alerta dispunibili è flessibili.

Esempii

L'alerte sò dispunibuli per ogni lunghezza di testu, è ancu un buttone di licenzià facultativu. Per un stilu propiu, utilizate una di l'ottu classi contextuale richieste (per esempiu, .alert-success). Per u licenziamentu in linea, aduprate u plugin jQuery alerts .

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>
Trasmette u significatu à e tecnulugia assistive

Utilizà u culore per aghjunghje significatu solu furnisce una indicazione visuale, chì ùn serà micca trasmessa à l'utilizatori di tecnulugii assistivi - cum'è i lettori di schermu. Assicuratevi chì l'infurmazione denotata da u culore sia ovvia da u cuntenutu stessu (per esempiu, u testu visibile), o hè inclusa per mezu alternativu, cum'è testu addiziale oculatu cù a .sr-onlyclasse.

Aduprate a .alert-linkclassa di utilità per furnisce rapidamente ligami culurati currispondenti in ogni alerta.

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Cuntinutu supplementu

L'alerte ponu ancu cuntene elementi HTML supplementari cum'è intestazioni, paragrafi è 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>

Licenziatu

Utilizendu u plugin JavaScript d'alerta, hè pussibule di scaccià ogni alerta in linea. Eccu cumu:

  • Assicuratevi chì avete caricatu u plugin d'alerta, o u JavaScript Bootstrap compilatu.
  • Se custruite u nostru JavaScript da a fonte, hè necessariuutil.js . A versione compilata include questu.
  • Aghjunghjite un buttone di dismissu è a .alert-dismissibleclassa, chì aghjunghje un padding extra à a diritta di l'alerta è posiziona u .closebuttone.
  • Nantu à u buttone di licenzià, aghjunghje l' data-dismiss="alert"attributu, chì attiva a funziunalità JavaScript. Assicuratevi di utilizà l' <button>elementu cun ellu per un cumpurtamentu propiu in tutti i dispositi.
  • Per animà l'alerts quandu li dismissi, assicuratevi di aghjunghje .fadee .showclassi.

Pudete vede questu in azione cù una demo live:

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

Cumportamentu JavaScript

Triggers

Abilita l'eliminazione di una alerta via JavaScript:

$('.alert').alert()

O cù dataattributi nantu à un buttone in l'alerta , cum'è dimustratu sopra:

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

Nota chì chjude una alerta l'eliminarà da u DOM.

I metudi

Metudu Descrizzione
$().alert() Fà una alerta à sente per l'eventi di cliccà nantu à elementi discendenti chì anu l' data-dismiss="alert"attributu. (Ùn hè necessariu quandu si usa l'inizializazione automatica di l'api di dati).
$().alert('close') Chiude una alerta rimuovendu da u DOM. Se i classi .fadeè .showsò prisenti nantu à l'elementu, l'alerta svanisce prima di esse eliminata.
$().alert('dispose') Distrughje l'alerta di l'elementu. 
$(".alert").alert('close')

Avvenimenti

U plugin d'alerta di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità d'alerta.

Avvenimentu Descrizzione
close.bs.alert Questu avvenimentu spara immediatamente quandu u closemetudu di istanza hè chjamatu.
closed.bs.alert Questu avvenimentu hè sparatu quandu l'alerta hè stata chjusa (aspetterà chì e transizioni CSS finiscinu). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})