450076, г. Уфа, ул. Чернышевского 82
+7 (347) 246-8500 demo@simai.ru

Макет

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

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

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

Содержание

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

  • Классы .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 Видимый

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

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

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

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

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

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