Как это устроено
Измените значение display
свойства с помощью наших вспомогательных классов адаптивного отображения. Мы намеренно поддерживаем только подмножество всех возможных значений для display
. Классы можно комбинировать для получения различных эффектов по мере необходимости.
Обозначение
Отобразите служебные классы, которые применяются ко всем контрольным точкам , от xs
до xxl
, не имеют в них аббревиатуры точки останова. Это связано с тем, что эти классы применяются min-width: 0;
сверху вниз и, следовательно, не связаны медиа-запросом. Остальные точки останова, однако, содержат аббревиатуру точки останова.
Таким образом, классы именуются в следующем формате:
.d-{ value }
заxs
.d-{ breakpoint }-{ value }
дляsm
,md
,lg
,xl
, иxxl
.
Где значение - одно из:
none
inline
inline-block
block
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 |
Скрыто только на хз | .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 |
<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-*
утилиты.
.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">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>