Перейти к основному содержанию Перейти к навигации по документам
Check
in English

Показать свойство

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

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

Измените значение displayсвойства с помощью наших служебных классов адаптивного отображения. Мы намеренно поддерживаем только часть всех возможных значений для 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

Отображаемые значения можно изменить, изменив displayзначения, определенные в $utilitiesSCSS, и перекомпилировав его.

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

Примеры

d-встроенный
d-встроенный
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-блок d-блок
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>

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

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

Чтобы скрыть элементы, просто используйте .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
Скрыто только на md .d-md-none .d-lg-block
Скрыто только на lg .d-lg-none .d-xl-block
Скрыто только на xl .d-xl-none
Скрыто только на xxl .d-xxl-none .d-xxl-block
Видно на всех .d-block
Видно только на хз .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
скрыть на lg и более широких экранах
скрыть на экранах меньше, чем 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-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

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

Только экран (скрывать только при печати)
Только печать (скрыть только на экране)
Скрыть до большого размера на экране, но всегда показывать на печати
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>

Сасс

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