Оригинал Посмотреть на GitHub

Свойство отображения

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

На этой странице

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

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

Обозначение

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

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

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

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

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

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

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

Примеры

d-inline

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

<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`
Скрыто только на xs	`.d-none .d-sm-block`
Скрыто только на sm	`.d-sm-none .d-md-block`
Скрыто только на md	`.d-md-none .d-lg-block`
Скрыто только на lg	`.d-lg-none .d-xl-block`
Скрыто только на xl	`.d-xl-none .d-xxl-block`
Скрыто только на xxl	`.d-xxl-none`
Видно на всех	`.d-block`
Видно только на xs	`.d-block .d-sm-none`
Видно только на sm	`.d-none .d-sm-block .d-md-none`
Видно только на md	`.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`

скрыть на lg и более широких экранах

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

<div class="d-lg-none">скрыть на lg и более широких экранах</div>
<div class="d-none d-lg-block">скрыть на экранах меньше lg</div>

Показать в печати

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

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

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

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

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

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

<div class="d-print-none">Только экран (Скрывать только при печати)</div>
<div class="d-none d-print-block">Только печать (скрыть только на экране)</div>
<div class="d-none d-lg-block d-print-block">Скрыть до большого размера на экране, но всегда показывать на печати</div>

Sass

API утилит

Утилиты отображения объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),