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

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

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

• Классы .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.

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

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

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

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

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