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.
<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.
<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 atributo
data-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
. -
Para tener un cierre automático se puede agregar
.alert-short
para que el Alert se cierre en 3 segundos o el.alert-long
para que se cierre en 5 segundos.
You can see this in action with a live demo:
<div class="alert alert-warning alert-dismissible fade show alert-short" role="alert">
...
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-warning alert-dismissible fade show alert-long" role="alert">
...
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<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">×</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">×</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...
})