Свойство display

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

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

Нотация

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

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

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

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

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

Примеры

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

<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-xxl-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 для печати. Поддерживает те же значения 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

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

<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 полезных свойств.

"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
),