Bootstrap 5 | botón cerrar

Bootstrap 5 proporciona un nuevo componente que es un botón Cerrar que se puede usar para descartar contenido como modales y alertas. Se puede incluir en la página web usando bootstrap.js o bootstrap.min.js . Este componente se puede combinar con modelos, alertas y popovers. Los botones de cierre deshabilitados tienen eventos de puntero: ninguno; aplicado, evitando que se disparen los estados activo y flotante. 

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Close button
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        Close icon
        <button type="button" class="close"
            aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        <br/>
        Close disabled icon
        <button type="button" class="close"
            aria-label="Close" disabled>
            <span aria-hidden="true">×</span>
        </button>
    </div>
</body>
</html>

Producción:

Reference: https://v5.getbootstrap.com/docs/5.0/components/close-button/

Publicación traducida automáticamente

Artículo escrito por gurrrung 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 *