Las alertas son un componente muy importante en la biblioteca de Bootstrap. Se utilizan para mostrar cualquier mensaje a los usuarios, como el envío de un formulario, el envío de OTP o la entrada incorrecta en el formulario. En otras palabras, las alertas se utilizan para proporcionar mensajes de retroalimentación al usuario en función de su interacción con el sitio web.
En este artículo, aprenderemos cómo crear una alerta descartable utilizando la biblioteca de arranque. Las alertas descartables hacen que nuestro sitio web sea como un sitio web moderno donde podemos descartar la alerta después de leerla. Tendremos que cargar el complemento de alerta incluyendo el JavaScript de Bootstrap compilado en nuestra página HTML.
Podemos agregar el botón de cierre y usar la clase .alert-dismissible , que agrega relleno adicional a la derecha de la alerta y posiciona el botón de cierre. En el botón de cerrar, usamos el atributo data-bs-dismiss=”alert” , que activa la funcionalidad de JavaScript. El elemento <button> se recomienda aquí para un comportamiento adecuado en todos los dispositivos. Podemos usar las clases .fade y .show para animar alertas cuando se descartan.
Sintaxis:
<div class="alert alert-warning alert-dismissible" role="alert">
<strong>Alert!</strong>This is a dismissable alert
<button type="button" class="btn-close"
data-bs-dismiss="alert"
aria-label="Close">
</button>
</div>
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap CSS --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap JS --> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"> </script> </head> <body class="container"> <h1>Dismissible Alert</h1> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Alert!</strong> This is a dismissable alert that can be dismissed after clicking on the close button. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button> </div> <p>This is some page text.</p> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA