CODE_BREAKERS Telegram 618
💻 Мануал 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.
👍21



tgoop.com/code_breakers/618
Create:
Last Update:

💻 Мануал 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.

BY Code Breakers | No-code solutions




Share with your friend now:
tgoop.com/code_breakers/618

View MORE
Open in Telegram


Telegram News

Date: |

Commenting about the court's concerns about the spread of false information related to the elections, Minister Fachin noted Brazil is "facing circumstances that could put Brazil's democracy at risk." During the meeting, the information technology secretary at the TSE, Julio Valente, put forward a list of requests the court believes will disinformation. Hashtags are a fast way to find the correct information on social media. To put your content out there, be sure to add hashtags to each post. We have two intelligent tips to give you: How to create a business channel on Telegram? (Tutorial) The administrator of a telegram group, "Suck Channel," was sentenced to six years and six months in prison for seven counts of incitement yesterday. When choosing the right name for your Telegram channel, use the language of your target audience. The name must sum up the essence of your channel in 1-3 words. If you’re planning to expand your Telegram audience, it makes sense to incorporate keywords into your name.
from us


Telegram Code Breakers | No-code solutions
FROM American