Arranque | Cerrar icono para descartar contenido con ejemplos

El ícono de cerrar en bootstrap es una utilidad que se usa para descartar cualquier contenido (por ejemplo, Alertas, Modales, Popovers). Está representado por un icono genérico de cruz/cerrar.
A continuación se muestra un código HTML de muestra que incluye un icono de cierre para descartar contenido en el arranque: 

html

<!doctype html>
<html>
    <head>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">       
         
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js,
             then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <title>Close Icon!</title>
    </head>
     
    <body class="container mt-5">
         
        <!--Close Icon-->
        <button type="button" class="close">
        <span>×</span>
        </button>
     
    </body>
</html>                   

Nota: El atributo de descarte de datos se puede usar con una etiqueta de botón para apuntar al componente a descartar, como un modal o una alerta.
 

Cerrar icono para descartar Alerta

Ejemplo:  

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
         
        <!-- Include JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 
        <style media="screen">
            h1{
            color:green;
            font-weight: bold;}
        </style>
         
        <title>Close Icon!</title>
    </head>
     
    <body class="container">
        <h1>This is GeeksforGeeks!</h1>
         
        <!--Alert-->
        <div class="alert alert-success alert-dismissible
            fade show w-50" role="alert">
             
            <strong>Hello geeks!</strong>
             
            <!--Close Icon-->
            <button type="button" class="btn close"
                data-dismiss="alert" aria-label="Close">
                 
                <span aria-hidden="true">×</span>
            </button>
        </div>
    </body>
</html>                   

Salida: 
Antes: 
 

Después: 
 

Cerrar icono para descartar Modal

Ejemplo:  

html

<!DOCTYPE html>
<html>
    <head>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
         
        <style media="screen">
            h1{
            color:green;
            font-weight: bold;}
        </style>
         
        <title>Close Icon!</title>
         
        <!-- Include JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </head>
     
    <body class="container mt-5">
         
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-success"
            data-toggle="modal" data-target="#geekymodal">
            Click here to launch modal!
        </button>
         
        <!-- Modal -->
        <div class="modal fade" id="geekymodal"
            tabindex="-1" role="dialog" aria-labelledby="geekymodal"
                aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                         
                        <h1 class="modal-title">
                            GeeksforGeeks!
                        </h1>
                         
                        <!--Close Icon-->
                        <button type="button" class="btn close"
                            data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                     
                    <div class="modal-body">
                        Hey geeks, You're Welcome!
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>                   

Salida: 
Antes: 
 

Después: 
 

Navegador compatible:

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

Publicación traducida automáticamente

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