Отображение элементов
Быстрое переключение отображаемых элементов и многого другого с помощью наших утилит отображения. Включает поддержку некоторых из наиболее распространенных значений, а также некоторые дополнительные функции для управления отображением при печати.
Как это устроено
Изменяйте значение свойства display с помощью наших обычных отзывчивых классов отображения. Мы намеренно поддерживаем только поднабор всех возможных значений свойства display. Классы можно комбинировать для создания различных эффектов, как вам надо.
Обозначение
Утилиты отображения классов, которые применяются ко всем контрольным точкам, от xs до xxl, не имеют в себе аббревиатуры контрольной точки. Это потому, что эти классы применяются начиная с min-width: 0; и выше, и поэтому не связаны медиа-запросами. Остальные контрольные точки, однако, содержат аббревиатуру контрольной точки.
Таким образом, классы именуются в следующем формате:
.d-{value}дляxs.d-{breakpoint}-{value}дляsm,md,lg,xlиxxl.
Где значение - одно из:
noneinlineinline-blockblockgridinline-gridtabletable-celltable-rowflexinline-flex
Отображаемые значения можно изменить, изменив display значения, определенные в $utilities, и перекомпилировав SCSS.
Медиа-запросы влияют на ширину экрана с заданной контрольной точкой или больше. Например, .d-lg-none устанавливает display: none; на экранах lg, xl и xxl.
Примеры
<divclass="d-inline p-2 text-bg-primary">d-inline</div><divclass="d-inline p-2 text-bg-dark">d-inline</div><spanclass="d-block p-2 text-bg-primary">d-block</span><spanclass="d-block p-2 text-bg-dark">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 |
<divclass="d-lg-none">скрыть на lg и более широких экранах</div><divclass="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-inline-grid.d-print-table.d-print-table-row.d-print-table-cell.d-print-flex.d-print-inline-flex
Классы печати и отображения можно комбинировать.
<divclass="d-print-none">Только экран (Скрывать только при печати)</div><divclass="d-none d-print-block">Только печать (скрыть только на экране)</div><divclass="d-none d-lg-block d-print-block">Скрыть до большого размера на экране, но всегда показывать на печати</div>CSS
Sass API утилиты
Утилиты отображения объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.
"display":(responsive:true,print:true,property:display,class:d,values:inlineinline-blockblockgridinline-gridtabletable-rowtable-cellflexinline-flexnone),