¿Cómo ocultar elementos en dispositivos pequeños en Twitter Bootstrap?

Twitter Bootstrap hace un uso extensivo de clases específicas para lograr todos los diversos tipos de funcionalidades.

  • Para ocultar elementos en cualquier tamaño de pantalla arbitrario , puede utilizar una clase Bootstrap .d-none específica .
  • Para tamaños de pantalla pequeños , puede modificarlo para usar la clase .d-sm-none
  • Para tamaños de pantalla extra pequeños , puede modificarlo para usar .d-none o .d-xs-none
  • Para dispositivos de pantalla mediana , puede modificarlo para usar .d-md-none

Enfoque básico: digamos que queremos ocultar un div en particular. Todo lo que tenemos que hacer es aplicar ese div a las clases específicas que necesitamos de acuerdo con nuestros requisitos . Los classNames se enumeraron arriba.

<div class="d-sm-none">hide on small screens</div>
<div class="d-xs-none">hide on extra small screens</div>
<div class="d-md-none">hide on medium screens</div>

Enfoque eficiente: digamos que queremos ocultar un botón «Haga clic aquí» en las pantallas de dispositivos pequeños. 

  • Simplemente apunte al elemento deseado .
  • Aplicar la clase “d-sm-none”
  • Para la visualización, se muestra debajo de las dos instancias: antes de aplicar el nombre de clase y después de aplicar el nombre de clase.
  • Antes de haber aplicado el className, podemos ver que el botón se ve claramente .
  • Tan pronto como aplicamos el className, el botón desaparece de los dispositivos de pantalla pequeña.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Hide elements in Small devices
        </title>
        <!-- Include bootstrap CDN CSS file-->
        <link rel="stylesheet" 
              href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
              integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
              crossorigin="anonymous" />
        <!-- Style to create button -->
        <style>
            .GFG {
                background-color: white;
                border: 2px solid black;
                color: green;
                padding: 5px 10px;
                text-align: center;
                display: inline-block;
                font-size: 20px;
                margin: 10px 30px;
                cursor: pointer;
            }
        </style>
    </head>
  
    <body>
        <h1>GeeksforGeeks</h1>
  
        <!-- Adding link to the button on 
             the onclick event -->
        <!-- Notice the .d-sm-none class that 
             hides the button on small devices-->
        <button class="GFG d-sm-none"
                onclick=
 "window.location.href = 'https://ide.geeksforgeeks.org';">
            Click Here
        </button>
    </body>
</html>

Salida (dispositivos móviles) :

Antes de aplicar la clase .d-sm-none:

Después de aplicar la clase .d-sm-none:

Publicación traducida automáticamente

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