Быстрое и оперативное переключение отображаемых элементов и многого другого с помощью наших служебных программ отображения. Включает поддержку некоторых более общих значений, а также некоторые дополнительные функции для управления отображением при печати.
Как это устроено
Изменяйте значение свойства display с помощью наших обычных отзывчивых классов отображения. Мы намеренно поддерживаем только поднабор всех возможных значений свойства display . Классы можно комбинировать для создания различных эффектов, как вам надо.
Обозначение
Классы отображения, которые подходят всем брейкпойнтам, от xs до xl , не имеют в своем названии аббревиатуры брейкпойнта, т.к. эти классы применяются, начиная от min-width: 0; и выше, и т.о., не «связаны» медиа-запросами. Оставшиеся брейкпойнты, однако, включают подобные аббревиатуры брейкпойнта.
Поэтому классы называются по формату:
Где значение – это одно из:
Медиа-запросы влияют на ширину экрана, начиная с указаннного брейкпонта или больше. Например, .d-lg-none задает display: none; на обоих lg и xl .
Примеры
Скрытие элементов
Для быстрой мобил-френдли веб-разработки используйте отзывчивые классы для показа и скрытия элементов на устройстве. Избегайте создания совершенно разных версий сайта, вместо того, чтобы просто «отзывчиво» прятать элемент для каждого размера экрана.
Чтобы скрыть элементы, используйте класс .d-none или один из классов .d-
Для показа элемента только на определенном инвервале размеров экрана вы можете сочетать один класс .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 |
Отображение при печати
Измените атрибут 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
Классы печати и отображения можно сочетать.
В этой статье познакомимся с классами фреймворка Bootstrap 4, которые предназначены для адаптивного управления CSS свойством display HTML элементов.
Display-классы Bootstrap
В Bootstrap 4 имеется категория классов, с помощью которых можно не только адаптивно скрывать элементы, но и управлять тем как они должны быть показаны на странице.
Список display-классов Bootstrap 4:
Первый класс ( d-none ) предназначен для скрытия элемента на странице. Осуществляет это он посредством установки HTML элементу CSS свойства display со значение none .
Остальные классы управляют тем, как элемент должен быть представлен на странице. Класс d-inline представляет элемент строчным ( display: inline ), d-block – блочным ( display: block ), d-inline-block — строчно-блочным ( display: inline-block ), d-table – таблицой ( display: table ), d-table-cell – ячейкой таблицы ( display: table-cell ), d-flex – блочным flex-контейнером ( display: flex ), d-inline-flex — строчным flex-контейнером ( display: inline-flex ).
Кроме этого фреймворк Bootstrap 4 позволяет управлять CSS свойством display HTML элементов адаптивно. Это означает, что HTML элемент при одной ширине viewport может отображаться одним образом, а при другой – по-другому.
Синтаксис display-класса Bootstrap 4:
В данном классе нужно вместо:
- breakpoint указать название контрольной точки ( sm , md , lg , xl ), начиная с которой будет применяться указанное CSS свойство display к HTML элементу (без обозначения — начиная с самых крохотных устройств).
- ? задать одно из значений: none , inline , inline-block , block , table , table-cell , flex , inline-flex .
Список всех display-классов Bootstrap 4:
- d-none
- d-inline
- d-inline-block
- d-block
- d-table
- d-table-cell
- d-flex
- d-inline-flex
- d-sm-none
- d-sm-inline
- d-sm-inline-block
- d-sm-block
- d-sm-table
- d-sm-table-cell
- d-sm-flex
- d-sm-inline-flex
- d-md-none
- d-md-inline
- d-md-inline-block
- d-md-block
- d-md-table
- d-md-table-cell
- d-md-flex
- d-md-inline-flex
- d-lg-none
- d-lg-inline
- d-lg-inline-block
- d-lg-block
- d-lg-table
- d-lg-table-cell
- d-lg-flex
- d-lg-inline-flex
- d-xl-none
- d-xl-inline
- d-xl-inline-block
- d-xl-block
- d-xl-table
- d-xl-table-cell
- d-xl-flex
- d-xl-inline-flex
Примеры работы с display-классами
1. Создадим адаптивную разметку, состоящую из 3 секций (L, M и R). Секция L должна отображаться только на контрольной точке xl , а на остальных – скрыта.
Bootstrap 4 — Пример адаптивной разметки блока
2. Например, скроем некоторый HTML элемент на xs (крохотных устройствах), md и lg . На остальных контрольных точках ( sm и xl ) данный элемент будем отображать как блочный ( display: block ).
3. Например, рассмотрим, как можно осуществить скрытия элемента только на устройствах md .
Классы, управляющие видимостью элементов при печати
Во фреймворке Bootstrap 4 имеются классы, с помощью которых можно управлять видимостью элементов при печати.
Первые три класса из этого набора ( d-print-block , d-print-inline , d-print-inline-block ) предназначены для скрытия элемента в браузере и отображения его только при печати (как block , inline , inline-block ).
Четвёртый класс d-print-none выполняет обратное действие, он оставляет элемент видимым в браузере и скрывает его при печати.
| Класс | в браузере | при печати |
|---|---|---|
| d-print-block | скрыт | виден (как display: block) |
| d-print-inline | скрыт | виден (как display: inline) |
| d-print-inline-block | скрыт | виден (как display: inline-block) |
| d-print-none | виден | скрыт |
Пример, в котором показано как можно с помощью вышепиведённых классов управлять видимостью элементов при печати:
При подключении bootstrap 4 текст разбивается на 2 колонки. Как сделать, чтобы при сжатии, например, к col-md вторая колонка пропадала и оставалась только первая.
2 ответа 2
Если хотите скрыть на xl, sm, md , то используйте .d-none .d-lg-block , что означает, что блок скрыт на разрешении xl, sm, md , но показан на lg