Bootstrap es una herramienta gratuita y de código abierto para crear páginas web receptivas y hermosas con mucha facilidad. Las alertas se utilizan para notificar a los usuarios y visitantes de la página web sobre alguna acción o información. Además, podemos proporcionarle al usuario que descarte la alerta. Pero las alertas simples no son tan atractivas. Entonces, con la ayuda de Bootstrap, podemos crear alertas realmente buenas dentro del contenido de la página web, es decir, alertas en línea y luego aprenderemos cómo descartarlas.
Enfoque: Primero crearemos un elemento div en nuestro sitio web con algo de contenido. Necesitamos agregar los campos de clase y rol como alerta . Entonces el elemento funcionará como una Alerta . Ahora, crearemos un botón para descartar la alerta . Podemos crear una alerta dentro del elemento utilizando el campo de descarte de datos del botón como alerta o fuera del contenedor una función de JavaScript . Aprenderemos ambos enfoques en este tutorial. Comience importando las bibliotecas de CDNde bootstrap dentro de las etiquetas de cabeza .
<enlace rel=”hoja de estilo” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css”>
<script src=”https://code. jquery.com/jquery-3.6.0.slim.js”> </script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min. js”></script>
Ejemplo 1: para descartar la alerta, debemos agregar alerta descartable a la clase. Ahora, para descartar la alerta, necesitamos la biblioteca Javascript de bootstrap. Lo hemos incluido solo por primera vez. Ahora, según bootstrap, es mejor usar un botón. Podemos incluir el botón dentro o fuera del contenedor de alertas. Llamaremos a una función en el archivo de script para cerrar el contenedor de alertas. El archivo de script incluye una función . Cuando el usuario presiona el botón de cerrar , se llama a la función anterior y, de acuerdo con nuestra función, se cierra la Alerta . El código anterior usa la biblioteca jQuery y, por lo tanto, se necesita la biblioteca jQuery de arranque para nuestro proyecto.
The ".alert('close')" is a bootstrap function.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>GeeksforGeeks</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.slim.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"> </script> </head> <body> <h2 class="bg-success">GeeksforGeeks</h2> <h4>Bootstrap Dismissal Alert</h4> <div class="alert alert-success alert-dismissible fade show mx-5 mt-4 border border-success" role="alert"> <b>Alert it's GEEKSFORGEEKS</b> </div> <button type="button" class="btn bg-warning ml-4" onclick="onButtonPress()"> Close </button> <script src="script.js"></script> </body> </html>
Javascript
function onButtonPress() {
$('.alert').alert('close')
}
Producción:
Alerta de despido de Bootstrap
Ejemplo 2: En este ejemplo, usaremos un botón y el código es el siguiente. Aquí el botón debería ser type=”button” y class=”close” . Hemos colocado el botón dentro del contenedor div para que el botón se vea con la alerta y el botón se elimine cuando se descarte la alerta. Aquí lo importante es el data-dismiss=”alert” porque sino no funcionará. Cuando hacemos clic en el botón, Bootstrap llama a la misma función, solo que llamamos en el primer ejemplo para ocultar la alerta.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>GeeksforGeeks</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.slim.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"> </script> </head> <body> <h2 class="bg-success">GeeksforGeeks</h2> <h4>Bootstrap Dismissal Alert</h4> <div class="alert alert-success alert-dismissible fade show mx-5 mt-4 border border-success" role="alert"> <b>Alert it's GEEKSFORGEEKS</b> <button type="button" class="close" data-dismiss="alert"> <h6>Close</h6> </button> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA