ALERTS COMPONENTE EN BOOTSTRAP 4

El componente alerts está disponibles para cualquier longitud de texto así como un botón de descarte opcional.

Alerts tiene cuatro tipos diferentes de class cada uno combinado con la class alert: alert alert-success, alert alert-info, alert alert-warning, alert alert-danger

El uso del color para añadir significado sólo proporciona una indicación visual, que no se transmitirá a los usuarios de las tecnologías de asistencia, como los lectores de pantalla.

Asegúrese de que la información indicada por el color sea obvia del propio contenido (por ejemplo, el texto visible), o que se incluya a través de medios alternativos, como texto adicional oculto con la class sr-only.

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

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

• Asegúrate de haber cargado el plugin de alert o el JavaScript compilado de Bootstrap.
• Agregue un botón de descartar y la class .alert-dismissible, agrega un relleno adicional a la derecha de la alerta y posiciona el botón .close.
• El botón de salida, agregue el atributo data-dismiss="alert", que activa la funcionalidad JavaScript. Asegúrese de utilizar el elemento button con él para un comportamiento adecuado en todos los dispositivos.
• Para animar las alertas al descartarlas, asegúrese de agregar las class .fade y .show.

Metodo Alert

$().alert(): Hace que una alerta escuche los sucesos de clic en los elementos descendientes que tienen el atributo data-dismiss="alert". (No es necesario cuando se utiliza la auto-inicialización del data-api).

$().alert('close'): Cierra una alerta al eliminarla del DOM. Si las clases .fade y .show están presentes en el elemento, la alerta se desvanecerá antes de que se elimine.

Evento Alert

close.bs.alert: Este evento se activa inmediatamente cuando se llama al método de instancia de cierre.

closed.bs.alert: Este evento se activa cuando se ha cerrado la alerta (se esperará a que las transiciones CSS se completen).

Fecha actualización el 2021-9-6. Fecha publicación el 2017-9-6. Categoría: Bootstrap. Autor: Oscar olg Mapa del sitio