Перейти к основному содержанию

Display property

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

Содержание

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

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

Обозначение

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

Таким образом, классы именуются в следующем формате:

Где значение - одно из:

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

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

Примеры

d-рядный
d-рядный
<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-блок d-блок
<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
Скрыто только на хз .d-none .d-sm-block
Скрыт только на см .d-sm-none .d-md-block
Скрыт только на мкр. .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
Виден только на см .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
hide on lg and wider screens
скрыть на экранах меньше lg
<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-* утилиты.

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

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