Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

Утилиты для макета

Для более быстрой мобильной и гибкой разработки Bootstrap включает в себя десятки полезных классов для отображения, скрытия, выравнивания и интервалов содержимого.

Изменение параметра display

Используйте отображение элементов для быстрого переключения общих значений свойства отображения display. Пользуйтесь этим свойством при использовании нашей сеточной системы и компонентов, чтобы показать или скрыть их на разных зонах видимости.

Опции растяжимых контейнеров

Bootstrap создан на растяжимых контейнерах, но не у каждого элемента свойство display изменено на display: flex поскольку это могло бы вызвать множество ненужных переназначений переменных и непредвиденные проблемы поведения браузеров. Но большинство наших компонентов имеет такое свойство.

Если вам понадобится добавить свойство display: flex к элементу, добавьте в него класс .d-flex или один из «отзывчивых» вариантов (.d-sm-flex). Вам понадобится этот класс или значение display для «включения в строй» наших дополнительных флексбокс-утилит для настройки размеров, отступов и т.п.

Margin и padding

Используйте утилиты отступа «марджин» и «паддинг» для контроля размера и отступов элементов. Bootstrap имеет 6-уровневую шкалу этих утилит, основанную на переменной по умолчанию $spacer со значением 1rem. Выбирайте значения для всех зон просмотра (например: mr-3 для margin-right: 1rem), или настраивайте отзывчивые варианты для обращения к специфическим вьюпортам (mr-md-3 для margin-right: 1 rem на брейкпойнте md).

Переключение видимости visibility

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