Отображение элементов
Быстрое переключение отображаемых элементов и многого другого с помощью наших служебных программ отображения. Включает поддержку распространенных значений, а также некоторые дополнительные функции для управления отображением при печати.
Как это устроено
Изменяйте значение свойства display с помощью наших обычных отзывчивых классов отображения. Мы намеренно поддерживаем только поднабор всех возможных значений свойства display. Классы можно комбинировать для создания различных эффектов, как вам надо.
Обозначение
Классы отображения, которые подходят всем брейкпойнтам, от xs до xl, не имеют в своем названии аббревиатуры брейкпойнта, т.к. эти классы применяются, начиная от min-width: 0; и выше, и т.о., не «связаны» медиа-запросами. Оставшиеся брейкпойнты, однако, включают подобные аббревиатуры брейкпойнта.
Поэтому классы называются по формату:
.d-{value}дляxs.d-{breakpoint}-{value}дляsm,md,lgиxl.
Где значение – это одно из:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
Медиа-запросы влияют на ширину экрана, начиная с указанного брейкпонта или больше. Например, .d-lg-none задает display: none; на обоих lg и xl.
Примеры
<divclass="d-inline p-2 bg-primary text-white">d-inline</div><divclass="d-inline p-2 bg-dark text-white">d-inline</div><spanclass="d-block p-2 bg-primary text-white">d-block</span><spanclass="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 |
<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-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>
