Bulma es un framework CSS gratuito y de código abierto basado en flexbox. Viene con componentes prediseñados, lo que facilita el desarrollo de sitios web hermosos y receptivos, ya que no tenemos que diseñar todo desde cero. En este artículo, veremos los tamaños de columna de Bulma.
Existen tres categorías en Tamaños de Columna Bulma, sistema de 12 columnas, Offset y Columna Estrecha, todas ellas se describen brevemente a continuación:
Tamaños de columna de Bulma:
- Sistema de 12 columnas: Bulma nos proporciona un sistema de grilla receptivo en el que un contenedor se divide en 12 columnas, y podemos redimensionar nuestro contenido de acuerdo con las clases CSS proporcionadas por Bulma.
- Desplazamiento: el modificador de desplazamiento del marco Bulma se usa para agregar espaciado horizontal con el uso de valores de clase personalizados como «.is-offset-8» o «.is-offset-one-fourth».
- Columna estrecha: si desea que una columna solo ocupe el espacio que necesita, puede agregar el modificador is-narrow en esa columna. Las otras columnas se ajustarán y llenarán el espacio restante.
Sintaxis:
<div class="column Bulma-Column-Sizes-Type"> ... </div>
Los siguientes ejemplos ilustrarán los tamaños de columna de Bulma:
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Column Sizes</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <b class="is-size-4">Bulma Column Sizes</b> <br /> <strong>Bulma Narrow Column</strong> <div class="container is-fluid mt-6"> <div class="columns"> <div class="column is-narrow"> <div class="notification is-link"> Column with <code>is-narrow</code> modifier. It will take the width it needs </div> </div> <div class="column"> <div class="notification is-warning"> Normal Column. It will adjust itself to fill the row </div> </div> </div> <div class="columns"> <div class="column"> <div class="notification is-success"> Normal Column. It will adjust itself to fill the row </div> </div> <div class="column is-narrow"> <div class="notification is-danger"> Column with <code>is-narrow</code> modifier. It will take the width it needs </div> </div> </div> </div> <strong>Bulma Offset</strong> <div class="columns is-mobile"> <div class="column is-half is-offset-one-fifth has-background-primary title my-4 p-4"> This is column 1 with offset one fifth </div> </div> <div class="columns is-mobile"> <div class="column is-three-fifths is-offset-one-fourth has-background-primary title my-4 p-4"> This is column 2 with offset one fourth </div> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title> Bulma Column Sizes </title> <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b class="is-size-4"> Bulma Column Sizes </b> <br> <strong> Bulma 12 Column System </strong> <div class="container"> <div class="columns"> <div class="column is-12"> <div class="notification is-success"> is-12 </div> </div> </div> <!-- is-11 --> <div class="columns"> <div class="column is-11"> <div class="notification is-success"> is-11 </div> </div> <div class="column"> <div class="notification is-secondary"> 1 </div> </div> </div> <!-- is-10 --> <div class="columns"> <div class="column is-10"> <div class="notification is-success"> is-10 </div> </div> <div class="column"> <div class="notification is-secondary"> 2 </div> </div> </div> <!-- is-9 --> <div class="columns"> <div class="column is-9"> <div class="notification is-success"> is-9 </div> </div> <div class="column"> <div class="notification is-secondary"> 3 </div> </div> </div> <!-- is-8 --> <div class="columns"> <div class="column is-8"> <div class="notification is-success"> is-8 </div> </div> <div class="column"> <div class="notification is-secondary"> 4 </div> </div> </div> <!-- is-7 --> <div class="columns"> <div class="column is-7"> <div class="notification is-success"> is-7 </div> </div> <div class="column"> <div class="notification is-secondary"> 5 </div> </div> </div> <!-- is-6 --> <div class="columns"> <div class="column is-6"> <div class="notification is-success"> is-6 </div> </div> <div class="column"> <div class="notification is-secondary"> 6 </div> </div> </div> <!-- is-5 --> <div class="columns"> <div class="column is-5"> <div class="notification is-success"> is-5 </div> </div> <div class="column"> <div class="notification is-secondary"> 7 </div> </div> </div> <!-- is-4 --> <div class="columns"> <div class="column is-4"> <div class="notification is-success"> is-4 </div> </div> <div class="column"> <div class="notification is-secondary"> 8 </div> </div> </div> <!-- is-3 --> <div class="columns"> <div class="column is-3"> <div class="notification is-success"> is-3 </div> </div> <div class="column"> <div class="notification is-secondary"> 9 </div> </div> </div> <!-- is-2 --> <div class="columns"> <div class="column is-2"> <div class="notification is-success"> is-2 </div> </div> <div class="column"> <div class="notification is-secondary"> 10 </div> </div> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/columns/sizes/
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA