En este artículo, veremos los tamaños de sección de Bulma. En Bulma, hay dos tipos de tamaños disponibles que dividen el contenido de la página web en diferentes secciones con diferentes espacios/rellenos.
Bulma Sección Tamaños clase:
- is-medium- Esta clase de Bulma se utiliza para dividir el contenido de la página web en diferentes secciones en un espaciado medio.
- es-grande- Esta clase de Bulma se utiliza para dividir el contenido de la página web en diferentes secciones en un espacio grande.
Sintaxis:
// For medium spacing
<section class="section is-medium">
...
</section>
// For Large spacing
<section class="section is-large">
...
</section>
Ejemplo: El siguiente ejemplo ilustra las secciones Bulma is-medium y is-large.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <section class="section is-medium has-background-info"> <h1 class="title"> GFG Medium section </h1> <h2 class="subtitle"> This is a Bulma <strong>Medium section</strong> used for dividing the content into various sections. </h2> </section> <section class="section is-large has-background-success"> <h1 class="title"> GFG Large section </h1> <h2 class="subtitle"> This is a Bulma <strong>Large section</strong> used for dividing the content into various sections. </h2> </section> </body> </html>
Producción:
Ejemplo 2: Otro ejemplo para demostrar los tamaños de sección de Bulma.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/> </head> <body> <section class="section is-medium has-background-warning"> <h1 class="title"> Medium size section </h1> <div class="columns p-4"> <div class="column has-text-white has-background-primary p-4"> Java </div> <div class="column has-text-white has-background-info p-4"> C++ </div> <div class="column has-text-white has-background-danger p-4"> Python </div> <div class="column has-text-dark has-background-light p-4"> C# </div> </div> </section> <section class="section is-large has-background-danger"> <h1 class="title"> Large size section </h1> <div class="columns p-4"> <div class="column has-text-white has-background-primary p-4"> Java </div> <div class="column has-text-white has-background-info p-4"> C++ </div> <div class="column has-text-dark has-background-warning p-4"> Python </div> <div class="column has-text-dark has-background-light p-4"> C# </div> </div> </section> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/layout/section/#sizes
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA