Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño. Es un marco CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox . Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo.
En este artículo vamos a conocer la propiedad oculta que ofrece Bulma.
Ocultar en Bulma: El ocultar es la propiedad especial que ofrece Bulma en la que puedes ocultar cualquier contenido del usuario si cambia su resolución de pantalla. En palabras simples, si decide ocultar algunos datos del usuario, puede usar esta propiedad. Por ejemplo, si ha definido el punto de interrupción como visible solo para una resolución de escritorio grande, es decir, cuando el usuario reduce el tamaño de la resolución, el contenido desaparecerá.
La tabla de varias propiedades de piel que ofrece Bulma se enumeran a continuación:
| Clase |
Móvil Hasta 768px |
Tableta entre 769px y 1023px |
Escritorio entre 1024px y 1215px |
pantalla ancha entre 1216px y 1407px |
Full HD 1408px y superior |
|---|---|---|---|---|---|
| es-oculto-movil | Oculto | Visible | Visible | Visible | Visible |
| está-oculto-solo-tableta | Visible | Oculto | Visible | Visible | Visible |
| es-oculto-solo-escritorio | Visible | Visible | Oculto | Visible | Visible |
| está-oculto-pantalla ancha-solo | Visible | Visible | Visible | Oculto | Visible |
Clases para ocultar hasta o desde un punto de interrupción específico: en palabras simples, algunos desarrolladores usan el punto de interrupción para ocultar datos y otros los usan para mostrar datos.
| Clase |
Móvil Hasta 768px |
Tableta entre 769px y 1023px |
Escritorio entre 1024px y 1215px |
pantalla ancha entre 1216px y 1407px |
Full HD 1408px y superior |
|---|---|---|---|---|---|
| es-oculto-toque | Oculto | Oculto | Visible | Visible | Visible |
| está-oculta-tableta | Visible | Oculto | Oculto | Oculto | Oculto |
| es-oculto-escritorio | Visible | Visible | Oculto | Oculto | Oculto |
| está-oculto-pantalla ancha | Visible | Visible | Visible | Oculto | Oculto |
| está-oculto-fullhd | Visible | Visible | Visible | Visible | Oculto |
Otros ayudantes de visibilidad se enumeran a continuación:
- is-invisible: esta clase se utiliza para ocultar contenido.
- is-hidden: esta clase se utiliza para ocultar elementos.
- is-sr-only: esta clase se usa para ocultar elementos visualmente, pero mantiene el elemento disponible para que lo anuncie un lector de pantalla.
Ejemplo: en el siguiente ejemplo, tenemos que hacer uso de la clase is-hidden-mobile . Después de aplicar esta propiedad, cada vez que el usuario disminuya la resolución de la pantalla de su móvil, ocultará el contenido.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<style>
body
{
margin-left:20px;
margin-right:20px;
text-align:center;
}
</style>
</head>
<body>
<h2 style="color:green;font-size:30px">GeeksforGeeks </h2>
<div class="select is-multiple is-hidden-mobile">
<select multiple size="8" style="margin-left:20px">
<option value="Nallasopara">Nallasopara</option>
<option value="Borivali">Borivali</option>
<option value="kandivali">kandivali</option>
<option value="Dadar">Dadar</option>
<option value="Churchgate">Churchgate</option>
<option value="Miraroad">Miraroad</option>
<option value="Dahisar">Dahisar</option>
<option value="Malad">Malad</option>
<option value="Grant Road">Grant Road</option>
<option value="Virar">Virar</option>
<option value="Nashik">Nashik</option>
<option value="Devlali">Devlali</option>
</select>
</div>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/helpers/visibility-helpers/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA