Antes o después de realizar una acción, con frecuencia nos encontramos con notificaciones específicas en algunos sitios web. Estos mensajes de alerta son texto resaltado que se debe tener en cuenta al ejecutar una tarea. Usando clases preestablecidas en Bootstrap, estos mensajes de alerta se pueden mostrar en el sitio web.
Enfoque: la clase .alert seguida de clases contextuales se utilizan para mostrar el mensaje de alerta en el sitio web. Las clases de alerta son: .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light y .alert-dark. Podemos usar .alert-warning para crear alertas de notificación de advertencia en el arranque.
A continuación se muestra el procedimiento para implementar una alerta de advertencia simple en Bootstrap.
Paso 1: Incluya Bootstrap y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/ popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
Paso 2: agregue las clases contextuales de alerta .alert y warning (por ejemplo, .alert-warning).
<div class="alert alert-warning" role="alert"> A simple warning alert—check it out! </div>
Ejemplo 1: En este ejemplo, veremos tipos de alertas en bootstrap. Los usuarios pueden utilizar cualquier tipo de alerta de advertencia.
index.html
<!DOCTYPE html> <html> <head> <title>Warning Alerts</title> <meta charset="utf-8" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> </head> <body> <div class="container py-5"> <h4 class="text-center text-uppercase"> GeeksForGeeks Bootstrap 5 warning messages </h4> <h6>Basic Warning alert</h6> <div class="alert alert-warning"> <strong>Warning!</strong> There was a problem with connection. </div> <h6>Warning alert with link</h6> <div class="alert alert-warning"> <strong>Warning!</strong> There was a problem with wifi connection<a href="#" class="alert-link"> Contact us</a>. </div> <h6>Warning alert with close button</h6> <div class="alert alert-warning"> <button type="button" class="close" data-dismiss="alert"> × </button> <strong>Warning!</strong> There was a problem with wifi connection. </div> <h6>Warning alert with close button and fade animation</h6> <div class="alert alert-warning alert-dismissible fade show"> <button type="button" class="close" data-dismiss="alert"> × </button> <strong>Warning!</strong> There was a problem with internet connection. </div> <h6>Warning alert with heading</h6> <div class="alert alert-warning alert-dismissible fade show"> <button type="button" class="close" data-dismiss="alert"> × </button> <h5 class="alert-heading">Warning!</h5> Wrong credentials. </div> </div> </body> </html>
Producción:
Tipos de alertas de advertencia en Bootstrap
Ejemplo 2: En este ejemplo, utilizaremos las alertas de advertencia mediante el clic del botón. Cuando el usuario haga clic en el botón, se generará una alerta de advertencia.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Buttons and alerts</title>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src=
"https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap-alert.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#success').click(function (e) {
e.preventDefault()
$('#message').html(`
<div class="alert alert-success fade in">
<button type="button class="close close-alert"
data-dismiss="alert" aria-hidden="true">
×
</button>This is a success message
</div>`);
})
$('#warning').click(function (e) {
e.preventDefault()
$('#message').html(`
<div class="alert alert-warning fade in">
<button type="button" class="close close-alert"
data-dismiss="alert" aria-hidden="true">
×
</button> This is a warning message
</div>`);
});
});
</script>
</head>
<body>
<div class="container">
<h2>GeeksForGeeks</h2>
<p class="lead">
Warning Alert message using bootstrap
</p>
<p>
<form method="post">
<button type="button"
class="btn btn-success" id="success">
Success
</button>
<button type="button"
class="btn btn-warning" id="warning">
Warning
</button>
</form>
</p>
<div id="message"></div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por shantanujain18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA