Azulejos Bulma – Part 2 – Barcelona Geeks

Bulma es un marco CSS gratuito y de código abierto que se utiliza para crear aplicaciones web. En este artículo, veremos Bulma Tiles. El marco de Bulma proporciona elementos de mosaico para crear un diseño en forma de mosaicos de cuadrícula. Para crear primero un diseño de mosaico, usamos un mosaico antecesor que envuelve todos los demás mosaicos. Luego, si necesita que los mosaicos estén estructurados verticalmente, usamos la clase is-vertical (horizontal por defecto). Para agregar el contenido, solo use las clases is-parent y is-child . Los elementos de mosaico se pueden usar para crear un patrón de diseño bidimensional como Pinterest, etc.

Clase de azulejos de Bulma:

mosaico: esta es la única clase que se utiliza para crear un diseño 2-D para construir una estructura similar a un mosaico.

Sintaxis:

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

Ejemplo 1: El siguiente ejemplo ilustra los mosaicos 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" />
  <title>Document</title>
  <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 Tiles</h1>
 
    <!-- Tiles starts here -->
    <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 notification is-warning">
              <p class="title">Vertical Tile</p>
 
 
              <p class="subtitle">Topmost tile</p>
 
 
            </article>
            <article class="tile is-child notification is-dark">
              <p class="title">Second Tile</p>
 
 
              <p class="subtitle">Bottom tile</p>
 
 
            </article>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child notification is-danger">
              <p class="title">Middle Tile</p>
 
 
              <p class="subtitle">Middle second tile</p>
 
 
            </article>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child notification is-light">
            <p class="title">Wide tile</p>
 
 
            <p class="subtitle">Image inside Tile</p>
 
 
            <div class="content">
              <img
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png"
                alt="" />
            </div>
          </article>
        </div>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child notification is-info">
          <div class="content">
            <p class="title">Tallest tile</p>
 
            <p class="subtitle">
              Larger one as compared to other tiles
            </p>
 
            <div class="content"></div>
          </div>
        </article>
      </div>
    </div>
  </div>
</body>
 
</html>

Producción:

Azulejos Bulma

Ejemplo 2: Otro ejemplo que ilustra Bulma Tiles.

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 Tiles</h1>
       
      <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 notification is-info">
                <p class="title">Welcome to</p>
 
              </article>
              <article class="tile is-child notification is-danger">
                <p class="title">Learn, Tutorials, Contest</p>
 
                <p class="subtitle">Only for Geeks!</p>
 
              </article>
            </div>
            <div class="tile is-parent">
              <article class="tile is-child notification is-white">
                <p class="title">GeeksforGeeks</p>
 
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png" />
              </article>
            </div>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child notification is-light">
              <p class="title">Technical Articles and GBlog</p>
 
              <p class="subtitle">Read about Latest Technologies....</p>
 
              <div class="content">
              </div>
            </article>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child notification is-success">
            <div class="content">
              <p class="title">Explore</p>
 
              <div class="container has-text-justify">
                <p class="subtitle">Find Jobs</p>
 
                <p class="subtitle">Learn from Tutorials</p>
 
                <p class="subtitle">Practice coding</p>
 
                <p class="subtitle">Courses</p>
 
                <p class="subtitle">Learn Programming</p>
 
                <p class="subtitle">Participate in Coding contest</p>
 
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
  </body>
</html>

Producción:

Azulejos Bulma

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

Publicación traducida automáticamente

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

HTML

HTML

Deja una respuesta Cancelar la respuesta