La clase Bulma Variable Gap se usa para crear un espacio definido entre columnas, hay 9 modificadores de opciones en esta clase. Todas las clases se mencionan y describen a continuación. Esta clase se puede utilizar como ancho de columna.
Brecha variable de Bulma:
- is-0: esta clase elimina la brecha entre clases. Es similar a la clase Gapless .
- is-1: Esta clase crea un espacio entre la columna de 0.25rem.
- is-2: Esta clase crea un espacio entre la columna de 0.5rem.
- is-3: esta clase crea un espacio entre la columna de 0,75 rem y este es el valor predeterminado.
- is-4: Esta clase crea un hueco entre la columna de 1rem.
- is-5: Esta clase crea un espacio entre la columna de 1.25rem.
- is-6: Esta clase crea un espacio entre la columna de 1.5rem.
- is-7: Esta clase crea un espacio entre la columna de 1.75rem.
- is-8: Esta clase crea un hueco entre la columna de 2rem.
Nota: esta característica solo está disponible en navegadores que admiten variables CSS.
Ejemplo 1: El siguiente ejemplo ilustra la brecha variable en Bulma
HTML
<!DOCTYPE html> <html> <head> <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>Bulma Variable Gap</b> <br> <section class="section"> <div class="container"> <div class="columns"> <div class="column has-background-success"> First column </div> <div class="column is-0"></div> <div class="column has-background-primary"> Second column </div> <div class="column is-1"></div> <div class="column has-background-success"> Third column </div> <div class="column is-2"></div> <div class="column has-background-primary"> Fourth column </div> <div class="column is-3"></div> </div> </div> </section> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <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>Bulma Variable Gap</b> <br> <section class="section"> <div class="container"> <div class="columns"> <div class="column has-background-success"> First column </div> <div class="column is-1"></div> <div class="column has-background-primary"> Second column </div> <div class="column is-1"></div> <div class="column has-background-success"> Third column </div> <div class="column is-2"></div> <div class="column has-background-primary"> Fourth column </div> <div class="column is-2"></div> </div> </div> </section> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/columns/gap/#variable-gap
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA