Свойство Display

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

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

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

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

Обозначение

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

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

.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.

Где value является одним из:

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

Значения display могут быть изменены путем изменения значений display, определенных в $utilities, и перекомпиляции SCSS.

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

Примеры

d-inline

html

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

d-block d-block

html

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

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

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

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

Чтобы показать элемент только на данном интервале размеров экрана, вы можете объединить один класс .d-*-none с классом .d-*-*, например .d-none .d-md-block .d-xl-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`

hide on lg and wider screens

hide on screens smaller than lg

html

<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-grid
.d-print-inline-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

Классы печати и display могут быть объединены.

Screen Only (Hide on print only)

Print Only (Hide on screen only)

Hide up to large on screen, but always show on print

html

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

CSS

API утилит Sass

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

scss/_utilities.scss

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