En este artículo, aprenderemos sobre la modularidad de Bulma . Bulma consta de 39 archivos .sass para modificar los elementos HTML según diferentes requisitos. Ahora, estos archivos se pueden usar en cualquier momento y simplemente importando los archivos que necesita. Digamos que solo necesitamos usar los archivos del botón Bulma sass, entonces, para eso, podemos importar el código a continuación en su archivo my styles.scss :
@import "bulma/sass/utilities/_all.sass" @import "bulma/sass/elements/button.sass"
Una vez que importamos los archivos, podemos usar la clase .button y todos sus modificadores como se muestra a continuación.
Sintaxis:
// Add below files in mystyles.scss file @import "bulma/sass/utilities/_all.sass" @import "bulma/sass/grid/columns.sass" // Add below code in index.html in <body> tag. <button class="button"> Button </button>
Nota: asegúrese de vincular el archivo mystyles.css en su archivo HTML. Notarás cómo se crea el archivo mystyles.css, esto se puede lograr usando Bulma con node-sass. Ahora, a continuación tenemos dos ejemplos demostrados con dos ejemplos diferentes.
Ejemplo 1: El siguiente ejemplo ilustra la modularidad Bulma en la que se crean las columnas Bulma.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="css/mystyles.css" /> </head> <body> <div class="container"> <h1 class="title">GeeksforGeeks</h1> <h1 class="subtitle">Bulma Modularity</h1> <div class="columns"> <div class="column has-background-primary"> GFG Col 1 </div> <div class="column has-background-warning"> GFG Col 2 </div> <div class="column has-background-danger"> GFG Col 3 </div> <div class="column has-background-success"> GFG Col 4 </div> <div class="column has-background-link"> GFG Col 5 </div> </div> </div> </body> </html>
CSS
@charset "utf-8"; @import "../node_modules/bulma/bulma.sass"; @import "bulma/sass/grid/columns.sass"
Producción:
Modularidad de Bulma
Ejemplo 2: El siguiente ejemplo ilustra la modularidad de Bulma en la que se crean los botones de Bulma.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="css/mystyles.css" /> </head> <body> <div class="container"> <h1 class="title">GeeksforGeeks</h1> <h1 class="subtitle">Bulma Modularity</h1> <button class="button"> Log In </button> <button class="button is-primary"> Sign Up </button> <button class="button is-success"> Add </button> <button class="button is-danger"> Delete </button> </div> </body> </html>
CSS
@charset "utf-8"; @import "../node_modules/bulma/bulma.sass"; @import "bulma/sass/elements/button.sass"
Producción:
Modularidad de Bulma
Referencia: https://bulma.io/documentation/overview/modular
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA