Стартовая страницаНовостиДинамический дизайн в Bootstrap
Читайте также:

Динамический дизайн в Bootstrap

Bootstrap - это простой и легко настраиваемый HTML, CSS и Javascript фреймворк для более быстрой и удобной Web-разработки. Далее речь пойдет о том как использовать bootstrap для реализации динамического адаптивного дизайна 

Как использовать?

Для активации responsive-дизайна добавьте CSS-файл и meta-тег в <head> вашей страницы. Если вы компилировали Bootstrap со страницы Изменить и скачать, Вам необходимо включить только meta-тег.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Внимание! В Bootstrap по умолчанию не входят responsive-файлы так как не все страницы и элементы нуждаются в этих возможностях. Вместо того чтобы обременять разработчиков удалением responsive-дизайна и его элементов, мы считаем что логичнее предоставить простую возможность включения.

Подробнее о Динамическом дизайне

Responsive devices

Медиа-запросы позволяют изменять CSS "на лету", в зависимости от размера экрана, соотношения ширины и высоты экрана, типа устройства, и т.д., но обычно используется для изменения min-width и max-width элементов.

  • Изменяется ширина колонок в сетке шаблона
  • Заменяются плавающие элементы на фиксированные при необходимости
  • Изменяется размер заголовков и основного шрифта на разных устройствах

Используйте динамические возможности Медиа-запросов только для создания мобильной версии сайта. Для крупных проектов мы рекомендуем создавать отдельную версию дизайна и сайта.

Поддерживаемые устройства

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

Категория Ширина шаблона Ширина колонок Отступ колонок
Смартфоны 480px и меньше Плавающие колонки без фиксированной ширины
Планшеты 767px и меньше Плавающие колонки без фиксированной ширины
Портретные планшеты 768px и больше 42px 20px
По умолчанию 980px и больше 60px 20px
Большие дисплеи 1200px и больше 70px 30px

 

 /* Landscape - телефоны */
 @media (max-width: 480px) { ... }

 /* От ландшафтного экрана телефона до потретного планшета */
 @media (max-width: 767px) { ... }

 /* От портретного планшета до ландшафтного экрана и настольных дисплеев */
 @media (min-width: 768px) and (max-width: 979px) { ... }

 /* Большой дисплей */
 @media (min-width: 1200px) { ... }

 

Поддерживаемые классы

Показанная здесь таблица классов обеспечивает динамику для различных устройств и их работу в связке с сеткой макета и медиа-запросами (разделено по устройствам). Данные классы находятся в responsive.less.

Класс Телефоны 767px и меньше Планшеты от 979px до 768px Десктопы По умолчанию
.visible-phone Виден Скрыто Скрыто
.visible-tablet Скрыто Виден Скрыто
.visible-desktop Скрыто Скрыто Виден
.hidden-phone Скрыто Виден Виден
.hidden-tablet Виден Скрыто Виден
.hidden-desktop Виден Виден Скрыто

Когда использовать?

Использование данного функционала позволяет не создавать разные версии одного и того же сайта под разные устройства. Вместо этого можно управлять показом и скрытием контента в зависимости от устройства.

Пока еще нет ни одного комментария. 

Дима Кононов © - разработка сайтов и порталов.


Функционирует с 2013 года. Версия 3.0
Разработка и дизайн: Кононов Дмитрий
Комментарий: У меня есть, что сказать по этому поводу, но я лучше промолчу.
Сейчас зарегистрированных посетителей на сайте: 0 Посмотреть подробнее...
Новостная лента RSS 2.0

Вверх