UI-контейнеры Blaze Basic Grid

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

В этой статье мы рассмотрим базовую сетку Container в пользовательском интерфейсе Blaze. Blaze UI — это бесплатный набор инструментов пользовательского интерфейса с открытым исходным кодом для создания отличного веб-сайта. Он предоставляет вам различные функции, такие как отзывчивость, настраиваемые компоненты и т. д. Сетка — очень популярный способ создания адаптивного макета, он очень прост в использовании и гибок. Для создания базовой сетки контейнера в пользовательском интерфейсе Blaze используются два класса, которые обсуждаются ниже.

Базовые классы сетки Blaze UI Containers:

.o-grid: этот класс используется для создания сетки в пользовательском интерфейсе Blaze.
.o-grid__cell: этот класс используется для создания ячейки сетки в пользовательском интерфейсе Blaze.

Синтаксис:

<div class="o-container o-container--medium 
   o-grid o-grid--demo">
  <div class="o-grid__cell">
    <div class="o-grid-text">....</div>
  </div>
  
  <div class="o-grid__cell">
    <div class="o-grid-text">....</div>
  </div>
  
  <div class="o-grid__cell">
    <div class="o-grid-text">....</div>
  </div>
</div>

Пример 1: Пример ниже демонстрирует базовую сетку в контейнере.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Blaze UI</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"
/>
</head>
  
<body>
    <div class="u-centered">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h2>Container Basic Grid in Blaze UI</h2>
    </div>
  
    <div class="o-container o-container--xlarge
               o-grid o-grid--demo">
        <div class="o-grid__cell" 
             style="background-color: aqua;">
            <div class="o-grid-text">Courses</div>
        </div>
  
        <div class="o-grid__cell" 
             style="background-color: yellow;">
            <div class="o-grid-text">Jobs</div>
        </div>
  
        <div class="o-grid__cell" 
             style="background-color: tomato;">
            <div class="o-grid-text">
                  Coding Competitions
              </div>
        </div>
    </div>
</body>
  
</html>

Выход:

Пример 2: Пример ниже демонстрирует базовую сетку в контейнере с использованием компонентов ввода и кнопок.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Blaze UI</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
</head>
  
<body>
    <div class="u-centered">
      <h1 style="color: green">GeeksforGeeks</h1>
      <h2>Container Basic Grid in Blaze UI</h2>
    </div>
  
    <div class="o-container o-container--xlarge 
                o-grid o-grid--demo">
        <div class="o-grid__cell" style=
             "background-color: tomato; padding: 10px;">
          <h2 class="o-grid-text">Email</h2>
          <input class="c-field" placeholder=
                 "Enter your Email" type="text" />
        </div>
  
        <div class="o-grid__cell" style=
             "background-color: lightgreen; padding: 10px;">
          <h2 class="o-grid-text">Password</h2>
          <input class="c-field" placeholder=
                 "Enter your password" type="password" />
        </div>
  
        <div class="o-grid__cell o-grid--bottom" 
          style="background-color: lightcyan; padding: 10px;">
          <h2 class="o-grid-text">Sign Up</h2>
          <button type="button" class="c-button c-button--rounded 
            c-button--ghost c-button--success">
            Sign Up
          </button>
        </div>
    </div>
</body>
  
</html>

Выход:

Ссылка: https://www.blazeui.com/objects/grid

Picked Web технологии CSS

UI-контейнеры Blaze Basic Grid

HTML

HTML

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