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

Введение:

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

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

Для создания адаптивных веб-страниц Вам стоит ознакомиться с реализованной Bootstrap системой разметки - «сетка» (Bootstrap grid). Сетку формируют 12 отдельных столбцов, которые также могут использоваться группами для создания более широких колонок.

Система разметки Bootstrap является адаптивной, вследствие чего столбцы перестроятся в соответствии с размером экрана.

Сетка включает в себя такие классы:

xs (для телефонов) – менее 768px
sm (для планшетов) – от 768px
md (для ПК и ноутбуков) – от 992px
lg (для ПК с мониторами большой диагонали) – от 1200px

Наглядный пример разметки страницы на строки и столбцы для отображения на ПК:

Отображение на ПК

В коде это может выглядеть так:

div>

Или так:

div>

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

Применение нескольких классов

К примеру:

Responsive block 1

div>

Responsive block 2

div>

Рассмотрим первый пример.

Первым делом, откройте предпочтительную Вам среду разработки и создайте файл index.html. Далее потребуется подключить сам Bootstrap. Есть два варианта подключения:

Вашего файла соответствующие-и;следующий код:

скачать .zip с официального сайта(http://getbootstrap.com/) и добавить в
воспользоваться более быстрым способом и просто подключить с помощью CDN добавив в

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

В Bootstrap существуют два класса контейнеров: “container” и “.container-fluid”. Сразу скажу о том, что адаптивности, как таковой, мы добьемся, используя контейнер как первого, так и второго типа. Различие между ними состоит в том, что “.container” будет имеет фиксированную максимальную ширину, в то время как “.container-fluid” является “резиновым” и растягивается на всю ширину экрана. Подробнее о контейнерах можно прочесть на сайте (http://getbootstrap.com/css/#grid) в разделе Containers.

Давайте рассмотрим, как это работает на примере.

Пример:

Создадим

с классом “container” в

и добавим в него две строки (

с классом “row”). В первую строку добавим два столбца, а во вторую три столбца. Главное помнить, что суммарное количество столбцов должно быть равным двенадцати.

Код выглядит так:

DOCTYPE html>

<html>

<head>

head>

<body>

Первая строка, первый столбец.

div>

Первая строка, второй столбец.

div>

Вторая строка, первый столбец.

div>

Вторая строка, второй столбец.

div>

Вторая строка, третий столбец.

div>

body>

html>

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

Фиксированная страница

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

Сперва столбцы перестроятся так:

Изменение размера окна браузера

А затем так:

Окно браузера

Теперь давайте изменим класс нашего

на класс “container-fluid”, а все остальное оставим без изменений. Затем откройте Вашу страничку в браузере и посмотрите разницу.

Изменение класса

Попробуйте изменить размеры окна и посмотрите, как перестраиваются столбцы.

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

Результат после изменений

После изменений

Разобравшись с различиями между этими двумя классами контейнеров, можно приступить к работе с самой сеткой.

Предлагаю рассмотреть адаптивность системы разметки Bootstrap на примере создания формы регистрации пользователя.

Второй пример:

Создадим html страницу со стандартной структурой. Между тегами

вставляем

с классом “container” для того, чтобы максимальная ширина формы была фиксированной.

DOCTYPE html>

<html>

<head>

<title>Our registration formtitle>

head>

<body>

div>

body>

html>

Теперь мы можем начать работу непосредственно над нашей формой. Добавим в контейнер

с классом “row” и в него один

с классами “col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4”.

Здесь “col-xs-12 col-sm-6 col-md-4” - уже знакомые нам классы, которые будут задавать ширину формы при разных размерах экрана.

Акцентирую внимание на классах “col-sm-offset-3 col-md-offset-4”. Подобные классы “col-md-offset-*” используются для смещения колонок, задавая отступ слева от столбца, к которому они применены на «*» количество колонок. В нашем примере будет сделан отступ шириной в 3 колонки при размере экрана менее 768px, и отступ размером в 4 колонки при размере экрана от 992px.

div>

Нашу форму следовало бы упаковать в компонент-панель (для удобства). За это отвечает класс “panel”. Применим его к

. К этому же

применим класс “panel-primary”, который задает синий фон для заголовка. Для добавления самого заголовка также потребуется отдельный

с классом “panel-heading”, в который уже помещают теги для задания заголовков любого уровня

с примененным к ним классом “panel-title”.

<h3 class="panel-title">Registration formh3>

div>

На данном этапе наша форма в браузере будет выглядеть так:

Форма в браузере

После

…

добавим тег

с классом “panel-body” и непосредственно в этот

мы будем добавлять поля для заполнения пользователем.

В нашей форме будут такие поля:

Имя
Фамилия
Email
Пароль
Поле для повторного введения пароля, как его подтверждение

В качестве поля ввода мы будем использовать тег с атрибутом type, установленным разными значениями. Нужно отметить, что я использую HTML5, в котором для данного атрибута добавлены определенные значения для адресов электронной почты. Подробнее об этом вы сможете узнать из статьи (http://htmlbook.ru/html/input/type).

Также нам понадобится кнопка для подтверждения ввода и дальнейшей отправки информации о пользователе на сервер. В Bootstrap имеется специальный класс “btn” для создания кнопок.

Реализуем кнопку с помощью тега с атрибутом “submit” и классами “btn btn-info”, где класс “btn-info” задает кнопке синий цвет. Подробнее о кнопках вы сможете прочесть на сайте в разделе Buttons.

Нам нужно добавить три

с классом “row” внутрь

с классом “panel-body”. В первой и третьей строке будет по два столбца, а во второй строке - один. В данном примере каждое поле формы при уменьшении размера окна перестроится и будет расположено в отдельной строке.

Код выглядит так:

div>

div>

div>

div>

div>

div>

На данном этапе форма выглядит так:

Форма

Изменив размеры окна, мы увидим адаптивность в действии:

Изменив размер окна

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

с классом “form-group” , который задаст отступы от полей сверху и снизу. Подобного результата можно добиться, используя свойство CSS - “margin”.