Alerts

Proporcione mensajes de retroalimentación contextual para las acciones típicas de los usuarios con los pocos disponibles y mensajes de alerta flexibles.

Ejemplos

Las alertas están disponibles para cualquier longitud de texto, así como un botón de descarte opcional. Para un estilo adecuado, use una de las ocho clases contextuales requeridas (e.j., .alert-success). For inline dismissal, use the Para el despido en línea, use el alerts jQuery plugin.

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple info alert—check it out!

A simple warning alert—check it out!

A simple danger alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

A simple gray alert—check it out!

A simple tertiary alert—check it out!


  <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-info" role="alert">
    A simple info alert—check it out!
  </div>
  <div class="alert alert-warning" role="alert">
    A simple warning alert—check it out!
  </div>
  <div class="alert alert-danger" role="alert">
    A simple danger 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>
  <div class="alert alert-gray" role="alert">
    A simple gray alert—check it out!
  </div>
  <div class="alert alert-tertiary" role="alert">
    A simple tertiary alert—check it out!
  </div>

Link color

Utilice la .alert-link clase de utilidad para proporcionar rápidamente enlaces de colores coincidentes dentro de cualquier alerta.

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

A simple gray alert with an example link. Give it a click if you like.

A simple tertiary alert with an example link. Give it a click if you like.


  <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-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-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-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-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>
  <div class="alert alert-gray" role="alert">
    A simple gray alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
  <div class="alert alert-tertiary" role="alert">
    A simple tertiary 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 títulos, párrafos y separadores.

Bien hecho!

Ah, sí, ha leído correctamente este importante mensaje de alerta. Este texto de ejemplo se extenderá un poco más para que pueda ver cómo funciona el espaciado dentro de una alerta con este tipo de contenido.

Siempre que lo necesite, asegúrese de utilizar las utilidades de margen para mantener las cosas en orden.


  <div class="alert alert-success" role="alert">
    <h4 class="alert-heading">Bien hecho!</h4>
    <p>Ah, sí, ha leído correctamente este importante mensaje de alerta. Este texto de ejemplo se extenderá un 
      poco más para que pueda ver cómo funciona el espaciado dentro de una alerta con este tipo de contenido.</p>
    <hr>
    <p class="mb-0">Siempre que lo necesite, asegúrese de utilizar las utilidades de margen para mantener las cosas en orden.</p>
  </div>

Dismissing

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

Asegúrese de haber cargado el complemento de alerta o el JavaScript Bootstrap compilado.
Si está construyendo nuestro JavaScript desde la fuente, requires util.js. La versión compilada incluye esto.
Agregue un botón para descartar y la clase.alert-dismissible, que agrega un relleno adicional a la derecha de la alerta y coloca el boton .close .
En el botón de descartar, agregue el atributodata-dismiss="alert", que activa la funcionalidad de JavaScript. Asegúrese de usar el elemento <button>, para un comportamiento adecuado en todos los dispositivos.
Para animar las alertas al descartarlas, asegúrese de agregar las clases .fade y .show.

You can see this in action with a live demo:

Holy guacamole! You should check in on some of those fields below.


  <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 el atributo data 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 `.fade` y `.show` está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

Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.

Evento	Descripción
`close.bs.alert`	Este evento se activa inmediatamente cuando `close` se llama al método de instancia.
`closed.bs.alert`	Este evento se activa cuando la alerta se ha cerrado (esperará a que se completen las transiciones CSS).

$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})