Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
Las columnas Bulma están diseñadas para trabajar con tamaños de pantallas móviles. Por lo general, se apila en la configuración predeterminada, pero cuando se aplica en los tamaños de pantalla del, se usa la clase is -desktop . En Bulma, podemos establecer diferentes tamaños de columna por punto de interrupción utilizando las clases que se indican a continuación. Los diferentes puntos de interrupción son móviles , tabletas , computadoras de escritorio , pantalla ancha y fullhd.
Bulma Diferentes tamaños de columna por punto de interrupción Clase:
El * en las clases dadas a continuación representa un nombre de punto de interrupción.
- es-[uno/dos/tres/cuatro]-cuartos-*: esta clase se utiliza para definir cuántos cuartos del área se ocuparán en el punto de corte dado.
- es-[uno/dos/tres/cuatro]-[tercero/cuarto]-*: esta clase se utiliza para especificar si el área ocupada será un cuarto o dos tercios, es decir, la cantidad fraccionaria en el punto de corte dado.
- is-half-*: esta clase se usa para especificar si la mitad del área está ocupada en el punto de interrupción dado.
Sintaxis:
<div class="columns is-mobile">
<div class="column is-three-quarters-mobile
is-two-thirds-tablet is-half-desktop
is-one-third-widescreen is-one-quarter-fullhd">
...
</div>
</div>
Ejemplo 1: El siguiente código demuestra el uso de las clases is-two-fours-mobile is-one-thirds-tablet is-half-desktop is-two-thirds-widescreen is-one-four-fullhd en una columna y no clases a los demás.
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> </head> <body> <center> <h1 style="color:green; font-size:2.5rem;"> GeeksforGeeks </h1> <h3 style="font-size:1.5rem; margin-bottom:2rem;"> Bulma Different column sizes per breakpoint </h3> </center> <div class="columns is-mobile"> <div class="column is-two-quarters-mobile is-one-thirds-tablet is-half-desktop is-two-thirds-widescreen is-one-quarter-fullhd" style="background-color:aquamarine;"> <p>1st Column</p> </div> <div class="column">2nd Column</div> <div class="column">3rd Column</div> <div class="column">4th Column</div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra el uso de las clases is-two-fours-mobile is-one-thirds-tablet is-half-desktop is-two-thirds-widescreen is-one-four-fullhd en una columna y es -tres cuartos-móvil es-dos-tercios-tableta es-mitad-escritorio es-un tercio-pantalla ancha es-un cuarto-fullhd al segundo.
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> </head> <body> <center> <h1 style="color:green; font-size:2.5rem;"> GeeksforGeeks </h1> <h3 style="font-size:1.5rem; margin-bottom:2rem;"> Bulma Different column sizes per breakpoint </h3> </center> <div class="columns is-mobile"> <div class="column is-two-quarters-mobile is-one-thirds-tablet is-half-desktop is-two-thirds-widescreen is-one-quarter-fullhd" style="background-color: aquamarine;"> <p>First Column</p> </div> <div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd" style="background-color: greenyellow;"> <p>Second Column</p> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/columns/responsiveness/# different -column-sizes-per-breakpoint
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA