Bootstrap 5: Свойство 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: элемент отображается как сетка.
• table: элемент отображается как таблица.
• table-cell: элемент отображается как ячейка таблицы.
• table-row: элемент отображается как строка таблицы.
• flex: элемент отображается как гибкий контейнер.
• inline-flex: элемент отображается как гибкий контейнер внутри текстового потока.

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

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

Примеры использования

Отображение внутри текстового потока

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

Отображение в новой строке

<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 скроет элемент для всех размеров экрана, за исключением средних и больших устройств.

Примеры скрытия элементов

• Скрыть элемент на всех экранах:
  

  <div class="d-none">Скрыто на всех экранах</div>

  Результат:

  Скрыто на всех экранах
• Скрыть элемент только на экранах XS:
  

  <div class="d-none d-sm-block">Скрыто на экранах XS</div>

  Результат:

  Скрыто на экранах XS
• Скрыть элемент только на экранах SM:
  

  <div class="d-sm-none d-md-block">Скрыто на экранах SM</div>

  Результат:

  Скрыто на экранах SM
• Скрывать на экранах меньше, чем LG:
  

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

  
  
  Результат:

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

  скрыть на экранах меньше LG
• И так далее для других размеров экранов.

Отображать в печати

Измените display значение элементов при печати с помощью наших классов утилит print 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">Только на экране (скрыть только при печати)</div>
<div class="d-none d-print-block">Только печать (только скрыть на экране)</div>
<div class="d-none d-lg-block d-print-block">Скрыть на экране в большом разрешении, но всегда показывать на печати</div>

CSS

API утилит Sass

Утилиты отображения объявлены в нашем 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
),

FAQ (ответы на часто задаваемые вопросы)

Заключение

Свойство Display в Bootstrap 5 предоставляет мощные инструменты для управления отображением элементов. Независимо от того, нужно ли скрыть элементы на маленьких экранах или создать гибкий макет, Bootstrap 5 предоставляет нам средства для достижения этой цели. Используйте это свойство с умом, чтобы создавать адаптивные и красивые веб-сайты.