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.
El contenedor es el elemento que se utiliza para centrar el contenido horizontalmente en los tamaños de pantalla más grandes. En su mayoría, se usa como elemento secundario de la siguiente barra de navegación, héroe, sección o pie de página.
Cuando tenemos ventanas gráficas más grandes, necesitamos centrar los elementos y luego podemos usar las clases de contenedor para hacer esto. Hay algunas clases de contenedores disponibles como se muestra a continuación.
Clases de contenedores de Bulma:
- .container: tiene ancho completo en pantallas con un tamaño inferior a 1024px.
- .container.is-widescreen: tiene el ancho completo de la pantalla con un tamaño inferior a 1215 px.
- .container.is-fullhd: tiene un ancho completo en la pantalla por debajo de 1407px.
- .container.is-max-desktop: tiene un ancho completo solo en la pantalla de menos de 1024 px y después de ese ancho será de 960 px
- .container.is-max-widescreen: tiene un ancho completo en la pantalla por debajo de 1024 px y 960 px cuando el tipo de pantalla es de escritorio y luego 1152 px.
|
Tamaños de pantalla⇢ Clases ⇣ |
Por debajo de 1024px |
Escritorio Entre 1024px y 1215px |
pantallas anchas Entre 1216 px y 1407 px |
Pantalla de alta definición completa mayor que 1408 px |
|---|---|---|---|---|
| Clases | ancho máximo | ancho máximo | ancho máximo | ancho máximo |
| .envase | ancho completo | 960px | 1152px | 1344px |
| .container.is-pantalla ancha | ancho completo | ancho completo | 1152px | 1344px |
| .container.is-fullhd | ancho completo | ancho completo | ancho completo | 1344px |
| .container.is-max-desktop | ancho completo | 960px | 960px | 960px |
| .container.is-max-pantalla ancha | ancho completo | 960px | 1152px | 1152px |
Sintaxis:
<div class="container Container-Class">
....
</div>
Ejemplo 1: el código siguiente muestra la clase de contenedor . El ancho del contenedor estará por debajo del tamaño de pantalla de 1024 px, como se muestra a continuación.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Container</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 overview </b> <div class="container"> <div style="background-color:black; height:200px;"> <p style="color:white; size:30;"> The container width will be full below screen size of 1024px </p> <h3 style="color:white; size:30;"> GeeksforGeeks </h3> </div> </div> </body> </html>
Producción:
Descripción general del contenedor de Bulma
Ejemplo 2: El siguiente código usa la clase modificadora is-fullhd . El ancho del contenedor estará completo por debajo del tamaño de pantalla de 1407 px.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Container</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 overview </b> <div class="container is-fullhd"> <div class="" style="background-color:black; height:200px;"> <p style="color:white; size:30;"> Using is-fullhd class </p> <p style="color:white; size:30;"> The container width will be full below screen size of 1407px </p> <h3 style="color:white; size:30;"> GeeksforGeeks </h3> </div> </div> </body> </html>
Producción:
Descripción general del contenedor de Bulma
Referencia: https://bulma.io/documentation/layout/container/#overview
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA