Свойство display

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

Как это работает

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

Нотация

Классы утилит display, которые применяются ко всем размерам экрана, от xs до xl, не содержат сокращения размера экрана. Это связано с тем, что эти классы применяются начиная с min-width: 0; и выше, и поэтому не ограничены медиа-запросом. Однако оставшиеся размеры экрана включают сокращение размера экрана.

Таким образом, классы имеют следующее имя:

• .d-{value} для xs
• .d-{breakpoint}-{value} для sm, md, lg, и xl.

Где значение — это одно из:

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

Значения display можно изменить, изменив переменную $displays и перекомпилировав SCSS.

Медиа-запросы влияют на ширину экрана с заданным размером экрана или больше. Например, .d-lg-none устанавливает display: none; как на экранах lg , так и на экранах xl.

Примеры

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

Скрытие элементов

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

Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d-{sm,md,lg,xl}-none для любой адаптивной вариации экрана.

Чтобы отобразить элемент только в заданном диапазоне размеров экрана, можно объединить один класс .d-*-none с классом .d-*-*, например .d-none .d-md-block .d-xl-none скроет элемент для всех размеров экрана, кроме средних и больших.

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Отображение при печати

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

• .d-print-none
• .d-print-inline
• .d-print-inline-block
• .d-print-block
• .d-print-table
• .d-print-table-row
• .d-print-table-cell
• .d-print-flex
• .d-print-inline-flex

Классы печати и отображения можно комбинировать.

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>