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