Довідник CSS-класів.

Вивчення DXPR BuilderДовідникЕлементи та CSS

Вміст DXPR Builder використовує класи Bootstrap 5 поряд із кількома власних класів. Цей довідник перелічує ті, які ви найімовірніше використовуватимете або адресуватимете в CSS.

Додавання власних класів

  1. Виберіть елемент.
  2. Відкрийте More > Settings.
  3. У розділі General виберіть класи в полі HTML classes. Щоб ввести будь-яке ім’я класу, натисніть Edit as text і розділіть класи пробілами.

Класи сітки Bootstrap

Класи контейнерів

Клас Опис
.container Центрований контейнер фіксованої ширини
.container-fluid Контейнер на повну ширину

Класи рядків і стовпців

Клас Опис
.row Flex-контейнер для стовпців
.col-{n} Стовпець завширшки n/12 рядка
.col-sm-{n} Ширина стовпця на малих (576px+)
.col-md-{n} Ширина стовпця на середніх (768px+)
.col-lg-{n} Ширина стовпця на великих (992px+)
.col-xl-{n} Ширина стовпця на XL (1200px+)

Службові класи відступів Bootstrap

Поля

Клас Опис
.m-{0-5} Поле із усіх боків
.mt-{0-5} Поле зверху
.mb-{0-5} Поле знизу
.ms-{0-5} Поле на початку (ліворуч у LTR)
.me-{0-5} Поле в кінці (праворуч у LTR)
.mx-{0-5} Поле ліворуч і праворуч
.my-{0-5} Поле зверху й знизу

Внутрішні відступи

Клас Опис
.p-{0-5} Відступ із усіх боків
.pt-{0-5} Відступ зверху
.pb-{0-5} Відступ знизу
.ps-{0-5} Відступ на початку
.pe-{0-5} Відступ у кінці
.px-{0-5} Відступ ліворуч і праворуч
.py-{0-5} Відступ зверху й знизу

Службові класи тексту Bootstrap

Клас Опис
.text-start Текст, вирівняний ліворуч
.text-center Центрований текст
.text-end Текст, вирівняний праворуч
.fw-bold Жирний текст
.fw-light Текст легкого накреслення
.fst-italic Курсивний текст
.text-uppercase Текст великими літерами
.text-lowercase Текст малими літерами
.fs-1 до .fs-6 Розмір шрифту (1 найбільший)

Службові класи кольорів Bootstrap

Кольори тексту

Клас Опис
.text-primary Основний колір теми
.text-secondary Вторинний колір теми
.text-success Зелений (успіх)
.text-danger Червоний (небезпека/помилка)
.text-warning Жовтий (попередження)
.text-info Блакитний (інформація)
.text-muted Сірий приглушений текст
.text-white Білий текст

Кольори тла

Клас Опис
.bg-primary Основне тло
.bg-secondary Вторинне тло
.bg-success Зелене тло
.bg-danger Червоне тло
.bg-warning Жовте тло
.bg-info Блакитне тло
.bg-light Світло-сіре тло
.bg-dark Темне тло

Службові класи відображення Bootstrap

Клас Опис
.d-none Приховати елемент
.d-block Блокове відображення
.d-inline Рядкове відображення
.d-sm-none Приховати на малих+
.d-md-block Показати на середніх+
.d-lg-none Приховати на великих+

Класи DXPR Builder

Класи елементів

Клас Опис
.az-element Базовий клас на більшості елементів вмісту; Button і Image його не мають, тож адресуйте натомість .az-<type>.
.az-<type> По одному класу на тип елемента, як-от .az-text, .az-image або .az-images-carousel; Social Links використовує .st-social
.az-section Елемент розділу
.row Елемент рядка (Bootstrap); вміст зі старіших версій може також мати .az-row
.col-* Елемент стовпця (Bootstrap); вміст зі старіших версій може також мати .az-column

Класи анімацій

Анімації використовують іменування animate.css. Поки елемент анімується, він має:

Клас Опис
.animated Додається, доки триває анімація
.infinite Додається, коли Infinite увімкнено
Ім’я анімації, як-от .fadeIn Ефект Animation in або Animation out, що відтворюється

Класи варіантів

Клас Опис
.az-variant-container Контейнер А/Б-тесту, разом із .rl-experiment
.az-variant-wrapper Кожна гілка варіанта
.az-variant-original Оригінальна гілка (A)
.az-variant-1, .az-variant-2 Гілки B, C і так далі
.az-variant-active Гілка, показана зараз

Використання класів для адаптивної видимості

Поєднуйте службові класи відображення Bootstrap, щоб показувати чи ховати вміст на певних розмірах екрана:

<!-- Visible only on mobile -->
<div class="d-block d-md-none">Mobile content</div>

<!-- Visible only on desktop -->
<div class="d-none d-md-block">Desktop content</div>

Додайте ці класи в полі елемента HTML classes (у розділі General налаштувань), щоб керувати адаптивною видимістю.