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 llevar a cabo su diseño.
El componente ‘seleccionar’ de un formulario no tiene un aspecto tan atractivo. Usando Bulma podemos diseñar elementos seleccionados del formulario de una manera mucho mejor simplemente agregando algunas clases Bulma simples. Los elementos selectos de Bulma están disponibles en diferentes colores, diferentes estilos, diferentes tamaños y diferentes estados.
Opciones de columna: se utiliza para diseñar diferentes tipos de diseños de columnas.
Categorías de opciones de columna:
- Alineación vertical: se usa para alinear sus columnas verticalmente, agregue el modificador is-vcentered al contenedor de columnas.
- Multilínea: se usa para agregar el modificador is-multiline y agregar más elementos de columna que cabrían en una sola fila.
- Columnas de centrado: se usa para crear un espacio horizontal alrededor de los elementos de la columna , también puede usarla centrada en el elemento de las columnas principales .
Ejemplo 1: en el siguiente código, hemos utilizado las columnas de centrado para crear un espacio horizontal alrededor de los elementos de la columna , también puede usar está centrado en el elemento de las columnas principales .
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> </head> <body> <h2 style="color:green;font-size:30px; text-align:center"> GeeksforGeeks </h2><br> <div class="columns is-mobile is-multiline is-centered"> <div class="column is-narrow"> <p class="bd-notification is-primary"> <code class="html">is-narrow</code><br/> <br/> Column 1 </p> </div> <div class="column is-narrow"> <p class="bd-notification is-primary"> <code class="html">is-narrow</code><br> <br/> Column 2 </p> </div> <div class="column is-narrow"> <p class="bd-notification is-primary"> <code class="html">is-narrow</code><br> <br/> Column 3 </p> </div> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente código muestra otras clases de modificadores como is-half junto con la clase de columna .
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> </head> <body> <h2 style="color:green;font-size:30px; text-align:center"> GeeksforGeeks </h2><br> <div class="columns is-mobile is-multiline is-centered"> <div class="column is-narrow"> <p class="bd-notification is-primary"> <code class="html">is-narrow</code><br><br/> Column 1 </p> </div> <div class="column is-narrow"> <p class="bd-notification is-primary"> <code class="html">is-narrow</code><br><br/> Column 2 </p> </div> <div class="column is-narrow"> <p class="bd-notification is-primary"> <code class="html">is-narrow</code><br><br/> Column 3 </p> </div> <div class="columns is-mobile is-centered"> <div class="column is-half"> <p class="bd-notification is-primary"> <code class="html">is-half</code><br> 1-half </p> </div> </div> <div class="columns is-mobile is-centered"> <div class="column is-half"> <p class="bd-notification is-primary"> <code class="html">is-half</code><br> 2-half </p> </div> </div> <div class="columns is-mobile is-centered"> <div class="column is-half"> <p class="bd-notification is-primary"> <code class="html">is-half</code><br> 3-half </p> </div> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/columns/options/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA