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

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

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

Содержание

• Содержание
• Доступные классы
• Тестовые примеры

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

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

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

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

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

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

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