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

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

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

На этой странице

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

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

Параметры адаптивных flexbox-контейнеров

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

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

Поля и отступы

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

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

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