Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

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

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

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

Изменяйте значение свойства 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
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

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

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

Примеры

d-inline
d-inline
<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>
d-block d-block
<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
Скрыт только при 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
скрыто на экранах шире lg
скрыто на экранах меньше чем lg
<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-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>