Bootstrap Отзывчивой Utilities
Bootstrap предоставляет некоторые вспомогательные классы для достижения развития для мобильных устройств дружественных быстрее. Эти запросы могут объединить большие, малые и средние оборудования через средства массовой информации, чтобы понять содержимое устройства, чтобы показать и скрыть.
Используя эти инструменты должны быть осторожными, чтобы не создавать совершенно разные версии одного и того же сайта.Отзывчивый утилита в настоящее время доступна только в блоках и таблицы коммутации.
| Ультра-маленький экран Телефон (<768px) | Небольшой экран Таблетка (≥768px) | Средний экран Desktop (≥992px) | Большой экран Desktop (≥1200px) | |
|---|---|---|---|---|
| .Visible-xs- * | видимый | скрывать | скрывать | скрывать |
| .Visible-sm- * | скрывать | видимый | скрывать | скрывать |
| .Visible-MD- * | скрывать | скрывать | видимый | скрывать |
| .Visible-* LG- | скрывать | скрывать | скрывать | видимый |
| .hidden-хз | скрывать | видимый | видимый | видимый |
| .hidden-см | видимый | скрывать | видимый | видимый |
| .hidden-мкр | видимый | видимый | скрывать | видимый |
| .hidden-Л.Г. | видимый | видимый | видимый | скрывать |
Начиная с версии v3.2.0, формируется как .Visible - * - * размер класса для каждого экрана есть три варианта, каждый для другого списка свойств отображения CSS выглядит следующим образом:
| Кластеры | дисплей CSS |
|---|---|
| .Visible - * - блок | Дисплей: блок; |
| .Visible - * - рядный | Дисплей: встроенный; |
| .Visible - * - встроенный блок | Дисплей: встроенный блок; |
Таким образом, ультра-маленький экран (хз), например, доступны .Visible - * - * классы: .Visible-хз-блок, .Visible-хз-рядный и .Visible-хз-рядный блок.
Также существуют .Visible-хз, .Visible-см, .Visible-М.Д. и .Visible-Л.Г. классы. Но с самого начала версии v3.2.0 больше не рекомендуется. В особых случаях <table> элементы, связанные с пределами, они .Visible - * - блок такой же.
Печать категории
В следующей таблице перечислены категории печати. Используйте их для переключения печати содержимого.
| класс | браузер | принтер |
|---|---|---|
| .Visible-принт-блок .Visible-принт-рядный .Visible-печати встроенный блок | скрывать | видимый |
| .hidden-печать | видимый | скрывать |
примеров
В следующем примере показано, как перечисленные выше использования вспомогательного класса. Отрегулируйте размер окна браузера, или загрузить экземпляры на разных устройствах, тест отзывчивым утилиты класса.
примеров
Попробуйте »
Результаты следующие:
Галочка (✔) указывает на то, что элемент отображается в текущем видовом экране.