Disposición de la sección de Bulma

En este artículo, veremos la sección de Bulma. Una sección es un contenedor básico que se utiliza para dividir el contenido de la página web en diferentes secciones. 

Clase Sección Bulma:

  • sección : esta clase de Bulma se usa para dividir la página web en diferentes secciones y tiene menos relleno.
  • section is-medium- Esta clase de Bulma se utiliza para dividir la página web en diferentes secciones en un tamaño mediano.
  • sección es-grande- Esta clase de Bulma se utiliza para dividir la página web en diferentes secciones en un tamaño grande.

Sintaxis:

<section class="section || 
   section is-medium || 
   section is-large">
   ......
</section>

Ejemplo 1: El siguiente ejemplo ilustra la sección en 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 has-background-primary">
    <h1 class="title">
      GeeksforGeeks
    </h1>
  
    <h2 class="subtitle">
      This is a Bulma 
      <strong>section</strong> 
      used for dividing the content 
      into various sections.
    </h2>
  </section>
</body>
  
</html>

Producción:

Ejemplo 2: El siguiente ejemplo ilustra los dos tamaños de la clase de sección en 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>
  
      <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-danger">
      <h1 class="title">Large size 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:

Referencia: https://bulma.io/documentation/layout/section/

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *