«Responsive»-классы в Bootstrap

Классы доступности контента

Используя по отдельности или комбинации классов доступности, вы сможете настроить отображение/скрытие контента в зависимости от размера экрана пользователя.

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

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

Начиная с версии 3.0.2 можно с помощью класса задавать свойство display.

Выглядят подобные классы следующим образом (на примере маленьких экранов с префиксом xs): .visible-xs-block, .visible-xs-inline или .visible-xs-inline-block.

Классы .visible-xs, .visible-sm, .visible-md и .visible-lg также будут работать. Но начиная с версии 3.2.0 их использование не рекомендуется. Такая запись эквивалентна .visible-*-block, так что, используйте ее.

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

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

И так же, как в случае с классами доступности, класс .visible-print будет работать, но использование его «резко осуждается» начиная с версии 3.2.0. Используйте .visible-print-block, за исключением особых случаев, когда блоку при распечатке нужно задать табличное отображение.

Примеры

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

Показать разные номера телефонов

В данном примере показываются два разных номера телефона для пользователей с большими и маленькими экранами. Да-да, можно для одного блока применять два класса одновременно:

<div class="visible-xs-block visible-sm-block">Номер телефона для «сотовых и планшетов версии»</div>
<div class="visible-md-block">Номер телефона для «полной версии»</div>

Скрыть для мобильных контактный email

В данном примере для пользователей мобильных телефонов не показывается email.

<div class="hidden-xs">Контактный email</div>

Скрыть боковое меню при печати

В данном примере нужно обернуть контейнер с боковым меню в div с соответствующим классом:

<div class="hidden-print">Контейнер с боковым меню</div>

Вывести при печати дополнительное сообщение

<div class="visible-print-block">

Спасибо за проявленный интерес
и потраченные в принтере чернила
приходите испытать наш новый пресс
улица Гоголя, 7, офис «Тортила»

Всегда Ваш,
Полиграф Полиграфыч

</div>

Важное заключение

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

Это недостаток всех адаптивных шаблонов. Если вам необходим более гибкий подход в плане загрузки контента, используйте PDA-версию сайта (спросите в комментариях как).