Утилиты адаптивности

Для более быстрой разработки, адаптивной к мобильным устройствам, используйте эти классы утилиты для показа и скрытия содержимого устройством с помощью медиа-запроса. Используйте служебные классы и избегайте создания совершенно разных версий одного и того же сайта.

Доступные классы

  • Классы .hidden-*-up скрывают элемент, когда область просмотра находится в заданной точке останова или шире. Например, .hidden-md-up скрывает элемент на средних, больших и очень больших экранах.
  • Классы .hidden-*-down скрывают элемент, когда область просмотра находится в заданной точке останова или меньше. Например, .hidden-md-down скрывает элемент на сверхмалых, малых и средних экранах.
  • Нет явных «видимых» / «показывающих» классов утилит адаптивности. Вы делаете элемент видимым, не скрывая его при этом размере точки останова.
  • Вы можете объединить один класс .hidden-*-up с одним классом .hidden-*-down, чтобы показывать элемент только на заданном интервале размеров экрана. Например, .hidden-sm-down.hidden-xl-up показывает элемент только на средних и больших экранах. Использование нескольких классов .hidden-*-up или нескольких классов .hidden-*-down является избыточным и бессмысленным.
  • Эти классы не пытаются учитывать менее распространенные случаи, когда видимость элемента не может быть выражена как один непрерывный диапазон размеров точки останова в видовом экране. В этом случае вам понадобится использовать пользовательский CSS.
Очень маленькие устройства Portrait phones (<544px) Малые устройства Landscape phones (≥544px - <768px) Средние устройства Tablets (≥768px - <992px) Крупные устройства Desktops (≥992px - <1200px) Очень большие устройства Desktops (≥1200px)
.hidden-xs-down Видимый Видимый Видимый Видимый
.hidden-sm-down Видимый Видимый Видимый
.hidden-md-down Видимый Видимый
.hidden-lg-down Видимый
.hidden-xl-down
.hidden-xs-up
.hidden-sm-up Видимый
.hidden-md-up Видимый Видимый
.hidden-lg-up Видимый Видимый Видимый
.hidden-xl-up Видимый Видимый Видимый Видимый

Классы печати

Подобно регулярным классам адаптивности, используйте их для переключения контента для печати.

Класс Браузер Печать
.visible-print-block Видимый
(as display: block)
.visible-print-inline Видимый
(as display: inline)
.visible-print-inline-block Видимый
(as display: inline-block)
.hidden-print Видимый

Тестовые примеры

Измените размер своего браузера или загрузите его на разных устройствах, чтобы протестировать классы утилит адаптивности.

Зеленые флажки показывают, что элемент виден в текущем окне просмотра.

Видимый на очень маленьких Очень маленькие
Видимый на маленьких или более узких Маленькие или более узкие
Видимый на средних или более узких Средние или более узкие
Видимый на больших или более узких Большие или более узкие

Видимый на маленьких или более широких Маленькие или более широкие
Видимый на средних или более широких Средние или более широкие
Видимый на больших или более широких Большие или более широкие
Видимый на очень больших Очень большие

Ваш экран точно очень маленький Ваш экран НЕ точно очень маленький
Ваш экран точно маленький Ваш экран НЕ точно маленький
Ваш экран точно средний Ваш экран НЕ точно средний
Ваш экран точно большой Ваш экран НЕ точно большой
Ваш экран точно очень большой Ваш экран НЕ точно очень большой