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. En este artículo, aprenderemos cómo podemos hacer que un sitio web responda utilizando la propiedad show.
Bulma Show es una propiedad receptiva que ofrece el marco Bulma. Cuando cambia la resolución de la pantalla, el contenido se flexionará e intentará encajar en el sitio web para verse bien; de lo contrario, se ocultará y se mostrará en consecuencia.
Clases de Bulma Show:
- is-block: esta clase se utiliza para mostrar elementos en el bloque.
- is-flex: esta clase se usa para mostrar elementos en flex.
- is-inline: esta clase se utiliza para mostrar elementos en línea.
- is-inline-block: esta clase se utiliza para mostrar elementos en línea-bloque.
- is-inline-flex: esta clase se utiliza para mostrar elementos en línea-flex.
| Clase | Móvil Hasta 768px |
Tableta Entre 769px y 1023px |
Escritorio Entre 1024px y 1215px |
Pantalla ancha Entre 1216px y 1407px |
FullHD 1408px y superior |
|---|---|---|---|---|---|
| Flexionar | Sin alterar | Sin alterar | Sin alterar | Sin alterar | |
| es-flex-tablet-solo | Sin alterar | Flexionar | Sin alterar | Sin alterar | Sin alterar |
| es-flex-desktop-only | Sin alterar | Sin alterar | Flexionar | Sin alterar | Sin alterar |
| es-flex-panorámico-solo | Sin alterar | Sin alterar | Sin alterar | Flexionar | Sin alterar |
Clases para mostrar hasta o desde un punto de interrupción específico:
| Clase | Móvil Hasta 768px |
Tableta Entre 769px y 1023px |
Escritorio Entre 1024px y 1215px |
Pantalla ancha Entre 1216px y 1407px |
FullHD 1408px y superior |
|---|---|---|---|---|---|
| es-flex-touch | Flexionar | Flexionar | Sin alterar | Sin alterar | Sin alterar |
| es-flex-tablet | Sin alterar | Flexionar | Flexionar | Flexionar | Flexionar |
| es-flex-desktop | Sin alterar | Sin alterar | Flexionar | Flexionar | Flexionar |
| es-flex-pantalla ancha | Sin alterar | Sin alterar | Sin alterar | Flexionar | Flexionar |
| es-flex-fullhd | Sin alterar | Sin alterar | Sin alterar | Flexionar | Flexionar |
Sintaxis:
<element-name class="class-name">
...
</element-name>
Ejemplo 1: en el siguiente código, veremos el comportamiento de respuesta.
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"> </head> <body> <h2 class="has-text-centered has-text-success"> GeeksforGeeks </h2> <h3 class="has-text-centered "> A computer science portal for geeks </h3><br> <div class="columns is-flex-tablet-only "> <div class="column has-background-success has-text-black has-text-centered" id="gfg"> GFG </div><br> <div class="column has-background-success has-text-black has-text-centered" id="gfg"> GFG </div> </div> </body> </html>
Producción:
Ejemplo 2: en el siguiente código, veremos el comportamiento de respuesta.
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"> </head> <body> <h2 class="has-text-centered has-text-success"> GeeksforGeeks </h2> <h3 class="has-text-centered "> A computer science portal for geeks </h3><br> <div class="columns is-flex-tablet-only "> <div class="column has-background-success has-text-black has-text-centered" id="gfg"> 1 </div><br> <div class="column has-background-success has-text-black has-text-centered" id="gfg"> 2 </div><br> <div class="column has-background-success has-text-black has-text-centered" id="gfg"> 3 </div><br> <div class="column has-background-success has-text-black has-text-centered" id="gfg"> 4 </div><br> <div class="column has-background-success has-text-black has-text-centered" id="gfg"> 5 </div><br> <div class="column has-background-success has-text-black has-text-centered" id="gfg"> 6 </div><br> <div class="column has-background-success has-text-black has-text-centered" id="gfg"> 7 </div><br> <div class="column has-background-success has-text-black has-text-centered" id="gfg"> 8 </div><br> <div class="column has-background-success has-text-black has-text-centered" id="gfg"> 9 </div><br> </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