Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

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

Чтобы быстро создавать шаблоны, которые будут привлекательно смотреться на мобильных устройствах в Bootstrap существуют специальные классы. О них и пойдет речь в этом уроке.

Сергей    06.07.2017    37    5.0 из 5.0 (2)

Оцените материал:
Цель урока

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

Как на мобильных вывести один блок, а ноутбуках и планшетах другой? Ответ в этом уроке.

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

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

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

«Телефоны» (<768px) «Планшеты» (≥768px) «Ноутбуки» (≥992px) «ПК» (≥1200px)
.visible-xs-* Показан
.visible-sm-* Показан
.visible-md-* Показан
.visible-lg-* Показан
.hidden-xs Показан Показан Показан
.hidden-sm Показан Показан Показан
.hidden-md Показан Показан Показан
.hidden-lg Показан Показан Показан

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

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

Группа классов Свойство CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

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

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

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

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

CSS классы На сайте При печати
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Показан
.hidden-print Показан

И так же, как в случае с классами доступности, класс .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-версию сайта (спросите в комментариях как).

Упражнения

  1. Определите, какой контент на устройствах с каким размером экрана должен быть показан, а какой — скрыт
  2. Исходя из определенного ранее перечня контента и устройств, настройте шаблон соответствующими классами
  3. Попробуйте запустить печать страницы сайта (Ctrl + p). Скройте ненужные блоки с помощью специальных классов. Добавьте информацию для печати, которая может пригодиться посетителю


Оцените материал:


Расскажите друзьям и коллегам о полезной статье:

Обсуждение

Всего комментариев: 0

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