Майданчик Bootstrap Flex
Створюйте flex-макети на Bootstrap 5.3 візуально та копіюйте точні utility-класи: d-flex, justify-content, align-items, order, grow та інші.
-
Усе працює у вашому браузері: нічого не завантажується.
Задані класи застосовуються починаючи з цієї контрольної точки й вище. Перемикайте контрольні точки, щоб створювати адаптивні макети.
Про Майданчик Bootstrap Flex
Bootstrap Flex Playground дозволяє створювати flexbox-макети за допомогою справжніх утилітарних класів Bootstrap 5.3 замість чистого CSS. Налаштуйте контейнер (напрямок, перенесення, justify-content, align-items, gap) за допомогою сегментованих елементів керування, клацніть будь-який елемент, щоб задати його власні утиліти align-self, order, grow і shrink, і спостерігайте, як живий попередній перегляд миттєво перебудовується.
Перемикач контрольних точок робить цей інструмент чимось більшим за іграшку: оберіть sm, md, lg, xl або xxl, і класи, які ви встановлюєте з цієї точки, отримують адаптивний інфікс (justify-content-md-between, flex-lg-row) саме так, як система Bootstrap, орієнтована на мобільні пристрої, застосовує їх від цієї контрольної точки й вище. Додайте до 12 елементів, щоб змоделювати реалістичний компонент.
Коли макет виглядає правильно, скопіюйте згенерований HTML або лише класи контейнера й вставте їх безпосередньо у свій проєкт. Усе відбувається у вашому браузері, і нічого не завантажується на сервер.
Як використовувати Майданчик Bootstrap Flex
- Налаштуйте утиліти контейнера (напрямок, перенесення, justify-content, align-items і gap) за допомогою сегментованих елементів керування.
- Додайте або видаліть елементи (від 2 до 12), щоб відповідати вашому реальному компоненту.
- Клацніть елемент, щоб надати йому власні утиліти align-self, order чи розмірів flex.
- Перемикайте контрольні точки, щоб додати адаптивні варіанти, які застосовуються від sm, md, lg, xl чи xxl і вище.
- Перегляньте живий попередній перегляд, а потім скопіюйте згенерований HTML або класи контейнера.