Alertas en Bootstrap 5 | Explicado
Dar a estos mensajes de alerta un cierto estilo también es importante porque ese estilo juega un papel importante en la transmisión del significado detrás del mensaje. En Bootstrap 5 puede realizar esta tarea utilizando varias clases que se han discutido en este informe.
Hacer mensajes de alerta usando Bootstrap 5
Para crear un mensaje de alerta en Bootstrap 5, use el .alerta clase en combinación con las clases de color proporcionadas para representar el significado del mensaje de alerta. Las clases de color que se pueden utilizar junto con el .La clase de alerta se enumeran a continuación.
1 ... alerta-primaria
Proporciona un color azul que representa una tarea importante.
2 ... alerta-éxito
Proporciona un color verde que representa el éxito.
3 ... Alerta-Info
Da un color azul claro que indica algo de información.
4 ... Alerta de alerta
Proporciona un color amarillo que representa una advertencia.
5 ... Alerta-Danger
Da un color rojo que indica peligro.
6 ... alerta-segundo
Proporciona un color gris que representa una tarea menos importante.
7 ... alerta con luz
Da un color gris claro al mensaje.
8 ... alerta-oscuridad
Proporciona un color gris oscuro al mensaje.
Creemos un mensaje de alerta usando Bootstrap 5.
Cómo generar una alerta de mensaje de confirmación usando Bootstrap 5
Supongamos que desea generar un mensaje de confirmación cuando una solicitud de usuario se procesa correctamente.
Html
Procesado con éxito! Su solicitud ha sido procesada con éxito.
El código anterior generará una alerta de confirmación informando al usuario que la solicitud realizada se procesó correctamente.
Producción
Se generó un mensaje de confirmación con éxito.
Cómo generar una alerta de mensaje de error usando Bootstrap 5
Supongamos que desea generar un mensaje de error cuando se le denega una solicitud de usuario.
Html
Inválido! Su solicitud ha sido negada.
En el fragmento de código, tenga en cuenta que, además de asignar el mensaje, el mensaje .clase de alerta-danger también estamos asignando el .clase de alerta-desestimable junto con un botón que tiene clase .BTN-CLOSE y DATA-BS-DISMISS = "Alerta". Las tres entidades contribuyen a hacer un mensaje de alerta que el usuario puede cerrar.
Producción
Se generó un mensaje de error de despido de despido.
Creación de alertas como enlaces
Si desea realizar sus mensajes de alerta como enlaces y dirigir a sus usuarios a otra página o fuente a través de esos enlaces, use el .enlace de alerta clase para hacerlo.
Ejemplo
Supongamos que desea redirigir a su usuario a otra página web y luego seguir el fragmento de código a continuación.
Html
Mira nuestro otra oferta.
Aquí estamos usando el .clase de alerta-Info para indicar alguna información contenida en el mensaje de alerta. Además, como puede notar que estamos vinculando una pieza del mensaje con otra página web asignando el .clase de enlace de alerta a la etiqueta de anclaje.
Producción
Se ha vinculado un mensaje de alerta a otra fuente.
Alertas de animación
También puede agregar animaciones a sus mensajes de alerta, como incluir un efecto de desvanecimiento utilizando el .desteñir y .espectáculo clases.
Ejemplo
Así es como puede agregar un efecto de desvanecimiento a sus mensajes de alerta.
Html
No haga clic en el enlace mientras la solicitud se está procesando
El código anterior establece que el mensaje de alerta será una advertencia y será despedido. Además, cuando el usuario cierra el mensaje, tendrá un efecto de desvanecimiento.
Producción
La alerta fue animada con éxito.
Conclusión
Las alertas son básicamente mensajes o piezas de cierta información que requieren atención inmediata de un usuario. En Bootstrap 5, puede crear alertas utilizando el .alerta clase, además, para transmitir su significado a través de colores utilizando las clases de color disponibles. Además, utilizando las clases proporcionadas por Bootstrap 5, puede hacer que sus alertas se desanime o animarlas. Este informe discute alertas en Bootstrap 5 en detalle.