Bulma es un framework 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.
La visibilidad es una de las clases de ayuda en Bulma que puede mostrar u ocultar el contenido según la ventana gráfica. Hay tantas clases que podemos usar para mostrar u ocultar cualquier contenido.
Mostrar el contenido: Las siguientes clases se utilizan para mostrar el contenido.
- es-bloque
- es-flex
- está en línea
- es-en línea-bloque
Clases auxiliares is-flex:
- is-flex-mobile : Flex se aplicará solo a móviles con un ancho inferior a 748 px.
- is-flex-tablet-only : Flex se aplicará a la tableta entre 769px y 1023px
- is-flex-desktop-only : Flex se aplicará al escritorio entre 1024px y 1215px
Ejemplo: El siguiente código demuestra la clase is-flex-mobile . Los desarrolladores pueden usar otras clases según la necesidad.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Visibility</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <strong>Bulma Visibility</strong> <br> <br> <div class="is-flex-mobile"> <p class="is-block">GeeksforGeeks text1 </p> <p class="is-block"> GeeksforGeeks text2</p> </div> </body> </html>
Producción:
- Cuando el tamaño de la pantalla es inferior a 748 px.
- Cuando el tamaño de la pantalla es superior a 748 px.
Ocultar clases de contenido: podemos usar las siguientes clases para ocultar el contenido de acuerdo con la ventana gráfica.
- is-hidden-mobile : Ocultará el contenido en móviles con un ancho inferior a 748 px.
- is-hidden-tablet-only : Ocultará el contenido en la tableta entre 769px y 1023px.
- is-hidden-desktop-only : Ocultará el contenido en el escritorio entre 1024px y 1215px.
- is-hidden-widescreen-only : Ocultará el contenido en pantalla ancha entre 1216px y 1407px.
Ejemplo: El siguiente código demuestra la clase is-hidden-mobile . Los desarrolladores pueden usar otras clases según la necesidad.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Visibility</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <strong>Bulma Visibility</strong> <br> <br> <div class="is-hidden-mobile"> <p class="is-block">GeeksforGeeks1</p> <p class="is-block">GeeksforGeeks2</p> </div> </body> </html>
Producción:
- Cuando el tamaño de la pantalla es inferior a 748 px (tamaño móvil), el contenido se ocultará.
- Cuando el tamaño de la pantalla es superior a 748 px, el contenido se mostrará a los usuarios.
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA