Responsive utilities / Адаптивные вспомогатели

Responsive utilities / Адаптивные вспомогатели

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

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

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

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

Очень маленькие устройствоТелефоны (<768px) Малые устройстваПланшеты (≥768px) Средние устройстваНастольные (≥992px) Большие устройстваНастольные (≥1200px)
.visible-xs Видимый
.visible-sm Видимый
.visible-md Видимый
.visible-lg Видимый
.hidden-xs Видимый Видимый Видимый
.hidden-sm Видимый Видимый Видимый
.hidden-md Видимый Видимый Видимый
.hidden-lg Видимый Видимый Видимый

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

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

Класс Браузер Печать
.visible-print Видимый
.hidden-print Видимый

Тестовые сценарии

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

Видимый на...

Зеленые галочки указывают, что элемент видимый в вашем текущем экране.

Средние
✔ Видимый на large
✔ Видимый на medium и large
✔ Видимый на small и large
✔ Видимый на x-small и large

Скрытый на...

Здесь, зеленые галочки указывают, что элемент скрыт в вашем текущем экране.

Средние
✔ Скрытый на large
✔ Скрытый на medium и large
✔ Скрытый на small и large
✔ Скрытый на x-small и large

Translate »