Header Ads Widget

Ticker

6/recent/ticker-posts

Botón de cierre de Bootstrap 5 por ejemplo

 Bootstrap 5 viene con un nuevo componente que se puede usar para agregar un botón de cierre para descartar otros componentes descartables como ventanas emergentes, modales y alertas.

Necesita incluir el bootstrap.jsarchivo para que este componente funcione.

Nota : En nuestro tutorial anterior de Bootstrap 5 , hemos configurado un entorno para el desarrollo de Bootstrap 5 usando Gulp 4 y Sass.

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            Bootstrap 5 Close Button Example 
        </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> 
        <div class="container mt-3">  
            Close icon 
            <button type="button"
                    class="close"
                    aria-label="Close"> 
                <span aria-hidden="true">×</span> 
            </button> 
            <br /> 

            Disabled Close icon 
            <button type="button"
                    class="close"
                    aria-label="Close"
                    disabled> 
                <span aria-hidden="true">×</span> 
            </button> 
        </div> 
    </body> 
</html> 

Conclusión

Bootstrap es un marco popular de código abierto que proporciona componentes prediseñados y permite a los diseñadores y desarrolladores web de todos los niveles crear rápidamente interfaces de usuario receptivas y móviles. La última versión de Bootstrap - Bootstrap 5 trae muchas características nuevas, como el botón de cierre. En este ejemplo, hemos visto cómo usar el botón de cierre de Bootstrap 5 para descartar componentes como ventanas emergentes, modales y alertas.


Publicar un comentario

0 Comentarios