Source

Alertes

Proporcioneu missatges de comentaris contextuals per a les accions típiques dels usuaris amb un grapat de missatges d'alerta disponibles i flexibles.

Exemples

Les alertes estan disponibles per a qualsevol extensió de text, així com un botó d'ignorar opcional. Per obtenir un estil adequat, utilitzeu una de les vuit classes contextuals necessàries.alert-success (p. ex., ). Per a l'acomiadament en línia, utilitzeu el connector d'alertes jQuery .

<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>
Transmetre significat a les tecnologies d'assistència

L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia del contingut en si (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .sr-onlyclasse.

Utilitzeu la .alert-linkclasse d'utilitat per proporcionar ràpidament enllaços de colors coincidents dins de qualsevol alerta.

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

Contingut addicional

Les alertes també poden contenir elements HTML addicionals com encapçalaments, paràgrafs i divisors.

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

Descartant

Mitjançant el connector d'alerta JavaScript, és possible descartar qualsevol alerta en línia. Així és com:

  • Assegureu-vos que heu carregat el connector d'alerta o el JavaScript Bootstrap compilat.
  • Si esteu creant el nostre JavaScript des de la font, requereixutil.js . La versió compilada inclou això.
  • Afegiu un botó de descartar i la .alert-dismissibleclasse, que afegeix un farciment addicional a la dreta de l'alerta i posiciona el .closebotó.
  • Al botó descartar, afegiu l' data-dismiss="alert"atribut, que activa la funcionalitat de JavaScript. Assegureu-vos d'utilitzar l' <button>element amb ell per a un comportament adequat en tots els dispositius.
  • Per animar alertes quan les ignoreu, assegureu-vos d'afegir les classes .fadei ..show

Podeu veure això en acció amb una demostració en directe:

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

Comportament de JavaScript

Disparadors

Activa l'eliminació d'una alerta mitjançant JavaScript:

$('.alert').alert()

O amb dataatributs en un botó dins de l'alerta , com s'ha demostrat anteriorment:

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

Tingueu en compte que tancar una alerta l'eliminarà del DOM.

Mètodes

Mètode Descripció
$().alert() Fa que una alerta escolti els esdeveniments de clic als elements descendents que tenen l' data-dismiss="alert"atribut. (No és necessari quan s'utilitza l'inicialització automàtica de l'api de dades.)
$().alert('close') Tanca una alerta eliminant-la del DOM. Si les classes .fadei .showestan presents a l'element, l'alerta s'esvairà abans que s'elimini.
$().alert('dispose') Destrueix l'alerta d'un element. 
$('.alert').alert('close')

Esdeveniments

El connector d'alerta de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat d'alerta.

Esdeveniment Descripció
close.bs.alert Aquest esdeveniment s'activa immediatament quan closees crida al mètode d'instància.
closed.bs.alert Aquest esdeveniment s'activa quan l'alerta s'ha tancat (esperarà que finalitzin les transicions CSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})