Bootstrap responsive — обозначение набора классов классов, позволяющих делать отзывчивую верстку. Классы отзывчивой верстки (не считая классов сетки) содержат комбинации для отображения и сокрытия HTML-элементов при разных размерах устройств отображения. Также они включают классы, которые прячут или показывают элементы страницы при печати, позволяя оформить версию страницы для печати.
Bootstrap responsive
| Оч. маленькие устройства телефоны(<768px) | Маленькие устройства планшеты (≥768px) | Средние устройства Desktops (≥992px) | Большие устройства Desktops (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
показываем | прячем | прячем | прячем |
.visible-sm-* |
прячем | показываем | прячем | прячем |
.visible-md-* |
прячем | прячем | показываем | прячем |
.visible-lg-* |
прячем | прячем | прячем | показываем |
.hidden-xs |
прячем | показываем | показываем | показываем |
.hidden-sm |
показываем | прячем | показываем | показываем |
.hidden-md |
показываем | показываем | прячем | показываем |
.hidden-lg |
показываем | показываем | показываем | прячем |
В версии бутстрапа 3.2 классы видимости доступны в трех вариациях
.visible-*-block |
display: block; |
|---|---|
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Для сокрытия или показа HTML-элементов при печати можно использовать классы:
.visible-print-block.visible-print-inline.visible-print-inline-block |
прячем | показываем |
|---|---|---|
.hidden-print |
показываем | прячем |