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

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

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

Изменение display

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

Параметры Flexbox

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

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

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

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

Переключение visibility

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