Azulejos Bulma 4 columnas

Posted on by Rudeus Greyrat

En este artículo, veremos Azulejos de 4 Columnas de Bulma. Para crear una estructura similar a una cuadrícula en su aplicación web, el marco de Bulma proporciona elementos de mosaico. Estos elementos se usan para construir un patrón de diseño 2D como Pinterest, etc. En Bulma, también podemos crear mosaicos de 4 columnas que se pueden usar donde sea necesario construir un sistema de cuadrícula de 4 columnas. 

Clase de mosaicos de 4 columnas de Bulma: no hay una clase definida para crear 4 columnas en Bulma, simplemente necesitamos poner 4 div dentro de la clase principal.

Sintaxis: a continuación se muestra la sintaxis que muestra los mosaicos de 4 columnas.

<div class="tile is-ancestor">
    <div class="tile is-parent">
        <div class="tile is-child">
        ....
        </div>    
    </div>
    <div class="tile is-parent">
        <div class="tile is-child">
        ....
        </div>    
    </div>
    <div class="tile is-parent">
        <div class="tile is-child">
        ....
        </div>    
    </div>
    <div class="tile is-parent">
        <div class="tile is-child">
        ....
        </div>    
    </div>
</div>

Ejemplo 1: El siguiente ejemplo ilustra los mosaicos de 4 columnas de Bulma 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bulma 4 columns Tiles</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/>
</head>
<body>
    <div class="content container has-text-centered">
      <h1 class="title has-text-success">GeekforGeeks</h1>
      <h1 class="subtitle">Bulma 4 Column Tiles</h1>
 
      <!-- Tiles starts here -->
      <div class="tile is-ancestor">
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-warning">
            <p class="title">Tile One</p>
 
 
 
            <p class="subtitle">Subtitle</p>
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-info">
            <p class="title">Tile Two</p>
 
 
 
            <p class="subtitle">Subtitle</p>
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-danger">
            <p class="title">Tile Three</p>
 
 
 
            <p class="subtitle">Subtitle</p>
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-primary">
            <p class="title">Tile Four</p>
 
 
 
            <p class="subtitle">Subtitle</p>
 
 
 
          </article>
        </div>
      </div>
 
      <div class="tile is-ancestor">
        <div class="tile is-vertical is-9">
          <div class="tile">
            <div class="tile is-parent">
              <article class="tile is-child
                              box has-background-success">
                <p class="title">Tile Five</p>
 
 
 
                <p class="subtitle">Subtitle</p>
 
 
 
                <div class="content">
                </div>
              </article>
            </div>
            <div class="tile is-8 is-vertical">
              <div class="tile">
                <div class="tile is-parent">
                  <article class="tile is-child box
                                  has-background-dark">
                    <p class="title has-text-white">
                      Tile Six</p>
 
 
 
                    <p class="subtitle has-text-white">
                      Subtitle</p>
 
 
 
                  </article>
                </div>
                <div class="tile is-parent">
                  <article class="tile is-child box
                                  has-background-warning">
                    <p class="title">
                      Tile Seven</p>
 
 
 
                    <p class="subtitle">
                      Subtitle</p>
 
 
 
                  </article>
                </div>
              </div>
              <div class="tile is-parent">
                <article class="tile is-child box
                                has-background-danger">
                  <p class="title">
                    Tile Eight</p>
 
 
 
                  <p class="subtitle">
                    Subtitle</p>
 
 
 
                </article>
              </div>
            </div>
          </div>
          <div class="tile">
            <div class="tile is-8 is-parent">
              <article class="tile is-child box
                              has-background-info">
                <p class="title">
                  Tile Nine</p>
 
 
 
                <p class="subtitle">
                  Subtitle</p>
 
 
 
                <div class="content">
                </div>
              </article>
            </div>
            <div class="tile is-parent">
              <article class="tile is-child box
                              has-background-success">
                <p class="title">Tile Ten</p>
 
 
 
                <p class="subtitle">Subtitle</p>
 
 
 
                <div class="content">
                </div>
              </article>
            </div>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box">
            <div class="content">
              <p class="title has-text-success">
                GeeksforGeeks
              </p>
 
 
 
              <p class="subtitle">Tile Eleven</p>
 
 
 
              <div class="content">
                <figure class="image is-4by4">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png">
                  </figure>
                   
 
<p>
                    Learn about web development
                    and other web frameworks
                  </p>
 
 
 
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
</body>
</html>

Producción:

Ejemplo 2: Otro ejemplo que ilustra los mosaicos de 4 columnas de Bulma 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bulma 4 columns Tiles</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/>
</head>
<body>
    <div class="content container has-text-centered">
      <h1 class="title has-text-success">GeekforGeeks</h1>
      <h1 class="subtitle">Bulma 4 Column Tiles</h1>
 
      <!-- Tiles starts here -->
      <div class="tile is-ancestor">
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-light">
            <p class="title">PRACTICE</p>
 
 
 
            <p class="subtitle">
              Practice your coding knowledge
            </p>
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-success">
            <p class="title">CODING COMPETITIONS</p>
 
 
 
            <p class="subtitle">
              Participate in programming competitions
            </p>
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-warning">
            <p class="title">JOBS</p>
 
 
 
            <p class="subtitle">
              Find and apply for your favourite jobs
            </p>
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-info">
            <p class="title">GBLOGS</p>
 
 
 
            <p class="subtitle">
              All tech related blogs</p>
 
 
 
          </article>
        </div>
      </div>
 
      <div class="tile is-ancestor">
        <div class="tile is-vertical is-8">
          <div class="tile">
            <div class="tile is-parent">
              <article class="tile is-child box
                              has-background-dark">
                <p class="title has-text-white">TUTORIALS</p>
 
 
 
                <p class="subtitle has-text-white">
                  Java, C++, Python, etc</p>
 
 
 
                <div class="content">
                </div>
              </article>
            </div>
            <div class="tile is-8 is-vertical">
              <div class="tile">
                <div class="tile is-parent">
                  <article class="tile is-child
                                  box has-background-danger">
                    <p class="title">CS SUBJECTS</p>
 
 
 
                    <p class="subtitle">
                      OS, DBMS, CN, SQL
                    </p>
 
 
 
                  </article>
                </div>
                <div class="tile is-parent">
                  <article class="tile is-child
                                  box has-background-primary">
                    <p class="title">WEB TECHNOLOGIES</p>
 
 
 
                    <p class="subtitle">
                      HTML, CSS, JS, React, BootStrap
                    </p>
 
 
 
                  </article>
                </div>
              </div>
              <div class="tile is-parent">
                <article class="tile is-child
                                box has-background-warning">
                  <p class="title">DSA</p>
 
 
 
                  <p class="subtitle">
                    Learn about Data Structures and Algorithms
                  </p>
 
 
 
                </article>
              </div>
            </div>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box">
            <div class="content">
              <p class="title has-text-success">GeeksforGeeks</p>
 
 
 
              <p class="subtitle">Tile Eleven</p>
 
 
 
              <div class="content">
                <figure class="image is-4by4">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png">
                  </figure>
                   
 
<p>
                    Learn about web development
                    and other web frameworks
                  </p>
 
 
 
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
</body>
</html>

Producción:

Bulma 4 columns Tiles

Azulejos Bulma 4 columnas

Referencia: https://bulma.io/documentation/layout/tiles/#4-columns

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 *