Вы здесь: Главная » Bootstrap » Bootstrap 4 » Bootstrap 3, 4 и 5: классы для скрытия/отображения элементов на разных экранах

Bootstrap 3, 4 и 5: классы для скрытия/отображения элементов на разных экранах

При верстке часто возникает ситуация, когда некоторые элементы необходимо скрыть для небольших разрешений экранов и показать на больших, и наоборот. В Bootstrap 4 для этой цели есть есть классы d-none(название происходит от значения свойства display: none !important) и d-block (display: block !important, соответственно).

Эти классы скрывают/показывают элементы на всех разрешениях экранов, но странно было бы, если бы разработчики Bootstrap не предусмотрели отзывчивые (responsive) утилиты, поэтому классов на основе  d-none и  d-block несколько. Их сочетание и дает отображение элементов на одних экранах и скрытие их на других.

Bootstrap 4

В таблице представлены варианты классов скрытия/отображения элементов для Bootstrap 4. Суть использования классов состоит в том, что вы указываете класс .d-{breakpoint}-none и/или .d-{breakpoint}-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:

See the Pen Bootstrap 4 display classes by Elen (@ambassador) on CodePen.dark

Для каждого блока внизу выведены названия классов, которые были применены к данному блоку с изображением.

Классы скрытия/отображения элементов для 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. Поэтому в примере ниже вы увидите вариации использования только этих классов. Для того чтобы поэкспериментировать с разными разрешениями экрана, щелкните на ссылке edit-with-codepen или спрячьте боковую панель на странице.

See the Pen Bootstrap 5-alpha additional display classes by Elen (@ambassador) on CodePen.dark

Классы скрытия/отображения элементов для 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-xsHiddenОтображаетсяОтображаетсяОтображается
.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 для большей наглядности.

See the Pen Bootstrap 5 alpha display classes by Elen (@ambassador) on CodePen.dark

Если вам  необходимо установить определенное значение свойства display для разных разрешений экранов, тогда нужно использовать название класса в формате .d-{breakpoint}-{value}, заменяя {breakpoint} на  sm, md, lg, xl, and xxl (последний только в Bootstrap 5), а {value} на none, inline, inline-block, block, table, table-cell, table-row, flex или inline-flex.

Учтите, что все классы содержат директиву !important для любого из значений свойства display , поэтому, возможно, вам будет сложно переопределять это с помощью JavaScript.

Отображение при печати

В том случае, если вы готовите страницы своего сайта для печати, а не только для экранного просмотра, имеет смысл воспользоваться классами, изменяющими свойство display у элементов при печати.

  • .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
Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *