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.
Con la ayuda de las clases de contenedores de pantalla ancha o fullhd , podemos tener el ancho completo hasta que haya puntos de interrupción. Cuando queremos eso en pantallas anchas, el contenido debe estar en ancho completo, entonces podemos usar estos modificadores de clase de contenedor para hacerlo.
Modificadores de clase de contenedor:
- is-widescreen : esta es la clase para hacer que el contenedor tenga el ancho completo hasta el punto de interrupción de pantalla ancha (punto de interrupción de pantalla ancha: 1216px)
- is-fullhd : esta es la clase para hacer que el contenedor tenga el ancho completo hasta el punto de interrupción FullHD (punto de interrupción FullHD: 1408px)
Sintaxis:
<div class="container is-widescreen">
<!-- Items -->
</div>
Ejemplo 1: El siguiente código demuestra el modificador is-widescreen .
HTML
<!DOCTYPE html> <html> <head> <title>Bulma container widescreen</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <b class="is-size-4">Bulma container widescreen</b> <div class="container is-widescreen"> <div class="" style="background-color:green;height:200px;" > <h3 style="color:white; size:30;">GeeksforGeeks1</h3> <h3 style="color:white; size:30;">GeeksforGeeks2</h3> <h3 style="color:white; size:30;">GeeksforGeeks3</h3> </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra el modificador is-fullhd .
HTML
<!DOCTYPE html> <html> <head> <title>Bulma container fullhd</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <b class="is-size-4">Bulma container fullhd</b> <div class="container is-fullhd"> <div class="" style="background-color:green;height:200px;"> <h3 style="color:white; size:30;">GeeksforGeeks1</h3> <h3 style="color:white; size:30;">GeeksforGeeks2</h3> <h3 style="color:white; size:30;">GeeksforGeeks3</h3> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/layout/container/#widescreen-or-fullhd-only
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA