Перейти к основному контенту Перейти к навигации документации

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

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

Изменение display

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

Опции Flexbox

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

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

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

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

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

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