Bootstrap — Отзывчивые утилиты
Bootstrap предоставляет некоторое количество вспомогательных классов для более быстрой мобильной отзывчивости. Они могут быть использованы для отображения и скрытия содержимого с помощью устройства с помощью средств медиа-запросов, в сочетании с большими, малыми, средними устройствами.
Используйте их экономно и не создавайте совершенно разные версии одного и того же сайта. Отзывчивые утилиты в настоящее время доступны только для переключения блоков и таблиц.
| Классы | Устройства |
|---|---|
| .visible-xs | Очень мелкий (менее 768px) видно |
| .visible-sm | Малые (до 768px) видно |
| .visible-md | Средний (от 768px до 991px) видно |
| .visible-lg | Изображение большего размера (992px и выше) видно |
| .hidden-xs | Очень мелкий (менее 768px) скрыт |
| .hidden-sm | Малые (до 768px) скрыт |
| .hidden-md | Средний (от 768px до 991px) скрыт |
| .hidden-lg | Изображение большего размера (992px и выше) скрыт |
Печать Классы
В следующей таблице перечислены классы печати. Используйте их для переключения контента для печати.
| Классы | Распечатать |
|---|---|
| .visible-print | Да, Видимый |
| .hidden-print | Виден только браузер, не печатать. |
Пример
Следующий пример демонстрирует использование перечисленных выше вспомогательных классов. Изменение размера браузера или загрузка примера на различных устройствах для проверки отзывчивых классов.
<div class = "container" style = "padding: 40px;">
<div class = "row visible-on">
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-xs">Очень маленький</span>
<span class = "visible-xs"> Видно на x-small</span>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-sm">Маленький</span>
<span class = "visible-sm"> Видно на small</span>
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-md">Средний</span>
<span class = "visible-md"> Видно на medium</span>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-lg">Большой</span>
<span class = "visible-lg"> Видно на large</span>
</div>
</div>
</div>
