Azulejos Bulma 3 Columnas

Posted on by Rudeus Greyrat

En este artículo, veremos los mosaicos de 3 columnas de Bulma . Bulma framework utiliza elementos de mosaico para construir mosaicos en aplicaciones web. En Bulma, los elementos de mosaico se utilizan para construir un patrón de diseño 2D como puede haber visto en varios sitios web como Pinterest, etc. En Bulma, podemos crear mosaicos de 3 columnas y podemos crear una estructura de cuadrícula de tres columnas. 

Clase de mosaicos de 3 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 de los mosaicos de 3 columnas.

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

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <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 3 Column Tiles</h1>
      <!-- Tiles starts here -->
      <div class="tile is-ancestor">
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-success">
            <p class="title">Column One</p>
 
 
 
 
            <p class="subtitle">Hola! Hi...</p>
 
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-warning">
            <p class="title">Column Two</p>
 
 
 
 
            <p class="subtitle">What's up?</p>
 
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child
                          box has-background-dark">
            <p class="title has-text-white">Column Three</p>
 
 
 
 
            <p class="subtitle has-text-white">How are you??</p>
 
 
 
 
            <div class="content">
              <p class="has-text-white">
                Pleas tell me something about you and let's get
                to know each other.
              </p>
 
 
 
 
            </div>
          </article>
        </div>
      </div>
 
      <div class="tile is-ancestor">
        <div class="tile is-vertical is-8">
          <div class="tile">
            <div class="tile is-parent is-vertical">
              <article class="tile is-child
                              box has-background-info">
                <p class="title">Vertical Tiles</p>
 
 
 
 
                <p class="subtitle">Connect</p>
 
 
 
 
              </article>
            </div>
            <div class="tile is-parent">
              <article class="tile is-child
                              box has-background-white">
                <p class="title">GeekforGeeks</p>
 
 
 
 
                <p class="subtitle">Welcome Geek!</p>
 
 
 
 
                <figure class="image is-3by2">
                  <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"/>
                </figure>
              </article>
            </div>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child box
                            has-background-primary">
              <p class="title">Widest Column</p>
 
 
 
 
              <p class="subtitle">Need help?</p>
 
 
 
 
            </article>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box has-background-warning">
            <div class="content">
              <p class="title">Tallest Column</p>
 
 
 
 
              <p class="subtitle">Want to know something?</p>
 
 
 
 
              <div class="content">
                 
 
 
<p>
                  You can learn anything you want.
                  You can learn how to code, about
                  coding competitions and so on.
                  You can learn how to solve problems,
                  about problems and so on. You can learn
                  how to be a good programmer, about programming
                  and so on. You can learn how to be a good programmer,
                  about programming and so on, etc.
                </p>
 
 
 
 
                 
 
 
<p>
                  GFG also provides various courses on various topics.
                  Various internships are also available for students
                  like technical content writing, android development,
                  etc.
                </p>
 
 
 
 
                 
 
 
<p>
                  GeekforGeeks is the best place to learn about coding,
                  competitive programming, problems, etc.
                </p>
 
 
 
 
              </div>
            </div>
          </article>
        </div>
      </div>
      <div class="tile is-ancestor">
        <div class="tile is-parent">
          <article class="tile is-child box has-background-info">
            <p class="title">Side Left Column</p>
 
 
 
 
            <p class="subtitle">You made it here.</p>
 
 
 
 
            <div class="content">
               
 
 
<p>
                GFG has designed various programming courses including
                questions in order of difficulty and various other
                features.
              </p>
 
 
 
 
            </div>
          </article>
        </div>
        <div class="tile is-parent is-8">
          <article class="tile is-child box has-background-danger">
            <p class="title">Main Column</p>
 
 
 
 
            <p class="subtitle">Hope you find it helpful.</p>
 
 
 
 
            <div class="content">
               
 
 
<p>
                CP means solving well-defined problems by
                writing programs below the specified limits.
                On GFG practice platform, you need to write
                code under many restrictions, like code execution
                time and memory limits for your program.
              </p>
 
 
 
 
            </div>
          </article>
        </div>
      </div>
    </div>
</body>
</html>

Producción:

Bulma 3 columns Tiles

Azulejos Bulma 3 columnas

Ejemplo 2: Otro ejemplo de Azulejos Bulma 3 Columnas.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <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 3 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">Coding </p>
 
 
 
 
          <p class="subtitle">Learn to code</p>
 
 
 
 
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child box
                        has-background-success">
          <p class="title">Practice</p>
 
 
 
 
          <p class="subtitle">
            Level up your skills in coding
          </p>
 
 
 
 
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child box
                        has-background-danger">
          <p class="title has-text-white">Web Tech</p>
 
 
 
 
          <p class="subtitle has-text-white">
            HTML, CSS, JS
          </p>
 
 
 
 
          <div class="content">
            <p class="has-text-white">
              Learn about web development
              and other web frameworks
            </p>
 
 
 
 
          </div>
        </article>
      </div>
    </div>
    <div class="tile is-ancestor">
      <div class="tile is-vertical is-8">
        <div class="tile">
          <div class="tile is-parent is-vertical">
            <article class="tile is-child box
                            has-background-dark">
              <p class="title has-text-white">Tutorials</p>
 
 
 
 
              <p class="subtitle has-text-white">
                Learn from Tutorials at GFG
              </p>
 
 
 
 
            </article>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child box
                            has-background-white">
              <p class="title">GeekforGeeks</p>
 
 
 
 
              <p class="subtitle">Welcome Geek!</p>
 
 
 
 
              <figure class="image is-4by4">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png">
              </figure>
            </article>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-info ">
            <p class="title has-text-white">
              Participate in Coding Competitions
            </p>
 
 
 
 
            <p class="subtitle has-text-white">
              C++, Java, DSA , etc
            </p>
 
 
 
 
          </article>
        </div>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child box
                        has-background-primary">
          <div class="content">
            <p class="title has-text-white">
              Apply for Jobs</p>
 
 
 
 
            <p class="subtitle has-text-white">
              Get Hired in your dream company
            </p>
 
 
 
 
            <div class="content">
              <p class="has-text-white">
                Learn at GFG
              </p>
 
 
 
 
              <p class="has-text-white">
                Apply for jobs at various companies
              </p>
 
 
 
 
              <p class="has-text-white">
                Get Hired
              </p>
 
 
 
 
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</body>
</html>

Producción:

Bulma 3 columns Tiles

Azulejos Bulma 3 columnas

Referencia: https://bulma.io/documentation/layout/tiles/#3-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 *