Создание шапки

Для вёрстки шаблона нам потребуется бесплатная программа Notepad++ и необходимо установить плагин в браузер выбирающий цвета в шестнадцатеричном формате или в формате RGB.

В вёрстке шаблона используется адаптивная сетка bootstrap – все ячейки содержимого помещаются в блоки, строка это такой же блок,к которому присваивается класс row. Для задания отступа между строками обрамляются общим контейнером данному контейнеру присваивается класс container, каждый блок в строке уже является контейнером, в таком блоке можно создавать вложенные строки с блоками к которым применяются такие же классы как для родительского.

Наш шаблон разделён на несколько строк, в каждой из которой есть блоки, все строки лежат в общем внешнем контейнере имеющим определённую ширину. Шапка шаблона состоит из трёх блоков равной ширины. Задача адаптировать строки нашего шаблона под разные размеры экранов и задать классы для блоков в каждой строке. Для блоков сетки bootstrap есть четыре класса для разных размеров экрана (col – xs –, col – sm –, col – md –, col – lg –). Классы создают минимальную ширину для блока. Шапка шаблона адаптивна так же и для мобильных телефонов с шириной экрана менее 768 px. Шапка будет занимать всю ширину экрана телефона, поэтому блоку присвоим классы с префиксом col – xs –.

Для создания шапки шаблона мы обратимся к схематичному рисунку шаблона.

Рисунок 4 – Схематичный рисунок шаблона.

В неё входят три позиции логотип, контакты, поиск (Рисунок 6).

Рисунок 5 – Вёрстка шапки в Notepad++

Рисунок 6 – Отображение шапки в браузере