Bootstrap отображение блоков на телефоне
Быстрое и оперативное переключение отображаемых элементов и многого другого с помощью наших служебных программ отображения. Включает поддержку некоторых более общих значений, а также некоторые дополнительные функции для управления отображением при печати.
Как это устроено
Изменяйте значение свойства display с помощью наших обычных отзывчивых классов отображения. Мы намеренно поддерживаем только поднабор всех возможных значений свойства display . Классы можно комбинировать для создания различных эффектов, как вам надо.
Обозначение
Классы отображения, которые подходят всем брейкпойнтам, от xs до xl , не имеют в своем названии аббревиатуры брейкпойнта, т.к. эти классы применяются, начиная от min-width: 0; и выше, и т.о., не «связаны» медиа-запросами. Оставшиеся брейкпойнты, однако, включают подобные аббревиатуры брейкпойнта.
Поэтому классы называются по формату:
Где значение – это одно из:
Медиа-запросы влияют на ширину экрана, начиная с указаннного брейкпонта или больше. Например, .d-lg-none задает display: none; на обоих lg и xl .
Примеры
Скрытие элементов
Для быстрой мобил-френдли веб-разработки используйте отзывчивые классы для показа и скрытия элементов на устройстве. Избегайте создания совершенно разных версий сайта, вместо того, чтобы просто «отзывчиво» прятать элемент для каждого размера экрана.
Чтобы скрыть элементы, используйте класс .d-none или один из классов .d- -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 |
Отображение при печати
Измените атрибут 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 .
Кроме этого фреймворк Bootstrap 4 позволяет управлять CSS свойством display HTML элементов адаптивно. Это означает, что HTML элемент при одной ширине viewport может отображаться одним образом, а при другой – по-другому.
Синтаксис display-класса Bootstrap 4:
В данном классе нужно вместо:
Список всех 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 , а на остальных – скрыта.
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
Быстро и оперативно переключайте отображаемое значение компонентов и многое другое с помощью наших утилит для отображения. Включает поддержку некоторых из наиболее распространенных значений, а также некоторые дополнительные функции для управления отображением при печати.
Как это работает
Измените значение свойства display property с помощью наших вспомогательных классов адаптивного отображения. Мы намеренно поддерживаем только подмножество всех возможных значений для display . Классы можно комбинировать для получения различных эффектов по мере необходимости.
Обозначение
Утилиты отображения классов, которые применяются ко всем контрольным точкам, от xs до xxl , не имеют в себе аббревиатуры контрольной точки. Это потому, что эти классы применяются начиная с min-width: 0; и выше, и поэтому не связаны медиа-запросами. Остальные контрольные точки, однако, содержат аббревиатуру контрольной точки.
Таким образом, классы именуются в следующем формате:
Где значение - одно из:
- none
- inline
- inline-block
- block
- grid
- table
- table-cell
- table-row
- flex
- inline-flex
Отображаемые значения можно изменить, изменив переменную $displays и перекомпилировав SCSS.
Медиа-запросы влияют на ширину экрана с заданной контрольной точкой или больше. Например, .d-lg-none устанавливает display: none; на экранах lg , xl и xxl .
Примеры
Скрытие элементов
Для более быстрой разработки, удобной для мобильных устройств, используйте адаптивные классы отображения для отображения и скрытия элементов по устройствам. Избегайте создания совершенно разных версий одного и того же сайта, вместо этого скройте элементы в зависимости от размера экрана.
Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d--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 |
Показать в печати
Измените значение display элементов при печати с помощью наших служебных классов отображения при печати. Включает поддержку тех же значений display , что и наши адаптивные утилиты .d-* .
При верстке часто возникает ситуация, когда некоторые элементы необходимо скрыть для небольших разрешений экранов и показать на больших, и наоборот. В Bootstrap 4 для этой цели есть есть классы d-none (название происходит от значения свойства display: none !important ) и d-block ( display: block !important , соответственно).
Эти классы скрывают/показывают элементы на всех разрешениях экранов, но странно было бы, если бы разработчики Bootstrap не предусмотрели отзывчивые (responsive) утилиты, поэтому классов на основе d-none и d-block несколько. Их сочетание и дает отображение элементов на одних экранах и скрытие их на других.
Bootstrap 4
В таблице представлены варианты классов скрытия/отображения элементов для Bootstrap 4. Суть использования классов состоит в том, что вы указываете класс .d--none и/или .d--block .
| Размер экрана | Класс |
|---|---|
| Скрыт на всех | .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 |
Ниже вы можете посмотреть примеры использования классов из таблицы. Количество и вид изображений будет меняться в зависимости от размера вашего экрана. Вы можете регулировать его, нажимая на вкладки HTML, CSS, JS:
Для каждого блока внизу выведены названия классов, которые были применены к данному блоку с изображением.
Классы скрытия/отображения элементов для Bootstrap 5
Поскольку классы для размеров экранов были несколько изменены в Bootstrap 5, то и классы для скрытия/отображения элементов в 5-й версии этого фреймворка несколько расширились. Добавился учет размеров экрана ≥1400px с названием XX-Large и классами типа .container-xxl , .col-xxl, .col-xxl-6 и и т.п.
| Размер экрана | Класс |
|---|---|
| Скрыт при всех | .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 |
| Скрыт только при 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 |
Если сравнить 2 таблицы - для 4-й и 5-й версии Bootstrap, то становится заметно, что множество классов в 5-й версии наследуется из 4-й. Добавлены были только классы .d-xxl-none и .d-xxl-block . Поэтому в примере ниже вы увидите вариации использования только этих классов. Для того чтобы поэкспериментировать с разными разрешениями экрана, щелкните на ссылке или спрячьте боковую панель на странице.
Классы скрытия/отображения элементов для Bootstrap 3
На данный момент 3-я версия Bootstap уже отошла далеко в прошлое, но в сети еще есть ряд сайтов, сверстанные именно на этом варианте Bootstap . Поэтому в таблице ниже представлены классы, скрывающие/отображающие элементы для определенных разрешений экрана. В Bootstap-3 был несколько иной подход, чем в Bootstap-4 и 5, поэтому классы имеют приставки .visible- или .hidden- .
| Класс элемента | Телефоны и планшеты до (<) 768px | Планшеты более (≥) 768px | Компьютеры, ноутбуки и планшеты более (≥)992px | Компьютеры, ноутбуки более(≥)1200px |
|---|---|---|---|---|
| .visible-xs-* | Отображается | Скрыт | Скрыт | Скрыт |
| .visible-sm-* | Скрыт | Отображается | Скрыт | Скрыт |
| .visible-md-* | Скрыт | Скрыт | Отображается | Скрыт |
| .visible-lg-* | Скрыт | Скрыт | Скрыт | Отображается |
| .hidden-xs | Hidden | Отображается | Отображается | Отображается |
| .hidden-sm | Отображается | Скрыт | Отображается | Отображается |
| .hidden-md | Отображается | Отображается | Скрыт | Отображается |
| .hidden-lg | Отображается | Отображается | Отображается | Скрыт |
Ссылки:
Классы для изменения свойства display
Помимо отображения или скрытия элементов, в Bootstrap 4 и 5 предусмотрены классы для изменения свойства display , которые имеют следующие значения:
- d-none
- d-inline
- d-inline-block
- d-block
- d-table
- d-table-cell
- d-table-row
- d-flex
- d-inline-flex
В примере ниже вы можете использовать радио-переключатели для того, чтобы посмотреть, как работает то или иное свойство. Учтите, что при добавлении класса .d-inline для родительского элемента, вложенным в него элементам с классом .block добавляется еще класс .d-inline-block , а при добавлении класса .d-table для родителя дочерним элементам добавляется еще класс .d-table-cell для большей наглядности.
Если вам необходимо установить определенное значение свойства display для разных разрешений экранов, тогда нужно использовать название класса в формате .d-- , заменяя на sm , md , lg , xl , and xxl (последний только в Bootstrap 5), а на none , inline , inline-block , block , table , table-cell , table-row , flex или inline-flex .
Учтите, что все классы содержат директиву !important для любого из значений свойства display , поэтому, возможно, вам будет сложно переопределять это с помощью JavaScript.
Отображение при печати
В том случае, если вы готовите страницы своего сайта для печати, а не только для экранного просмотра, имеет смысл воспользоваться классами, изменяющими свойство display у элементов при печати.
В Bootstrap 4 имеется категория классов, с помощью которых можно не только адаптивно скрывать элементы, но и управлять тем как они должны быть показаны на странице.
Список display-классов Bootstrap 4:
- d-none
- d-inline
- d-inline-block
- d-block
- d-table
- d-table-cell
- d-flex
- d-inline-flex
Первый класс ( 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 | виден | скрыт |
Пример, в котором показано как можно с помощью вышепиведённых классов управлять видимостью элементов при печати:
Читайте также:
- Какой гаджет можно купить за 1000 рублей
- Планшет lenovo tab m10 plus tb x606x 128 гб 3g lte серый обзор
- Как сделать сердечко на клавиатуре телефона из смайликов
- Как разблокировать аккаунт в тик ток если его заблокировали навсегда с телефона за нарушение правил
- Не ставятся лайки в тик токе с телефона