У нас все готово для разметки нашей страницы 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— унаследует этот стиль.
Я для наглядности введу текст и картинки в каждый блок. Не забудьте скопировать свои картинки в папку img.
Что у нас получилось?
Итак, на больших и средних экранах у нас отображаются четыре блока, а на маленьких располагаются друг под другом.
Что если мы хотим, чтобы у нас на маленьких экранах отображалось по два блока? Добавляем в название класса .col-xs-6.
Результат:
Если же вы хотите, чтобы у вас на маленьких экранах отображался один блок, то замените .col-xs-6 на .col-sm-6 в конце класса.
Смотреть продолжение Урок 6
Добавить комментарий