Отображение элементов

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

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

Обозначение

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

Поэтому классы называются по формату:

• .d-{value} for xs
• .d-{breakpoint}-{value} for sm, md, lg, xl, and 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 скроет элемент на всех размерах экрана, кроме средних и больших.

Размер экрана	Класс
Скрыто на всех	.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

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

Помочь проекту