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 .
Una alerta principal simple: ¡échale un vistazo!
Una simple alerta secundaria: ¡échale un vistazo!
Una simple alerta de éxito: ¡échale un vistazo!
Una simple alerta de peligro: ¡échale un vistazo!
Una simple alerta de advertencia: ¡échale un vistazo!
Una simple alerta de información: ¡échale un vistazo!
Una simple alerta de luz: ¡échale un vistazo!
Una simple alerta oscura: ¡échale un vistazo!
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.
Color de enlace
Use la .alert-linkclase de utilidad para proporcionar rápidamente enlaces de colores coincidentes dentro de cualquier alerta.
Las alertas también pueden contener elementos HTML adicionales como encabezados, párrafos y divisores.
¡Bien hecho!
Aww sí, leíste con éxito 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 usar utilidades de margen para mantener las cosas ordenadas y ordenadas.
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:
¡Santo guacamole! Debe verificar algunos de esos campos a continuación.
Comportamiento de JavaScript
disparadores
Habilite el rechazo de una alerta a través de JavaScript:
O con dataatributos en un botón dentro de la alerta , como se demostró anteriormente:
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.
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).