Bootstrap адаптивный дизайн

Краткое введение

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

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

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

У нас есть наши жидкости примеры макетов применения производительности ответа , и приглашает Вас просматривать на различных размеров экрана. Вы можете использовать Chrome или FireFox , чтобы настроить окно браузера изменения размера расширения.

Нажмите здесь, вы можете просматривать бутстрапе примеры адаптивный дизайн .

Адаптивный веб-дизайн Работы

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

Углубленное изучение адаптивный веб-дизайн CSS

Мы будем 'бутстраповский-responsive.css "научиться учиться" адаптивный дизайн "является достижение нюанс. До этого, необходимо добавить следующую строку кода в области заголовка страницы:

 <META NAME = "вьюпорт" содержание = "ширина = ширина устройства, начальный масштаб = 1.0"> 

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

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

Первоначальный масштаб свойство является отношение начального окна просмотра. При установке на 1.0, устройство покажет первоначальную ширину.

Конечно, вы должны добавить Адаптивный CSS Bootstrap, следующим образом:

 <Ссылка HREF = "активы / CSS / бутстраповский-responsive.css" отн = "таблицы стилей"> 

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

Первая область к '@media (макс-ширина: 480px ) " начиналась как максимальная ширина 480 пикселей настроек устройства типа.

Вторая область к '@media (макс-ширина: 767px ) " начиналась как максимальная ширина 767 пикселей настроек устройства типа.

Третья область к '@media (мин-ширина: 768px ) и (макс-ширина: 979px) "начиналась как минимальная ширина 768 пикселей и максимальной шириной 979 пикселей настроек устройства типа.

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

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

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

объяснение

Для того, чтобы сделать макет более отзывчивыми, Bootstrap сделать три вещи:

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

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

Корневой элемент (HTML), чтобы сформировать контекст стека корневой, другой элемент формирования контекста стека (в том числе и относительно позиционируемых элементов, есть "Z-индекс 'вычисляется значение вместо' Auto ') путем произвольного позиционирования элемента. Контекст стека по отношению к блоку содержит не требуется.

3. Для корректного отображения названия и текст их размера.

Ускорение разработки для мобильных устройств дружественных макет

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

.Visible-телефон, ширина 767px и менее заметны на телефоне, на 979px до 768px Tablet скрыты от глаз, скрыты от рабочего стола, который используется по умолчанию.

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

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

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

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

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

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