Source

Alertas

Proporcione mensajes de retroalimentación contextuales para las acciones típicas de los usuarios con el puñado de mensajes de alerta disponibles y flexibles.

Ejemplos

Las alertas están disponibles para cualquier longitud de texto, así como un botón de descartar opcional. Para un estilo adecuado, utilice una de las ocho clases contextuales requeridas.alert-success (p. ej., ). Para el despido en línea, use el complemento jQuery de alertas .

<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>
Transmitir significado a las tecnologías de asistencia

El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Asegúrese de que la información indicada por el color sea obvia a partir del contenido en sí (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la .sr-onlyclase.

Use la .alert-linkclase de utilidad para proporcionar rápidamente enlaces de colores coincidentes dentro de cualquier 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>

Contenido adicional

Las alertas también pueden contener elementos HTML adicionales como encabezados, párrafos y divisores.

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

despidiendo

Con el complemento JavaScript de alerta, es posible descartar cualquier alerta en línea. Así es cómo:

  • Asegúrese de haber cargado el complemento de alerta o el JavaScript de Bootstrap compilado.
  • Si está compilando nuestro JavaScript desde la fuente, requiereutil.js . La versión compilada incluye esto.
  • Agregue un botón de descartar y la .alert-dismissibleclase, que agrega relleno adicional a la derecha de la alerta y posiciona el .closebotón.
  • En el botón de descartar, agregue el data-dismiss="alert"atributo, que activa la funcionalidad de JavaScript. Asegúrese de usar el <button>elemento con él para un comportamiento adecuado en todos los dispositivos.
  • Para animar las alertas al descartarlas, asegúrese de agregar las clases .fadey ..show

Puede ver esto en acción con una demostración en 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>

Comportamiento de JavaScript

disparadores

Habilite el rechazo de una alerta a través de JavaScript:

$('.alert').alert()

O con dataatributos en un botón dentro de la alerta , como se demostró anteriormente:

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

Tenga en cuenta que cerrar una alerta la eliminará del DOM.

Métodos

Método Descripción
$().alert() Hace que una alerta escuche eventos de clic en elementos descendientes que tienen el data-dismiss="alert"atributo. (No es necesario cuando se usa la inicialización automática de la API de datos).
$().alert('close') Cierra una alerta eliminándola del DOM. Si las clases .fadey .showestán presentes en el elemento, la alerta desaparecerá antes de que se elimine.
$().alert('dispose') Destruye la alerta de un elemento. 
$('.alert').alert('close')

Eventos

El complemento de alerta de Bootstrap expone algunos eventos para conectarse a la funcionalidad de alerta.

Evento Descripción
close.bs.alert Este evento se activa inmediatamente cuando closese llama al método de instancia.
closed.bs.alert Este evento se activa cuando se ha cerrado la alerta (esperará a que se completen las transiciones de CSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})