Плитка Булма

Опубликовано: 13 Августа, 2022

Bulma — это бесплатный CSS-фреймворк с открытым исходным кодом, используемый для создания веб-приложений. В этой статье мы увидим Bulma Tiles. Платформа Bulma предоставляет элементы плитки для создания макета в виде плиток сетки. Сначала для создания макета плитки мы используем плитку-предка, которая оборачивает все остальные плитки. Затем, если вам нужно, чтобы плитки были структурированы вертикально, мы используем класс is-vertical (горизонтальный по умолчанию). Чтобы добавить контент, просто используйте классы is-parent и is-child . Элементы плитки можно использовать для создания двухмерного шаблона дизайна, такого как Pinterest и т. д.

Класс плитки Булма:

tile: это единственный класс, который используется для создания 2D-макета для построения мозаичной структуры.

Синтаксис:

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

Пример 1: Пример ниже иллюстрирует плитки 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>

Выход:

Пример 2: Еще один пример, иллюстрирующий плитку Bulma.

Выход:

Ссылка: https://bulma.io/documentation/layout/tiles/

Picked CSS

Плитка Булма

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ