💻 Мануал Bubble для ноукодера: настройка адаптивности

Мы продолжаем рассказывать об одном из самых мощных No-code инструментов — Bubble. Если вы вдруг пропустили наши предыдущие посты на эту тему, то их можно прочитать по тегу #code_breakers_мануал_bubble. А сегодня мы расскажем про настройку адаптивности.

Настройка адаптивности
Responsive Engine — движок для настройки адаптивности. Он помогает No-code разработчикам легче прорабатывать правила адаптивности IT-проектов для разных девайсов и размеров экранов.

Responsive Engine позволяет настраивать минимальные и максимальные размеры элементов по умолчанию и относительно размеров экрана, поля и отступы, выравнивание, положение элементов. Настройка происходит через редактор свойств во вкладке Layout.

Давайте разберём, как это работает.

💭 Выравнивание
Адаптивность начинается с настройки группы — контейнера. Внутри контейнера задаются правила выравнивания элементов — в колонку, в строку, выравнивание относительно родительского элемента, фиксированное положение. Внутри контейнеров тоже можно создавать контейнеры и выставлять каждому свои правила адаптивности. К примеру, есть большой контейнер с правилами настроек колонка — в нём элементы выстраиваются сверху вниз. Внутри большого колончатого контейнера могут быть другие контейнеры. Внутри них задаются свои правила адаптивности — к примеру, в строку, тогда элементы выстроятся горизонтально.

💭 Поля и отступы
Также отдельно для каждого контейнера задаются поля и отступы — margins и paddings, в дизайнерской среде прижились англицизмы марджины и паддинги. Они настраиваются в пикселях. Вы можете отдельно настраивать верхние и нижние, правые и левые поля и отступы. Правилам настройки отступов подчинятся все элементы в одном контейнере.

💭 Минимальные и максимальные размеры
Если вы задаёте элементу эти параметры, то можете управлять его отображением относительно размеров экранов, на которых будет открываться приложение. Допустим, у вас есть изображение на стартовом экране, которое будет лишним на мобильном экране и занимать там слишком много места. Вы можете задать правило уменьшения размеров изображения при достижении экранов определённой ширины или вовсе задать правило делать элемент невидимым при определённом размере экрана.

➖➖➖➖➖➖➖➖➖➖➖➖➖

Если вы хотите освоить один из самых востребованных инструментов в сфере No-code разработки и быстро начать зарабатывать на новом навыке, — приходите к нам на курс «Разработка веб-приложений на Bubble». Стартуем уже завтра, 13 сентября!

💻 Хочу на курс по Bubble: codebreakers.tech/bubble

Реклама. ИП Радзиевская М.В. ИНН 263402002977. Erid: 2Ranyo1K3Ck.