Alertas de Bootstrap5
Bootstrap 5 permite implementar alertas fácilmente.
Las alertas se pueden crear usando.alertla clase, seguida de.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-lighto.alert-darkla clase para lograrlo:
Ejemplo
<div class="alert alert-success">
<strong>¡Éxito!</strong>Muestra un mensaje de éxito para la operación especificada.</div>
Pruébalo »
Agregar enlaces a las alertas
En la alerta, agrega a la etiqueta del enlacealert-linkla clase para configurar enlaces que coincidan con el color de la alerta:
Ejemplo
<div class="alert alert-success">
<strong>¡Éxito!</strong>Debes leer atentamente<a href="#" class="alert-link">este mensaje</a>。
</div>
Pruébalo »
Cerrar la alerta
Podemos agregar en el div de la alerta.alert-dismissiblela clase, y luego agregar en el enlace del botón de cerrarclass="btn-close"ydata-bs-dismiss="alert"la clase para configurar la operación de cierre de la alerta.
Ejemplo
<div class="alert alert-success alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>¡Éxito!</strong>Muestra un mensaje de éxito para la operación especificada.</div>
Pruébalo »
Animación de alertas
.fadey.showLa clase se usa para configurar el efecto de desvanecimiento al cerrar la alerta:
Otras extensiones