Display property

Как это устроено

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

Обозначение

Отобразите служебные классы, которые применяются ко всем контрольным точкам , от xs до xxl, не имеют в них аббревиатуры точки останова. Это связано с тем, что эти классы применяются min-width: 0; сверху вниз и, следовательно, не связаны медиа-запросом. Остальные точки останова, однако, содержат аббревиатуру точки останова.

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

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

Где значение - одно из:

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

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

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

Примеры

d-рядный

<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>

d-блок d-блок

<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,xxl }-none классов для любого варианта адаптивного экрана.

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

Размер экрана	Учебный класс
Скрытый на всех	`.d-none`
Скрыто только на хз	`.d-none .d-sm-block`
Скрыт только на см	`.d-sm-none .d-md-block`
Скрыт только на мкр.	`.d-md-none .d-lg-block`
Скрыт только на lg	`.d-lg-none .d-xl-block`
Скрыто только на xl	`.d-xl-none`
Скрыт только на xxl	`.d-xxl-none`
Видно на всех	`.d-block`
Видно только на xs	`.d-block .d-sm-none`
Виден только на см	`.d-none .d-sm-block .d-md-none`
Виден только на мкр.	`.d-none .d-md-block .d-lg-none`
Видно только на lg	`.d-none .d-lg-block .d-xl-none`
Видно только на xl	`.d-none .d-xl-block .d-xxl-none`
Видно только на xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

скрыть на экранах меньше lg

<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

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

Только экран (Скрывать только при печати)

Print Only (Hide on screen only)

Скрыть до большого размера на экране, но всегда показывать на печати

<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>