Урок 5: Создаем первую страницу в Bootstrap 3

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

Итак, наша страница будет состоять из хедера, основных колонок (я буду называть их блоками, чтобы не путать с колонками сеточной системы Bootstrap 3) и футера.

Напомню, что сеточная система Bootstrap состоит из 12 как бы невидимых колонок.

Структура нашего сайта будет такова:

Первым делом, создадим класс .container. Контейнер предотвращает соприкосновение содержимого сайта с краями окна браузера, используя отступ в 15 пикселей с каждой стороны. Это также обеспечивает размещение контента контейнера по центру.

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

Для хранения всех наших фотографий и картинок, создадим папку img и сохраним картинку logo.png.

Наш хедер будет занимать 100% экрана на всех устройствах, поэтому используем класс .col-lg-12. Также укажем ссылку на картинку с лого:

Теперь перейдем к созданию четырех блоков. Их тоже необходимо поместить в класс .row.

Нам необходимо, чтобы начиная со среднего экрана, наши колонки располагались горизонтально, а на маленьких экранах друг под другом. Для этого используем класс .col-md-3 (12 колонок сетки делим на три и получаем четыре блока). По умолчанию, .col-lg— унаследует этот стиль.