Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
Columnas Bulma puede crear columnas para nuestra página web. Las columnas son una parte esencial de cualquier página web y, en general, puede ser difícil crearlas según sea necesario. Con Bulma, las columnas se crean de manera muy fácil y eficiente. La ventaja del framework Bulma es que responde por defecto. Esto significa que no tenemos que lidiar con ajustar la página web según el tamaño del dispositivo. El marco de Bulma se encarga de eso. Entendamos cómo se crean estas columnas en Bulma.
Para crear columnas, inicialmente, creamos un contenedor, se agrega una clase de columna . Podemos crear cualquier cantidad de columnas agregando repetidamente nuevas columnas en el contenedor.
Clase de columna Bulma:
- Columnas: esta clase se utiliza para agregar un contenedor de columnas .
- columna: esta clase se usa para agregar un elemento de columna dentro del contenedor de columnas . Los usuarios pueden agregar cualquier número de elementos de columna según sus necesidades.
Sintaxis:
<div class="columns">
<div class="column">
....
</div>
<div class="column">
....
</div>
</div>
Ejemplo 1: Veamos un ejemplo de cómo crear columnas. En el siguiente código, hemos agregado 4 columnas en nuestro contenedor. La etiqueta de estilo es opcional y se usa solo para hacer que las columnas sean coloridas.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale = 1"> <title>Bulma Columns</title> <!-- Adding Bulma --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> <script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"> </script> </head> <body> <br> <div class="content"> <h1 class="has-text-success"> GeeksforGeeks </h1> <strong>Bulma columns</strong> </div> <section class="section"> <!--Container created--> <div class="container"> <span class="title"> Popular Sports </span> </div> <br> <!--Column Class Created--> <div class="columns"> <div class="column1"> <!--1st Column Created--> <div class="notification is-primary"> Tennis </div> </div> <div class="column2"> <!--2nd Column Created--> <div class="notification is-danger"> Cricket </div> </div> <div class="column3"> <!--3rd Column Created--> <div class="notification is-info"> Football </div> </div> <div class="column4"> <!--4th Column Created--> <div class="notification is-link"> Hockey </div> </div> </div> </section> </body> </html>
Producción:
Otro hecho acerca de las columnas en Bulma es que la capacidad de respuesta de las columnas se produce desde los dispositivos de tableta en adelante. Esto significa que para los dispositivos móviles, las columnas se apilan una encima de la otra. Por lo tanto, usamos un modificador conocido como is-mobile para que las columnas respondan en los dispositivos móviles. La siguiente es la forma en que incluimos el modificador is-mobile en nuestro código HTML.
Sintaxis:
<div class="columns is-mobile"> <div class="column">....</div> <div class="column">....</div> </div>
Ejemplo 2: Echemos un vistazo al mismo programa que se realizó anteriormente, pero esta vez solo con dispositivos móviles. En el siguiente programa, el modificador is-mobile hace que las columnas respondan. Si no hubiéramos usado el modificador is-mobile , las columnas se habrían apilado una encima de la otra.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width= device-width, initial-scale = 1"> <!-- Linking Bulma --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> <script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"> </script> </head> <body> <br> <div class="content"> <h1 class="has-text-success"> GeeksforGeeks </h1> <strong>Bulma columns</strong> </div> <section class="section"> <div class="container"> <span class="title"> Superheroes </span> </div><br> <!-- is-mobile used for mobile devices--> <div class="columns is-mobile"> <div class="column"> <div class="notification is-link"> Batman </div> </div> <div class="column"> <div class="notification is-primary"> Flash </div> </div> <div class="column"> <div class="notification is-danger"> Superman </div> </div> <div class="column"> <div class="notification is-info"> Shazam </div> </div> </div> </section> </body> </html>
Producción:
Enlace de referencia: https://bulma.io/documentation/columns/basics/
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA