Адаптивный веб-дизайн с помощью Twitter Bootstrap

Вступление

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

Что такое адаптивный веб-дизайн

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

Хотя здесь обсуждается, как создать адаптивный дизайн с помощью Twitter Bootstrap, мы начали с эксклюзивного учебника по адаптивному веб-дизайну .

Мы применили адаптивные функции к нашему Примеру макета флюида и просим вас просмотреть его на экранах разных размеров. Вы можете изменить размер своего браузера, используя расширение браузера «Window Resizer» для Chrome или FireFox .

Вы можете просмотреть этот пример адаптивного дизайна с помощью Twitter Bootstrap .

Как работает адаптивный веб-дизайн

Чтобы адаптивный веб-дизайн работал, вам нужно создать CSS, который включает в себя стили, подходящие для устройств разных размеров или, точнее, для разных диапазонов размеров устройств. Когда страница загружается на определенное устройство с использованием различных методов веб-разработки, таких как Media Queries, определяется размер области просмотра устройства, а затем загружаются стили, специфичные для этого устройства.

Окунёмся в адаптивный веб-дизайн CSS

Мы будем принимать во внимание «bootstrap-responseive.css» и попытаемся понять нюансы того, как достигается этот материал «Responsive Design». Но перед этим вы должны знать, что вам нужно добавить следующую строку в раздел head вашей веб-страницы:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

Свойство width устанавливает ширину экрана. Он может содержать значение, подобное 320, обозначать 320 пикселей или может иметь значение «ширина устройства», которое указывает браузеру использовать собственное разрешение (или ширину, которую вы можете сказать для простоты) устройства.

Свойство initial-scale представляет собой начальный масштаб области просмотра в виде множителя. Таким образом, когда установлено значение 1.0, оно представляет собственную ширину рассматриваемого устройства.

И, конечно, после этого вы должны добавить адаптивный CSS-код Twitter Bootstrap, как показано ниже:

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Теперь, если вы посмотрите на адаптивный файл CSS, вы обнаружите, что после объявления некоторых общих вещей (от строки № 10 до 22), есть различные разделы, начинающиеся с «@media» . И так пишутся стили для устройств разного размера.

Первый из этих разделов начинается с ' @media (max-width: 480px) ', который устанавливает стили для устройств, максимальная ширина которых составляет 480 пикселей.

Второй раздел начинается с ' @media (max-width: 767px) ', который устанавливает стили для устройств, максимальная ширина которых составляет 767 пикселей.

Третий раздел начинается с ' @media (min-width: 768px) и (max-width: 979px) ', в котором задаются стили для устройств с минимальной шириной 768 пикселей и максимальной шириной 979 пикселей.

Следующий раздел предназначен для устройств с максимальной шириной 979 пикселей. Итак, начинается с ' @media (max-width: 979px) '.

Последние два раздела начинаются с ' @media (min-width: 980px)' и '@media (min-width: 1200px) '; поэтому первый предназначен для устройств с минимальной шириной 980 пикселей и 1200 пикселей.

Итак, что в основном делает эта таблица стилей, так это хранение стилей в соответствии с минимальной и максимальной шириной устройств с использованием свойств min-width и max-width .

Небольшое объяснение

Чтобы сделать макет адаптивным, Twitter Bootstrap выполняет следующие три действия:

1. Изменяет ширину столбца в сетке.

2. При необходимости он использует элемент стека вместо float. если вы не очень понимаете, что это за элемент стека, тогда может пригодиться следующая форма w3.org:

Корневой элемент (html) формирует корневой контекст стека. Другие контексты суммирования генерируются любым позиционированным элементом (включая относительно позиционированные элементы), имеющим вычисленное значение «z-index», кроме «auto». Контексты стека не обязательно связаны с содержащимися блоками.

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

Разрабатывайте мобильные макеты быстрее

Twitter Bootstrap имеет несколько классов утилит для быстрой разработки удобных для мобильных устройств макетов. Эти классы доступны на сайте responseive.less.

.visible-phone , видимый на телефонах шириной 767px и ниже, скрытый на планшетах от 979px до 768px, а также скрытый на десктопах, который используется по умолчанию.

.visible-tablet , скрытый на телефонах шириной 767px и ниже, видимый на планшетах размером от 979px до 768px и скрытый на рабочих столах, который используется по умолчанию.

.visible-desktop , скрытый на телефонах шириной 767px и ниже, скрытый на планшетах размером от 979px до 768px и видимый на рабочих столах, который используется по умолчанию.

.hidden-phone , скрытый на телефонах шириной 767px и ниже, видимый на планшетах размером от 979px до 768px и видимый на рабочих столах, который используется по умолчанию.

.hidden-tablet , видимый на телефонах шириной 767px и ниже, скрытый на планшетах от 979px до 768px и видимый на десктопах, который используется по умолчанию.

.hidden-desktop , видимый на телефонах шириной 767px и ниже, видимый на планшетах от 979px до 768px и скрытый на десктопах, который используется по умолчанию.

Вы можете скачать все файлы HTML, CSS, JS и изображения, используемые в наших руководствах, здесь.

Предыдущий: Twitter Bootstrap Layout учебник
Далее: Как отключить адаптивную функцию Twitter Bootstrap