Visibilidad de elementos en bootstrap con ejemplos

Hay algunas situaciones en las que es necesario ocultar algún contenido en una página web sin afectar el diseño de la página. Bootstrap utiliza la propiedad de visibilidad de CSS y proporciona dos clases visibles e invisibles para controlar la visibilidad de un elemento en una página web.
Estas clases no afectan el diseño, es decir , los elementos invisibles seguirán ocupando espacio en el diseño. El contenido se ocultará tanto visualmente como para los lectores de pantalla.
clase invisible 
Esta clase de bootstrap se utiliza para ocultar un elemento de la página. En el siguiente programa, el encabezado h2 «Tutorial de Bootstrap» se oculta usando esta clase. Esta clase básicamente usa la propiedad de visibilidad de CSS y establece su valor en oculto. Aunque el título Tutorial de Bootstrapes invisible , seguirá ocupando espacio en el diseño.
 

HTML

<!DOCTYPE html>
<html>
<head>
  <title>GeeksForGeeks</title>
   
  <!-- Import Jquery -->
  <script src=
  "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
   
  <!-- Import Bootstrap CSS and JS files -->
  <link rel="stylesheet" 
   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src=
  "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
</head>
 
<body>
    <div class="container">
      <div class="jumbotron">
      
        <!-- Making invisible -->
        <h1 class="invisible">Bootstrap Tutorial</h1>  
         
         
<p>
            Bootstrap is the most popular HTML, CSS, and
            JS framework for developing responsive,
            mobile-first projects on the web.
        </p>
 
      </div>
       
       
<p>This is some text.</p>
       
       
<p>This is another text.</p>
       
    </div>
</body>
</html>

Producción: 
 

clase visible 
Esta clase de arranque se utiliza para mostrar un elemento oculto de la página. En el siguiente programa, el encabezado h2 «Tutorial de Bootstrap» se hace visible usando esta clase. Esta clase básicamente usa la propiedad de visibilidad de CSS y establece su valor en visible
La clase visible no tiene ningún efecto en el ejemplo siguiente porque los elementos son visibles de forma predeterminada, pero esta clase puede ser útil cuando un elemento previamente invisible debe hacerse visible. programáticamente. 
 

HTML

<!DOCTYPE html>
<html>
<head>
  <title>GeeksForGeeks</title>
   
  <!-- Import Jquery -->
  <script src=
  "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
   
  <!-- Import Bootstrap CSS and JS -->
  <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src=
  "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
</head>
 
<body>
    <div class="container">
      <div class="jumbotron">
      
        <!-- Making visible -->
        <h1 class="visible">GeeksForGeeks</h1>     
      
         
<p>
            Bootstrap is the most popular HTML, CSS,
            and JS framework for developing responsive,
            mobile-first projects on the web.
        </p>
 
         
      </div>
       
       
<p>This is some text.</p>
       
       
<p>This is another text.</p>
     
       
    </div>
</body>
</html>

Producción: 
 

Puntos importantes
 

  • Las clases visible e invisible de Bootstrap utilizan la propiedad de visibilidad de CSS para ocultar y mostrar elementos.
  • Los elementos ocultos seguirán ocupando espacio en el diseño. Esta clase solo oculta un elemento y no lo elimina.
  • Estas clases no afectan ni utilizan la propiedad de visualización de CSS de ninguna manera para ocultar o mostrar elementos.

Referencia: https://getbootstrap.com/docs/4.1/utilities/visibility/
 

Publicación traducida automáticamente

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