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 clase container en Bulma es el elemento para colocar el contenido en el centro de forma horizontal. En este artículo, discutiremos el comportamiento predeterminado del contenedor.
El comportamiento predeterminado del contenedor se activará desde el punto de interrupción del escritorio. Cuando el tamaño de la pantalla es igual a la pantalla panorámica o Full HD, el contenedor aumentará automáticamente su ancho máximo.
Nota: el ancho del contenedor viene dado por $dispositivo – (2 * $brecha)
- dispositivo: Es el tipo de dispositivo que estamos utilizando.
- gap: Es el valor por defecto 32px pero podemos modificarlo.
El comportamiento del contenedor se puede mostrar como
- escritorio: Tendrá un ancho máximo de 960 px.
- widescreen: Tendrá un ancho máximo de 1152 px.
- Full HD: Tendrá un ancho máximo de 1344 px.
Sintaxis:
<div class="container">
....
</div>
Ejemplo 1: el código siguiente muestra la clase de contenedor para el comportamiento predeterminado.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Container Default Behavior</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <center> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b class="is-size-4"> Bulma Default Container </b> </center> <div class="container"> <div class="has-background-primary" > <h2 class="has-text-white is-size-4"> Example of default behavior of Container </h2> <h2 class="has-text-white is-size-4"> It is centered in desktop and widescreens </h2> <h3 class="has-text-white is-size-4"> GeeksforGeeks </h3> </div> </div> </body> </html>
Producción:
Comportamiento predeterminado del contenedor Bulma
Ejemplo 2: si usamos la clase de modificador is-fluid , habrá un espacio de 32 px en ambos lados de la pantalla en cualquier ventana gráfica. Esto ayuda a comprender mejor la clase de contenedor .
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Container Default Behavior</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <center> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b class="is-size-4"> Bulma Default Container </b> </center> <div class="container is-fluid"> <div class="has-background-grey"> <h1> <strong class="has-text-white"> GeeksforGeeks </strong> </h1> <p class="has-text-white"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles</p> <p class="has-text-white"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </p> </div> </div> </body> </html>
Producción:
Comportamiento predeterminado del contenedor Bulma
Enlace de referencia: https://bulma.io/documentation/layout/container/#default-behavior
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA