Быстро и оперативно переключайте отображаемое значение компонентов и многое другое с помощью наших утилит для отображения. Включает поддержку некоторых из наиболее распространенных значений, а также некоторые дополнительные функции для управления отображением при печати.
Как это работает
Измените значение свойства display
с помощью наших вспомогательных классов адаптивного отображения. Мы намеренно поддерживаем только подмножество всех возможных значений для display
. Классы можно комбинировать для получения различных эффектов по мере необходимости.
Обозначение
Отобразите служебные классы, которые применяются ко всем контрольным точкам, от xs
до xl
, не имеют в себе аббревиатуры контрольной точки. Это потому, что эти классы применяются начиная с min-width: 0;
и выше, и поэтому не связаны медиа-запросами. Остальные контрольные точки, однако, содержат аббревиатуру контрольной точки.
Таким образом, классы именуются в следующем формате:
.d-{value}
дляxs
.d-{breakpoint}-{value}
дляsm
,md
,lg
иxl
.
Где значение - одно из:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Отображаемые значения можно изменить, изменив переменную $displays
и перекомпилировав SCSS.
Медиа-запросы влияют на ширину экрана с заданной контрольной точкой или больше. Например, .d-lg-none
устанавливает display: none;
на экранах lg
и xl
.
Примеры
<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}-none
для любого варианта адаптивного экрана.
Чтобы отображать элемент только в заданном интервале размеров экрана, Вы можете объединить один класс .d-*-none
с классом .d-*-*
, например, .d-none .d-md-block .d-xl-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-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 |
<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>