Утилиты для макетов
Для более быстрой мобильно-дружелюбной и отзывчивой разработки 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
элемента с помощью наших утилит видимости. Невидимые элементы все равно будут влиять на макет страницы, но визуально скрыты от посетителей.