Arranque 4 | Alertas

Posted on by Rudeus Greyrat

A menudo vemos ciertas alertas en algunos sitios web antes o después de completar una acción. Estos mensajes de alerta son textos resaltados que es importante tener en cuenta al realizar un proceso. Bootstrap permite mostrar estos mensajes de alerta en el sitio web utilizando clases predefinidas.

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.

Sintaxis:

<div class="alert> Contents... <div>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Alerts</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
    <div class="container">
        <div class="alert alert-success">
            <strong>Success alert!</strong>
        </div>
        <div class="alert alert-info">
            <strong>Info alert!</strong>
        </div>
        <div class="alert alert-warning">
            <strong>Warning alert!</strong>
        </div>
        <div class="alert alert-danger">
            <strong>Danger alert!</strong>
        </div>
        <div class="alert alert-primary">
            <strong>primary alert!</strong>
        </div>
        <div class="alert alert-secondary">
            <strong>Secondary alert!</strong>
        </div>
        <div class="alert alert-light">
            <strong>Light alert!</strong>
        </div>
        <div class="alert alert-dark">
            <strong>Dark alert!</strong>
        </div>
    </div>
</body>
</html>

Producción:

Alertas de cierre: la clase .alert-dismissible se usa dentro de la clase .container para cerrar el mensaje de alerta. Luego use class=”close” y data-dismiss=”alert” para vincular un elemento de botón.

Sintaxis:

<div class="alert alert_type alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">x</button>
    Alert message
<div>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Alerts</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
    <div class="container">
        <div class="alert alert-success alert-dismissible">
            <strong>Success alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-info alert-dismissible">
            <strong>Info alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-warning alert-dismissible">
            <strong>Warning alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-danger alert-dismissible">
            <strong>Danger alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-primary alert-dismissible">
            <strong>primary alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-secondary alert-dismissible">
            <strong>Secondary alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-light alert-dismissible">
            <strong>Light alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-dark alert-dismissible">
            <strong>Dark alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
    </div>
</body>
</html>

Producción:

Alertas animadas: las clases .fade y .show se utilizan para agregar el efecto de desvanecimiento de la animación al cerrar el mensaje de alerta.

Sintaxis:

<div class="alert alert_type alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">x</button>
    Alert message
<div>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Alerts</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
    <div class="container">
        <div class="alert alert-success alert-dismissible fade show">
            <strong>Success alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-info alert-dismissible fade show">
            <strong>Info alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-warning alert-dismissible fade show">
            <strong>Warning alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-danger alert-dismissible fade show">
            <strong>Danger alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-primary alert-dismissible fade show">
            <strong>primary alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-secondary alert-dismissible fade show">
            <strong>Secondary alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-light alert-dismissible fade show">
            <strong>Light alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
        <div class="alert alert-dark alert-dismissible fade show">
            <strong>Dark alert!</strong>
            <button type="button" class="close"
                data-dismiss="alert">
                ×
            </button>
        </div>
    </div>
</body>
</html>

Producción:


Supported Browser:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *