# 3.1 Основные принципы

Визуальный редактор Bubble основан на принципе What You See Is What You Get (WYSIWYG - что ты видишь, то и получишь). Вы можете располагать элементы как угодно с точностью до пикселя, и ваше приложение так и будет выглядеть во время работы. Существуют несколько ключевых вещей, которые нужно иметь в виду при создании интерфейса.

## Отношения предок-потомок

Некоторые элементы могут быть контейнерами (они находятся в разделе "контейнер"/"container" на панели "Новый элемент"/"New Element") и у всех элементов Bubble есть родительский элемент. Страница сама по себе - родительский элемент верхнего уровня, и она является родителем для всех элементов на странице. Чтобы нарисовать элемент внутри контейнера, наведите курсор на контейнер и вы увидите, что его границы выделились красным. Когда элемент находится внутри контейнера, его поведение соответствует родительскому элементу и в редакторе и в рабочем режиме. Например, если вы двигаете элементы в редакторе, потомок будет находиться на том же месте относительно родителя. В рабочем режиме, если вы скрываете родителя, любой элемент внутри контейнера соответственно будет скрытым. Перетаскивание элемента позволяет изменить его родительский элемент.

Дерево элементов слева позволяет вам видеть структуру страницы, а также показывать/скрывать элементы для редактирования и лучшей их организации. Многие элементы по умолчанию скрыты, а если вы хотите их отобразить чтобы внести изменения, нужно нажать на иконку глаза чтобы показать элемент (также отобразятся все скрытые родительские элементы, если это необходимо).

![](https://manual.bubble.is/assets/Desktop%202017-03-07%20at%206.27.14%20PM.png)

У дерева элементов два режима. Вы можете либо отобразить все элементы на странице в виде дерева с предками и потомками, либо показывать только те элементы, которые можно скрыть. Скрываемые элементы - это те, которые при загрузке страницы отображаются скрытыми, то есть для них вы поставили галочку "Этот элемент невидим при загрузке страницы"/"This is element is visible on page load". Другими словами, в режиме "показывать только скрываемые элементы"/"only show hideable elements" вы увидите список только тех элементов, которые невидимы, когда Редактор загружен. Этот режим наиболее полезен, когда вам нужно просмотреть все невидимые элементы и изменить их свойства, а другой режим полезен, чтобы увидеть всю страницу целиком.

## Абсолютное позиционирование

Элементы Bubble позиционируются абсолютно, используя координаты (х,у), которые определяют позицию элемента относительно предка. Таким образом, у вас будет полная свобода расположения элементов где угодно на странице. Это отличается от многих визуальных html/css редакторов, которые позиционируют элементы внутри некоторых ячеек на странице. А так как предоставляется больше свободы, это означает, что вам нужно быть внимательными, создавать понятный дизайн и понимать адаптивные настройки Bubble.

## Адаптивный дизайн

Страницы в Bubble являются адаптивными. Другими словами, они подстраиваются под ширину страницы, чтобы хорошо выглядеть на мобильных устройствах. Так как можно настраивать позиции элементов с точностью до пикселя, вы можете задать настройки, чтобы ваша страница правильно реагировала на изменение ширины. Это описано в главе "Создание адаптивных страниц"(!!!ЛНК!!!)

## Редактирование элементов

Для добавления элемента на страницу нужно кликом по левой панели "Новые элементы"/"New Element" выбрать тип элемента, который нужно добавить, а затем нарисовать его на странице (а не перетаскивать его с панели на страницу). Когда элемент нарисован, вы можете перемещать его с помощью перетаскивания и изменять его свойства через двойной клик. За некоторыми исключениями, большинство элементов можно перетаскивать мышью и менять их размеры. Всплывающие окна - это модальные контейнеры, которые показываются поверх страницы и всегда находятся в её центре. Поэтому они не перетаскиваются.

Когда вы дважды кликаете по элементу, открывается Редактор Свойств/"Property Editor", который позволяет изменять поля элементов. В этом руководстве не описан каждый элемент и каждый возможный вариант использования и поля, которые в них используются. Пожалуйста, воспользуйтесь разделом справочника "Элементы" для получения информации о каждом элементе.

## Основные поля стилей

Так как у каждого элемента есть свой набор полей (например, цвет текста, которым заполнено поле ввода текста -- для подробной информации смотри справочник по каждому элементу), большинство элементов Bubble имеют общие свойства оформления. Эти свойства могут использоваться для смены фона, границ, теней, шрифта и т.д. Вы можете посмотреть описание каждого свойства в соответствующем разделе(!!!ЛНК!!!) справочника.

Большинство этих основных свойств являются частью "Стилей"/"Styles". Стили рассматриваются в одном (!!!ЛНК!!!) из параграфов этой главы, они позволяют задать некоторые общие визуальные свойства элементов одного типа.

## Типы элементов

Раздел Элементы (!!!ЛНК!!!) в справочнике описывает каждый тип элемента. Тем не менее, есть несколько основных категорий. Элементы в Bubble разделяются на 3 основных категории: Визуальные элементы, Контейнеры и Формы ввода.

* Визуальные элементы это элементы, которые отображают какую-либо информацию или элементы интерфейса, с которыми пользователь может взаимодействовать с помощью мышки. Как бы то ни было, пользователи не могут вводить информацию с клавиатуры.
* Контейнеры - это элементы, которые описаны выше (!!!ЛНК!!!). Их видимость влияет на видимость их потомков и им может быть назначен тип содержимого (смотрите соответствующий раздел главы "Работа с данными").
* Формы ввода - это, элементы, которые пользователь использует для ввода информации. Наиболее простой вариант - форма для ввода текста, но также есть и другие примеры с использованием слайдеров, элементов загрузки файлов, чекбоксы и другие.

## Использование повторяющихся элементов

Повторяющиеся элементы - это способ создать группы элементов, которые могут быть использованы более чем на одной странице. Это понятие рассматривается во всех деталях в соответствующем разделе (!!!ЛНК!!!) главы, но вот как их можно использовать при создании своей страницы.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://prostokosaka.gitbook.io/bubble/31-glavnie-printsipi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.