Адаптивный дизайн с помощью Bootstrap 3 Grid System. Делаем макет сайта
В этом посту, мы поговорим про основные блоки, которые присущи большинству сайтов и про создание адаптивной верстки с помощью grid системы от bootstrap3.
Что касается основных блоков или областей сайта, то тут можно выделить следующие: 1. header – шапка сайта, верхняя область в которой находится логотип, главное меню (иногда), доп. инфа (контакты, доп. меню, переключатели языков) и т.д. 2. footer – подвал сайта, самая нижняя часть веб-страницы в которой могут находится дополнительные меню, блок с подпиской, блок с контактами, социальные иконки, копирайт и т.д. 3. основная часть – находится как правило сразу под шапкой сайта. В основной части содержимое варьируется в зависимости от тематики сайта, если это блок, то будет некий контент (пост, страница и т.д.), если это интернет магазин, то тут будет товар (страница товара, категория товаров и т.д.). 4. sidebar – боковая панель сайта, она бывает не во всех дизайнах, а в некоторых их может быть несколько. Сайдбар как правило находится слева или справа от основного контента и содержит в себе различные виджеты.
На этом я пожалуй остановлюсь, т.к. не вижу смысла расширять список выше перечисленных областей, которые присущи большинству сайтов.
Особенности верстки с применением сетки
Ниже представлен код разметки, для формирование четырех столбцов при помощи сетки:
Как видно из кода выше, для формирование структуры сайта используются три основных класса: .container, .row, .col-*. .container – блок обертки всего содержимого, задает основную ширину сайта .row – блок обертки для колонок, имеет отрицательный отступ .col-* – непосредственно блок колонки
Теперь давайте немного подробнее поговорим об правил построения макета с применением сетки.
- Строки (.rows) должны быть размещены в пределах .container (фиксированной ширины) или .container-fluid (полной ширины) для правильного выравнивания и заполнения.
- Используйте строки (.rows) для создания горизонтальной группы столбцов.
- Содержание должно быть размещены в столбцах, и только колонны могут быть непосредственными потомками строк.
- Стандартные классы сетки, такие как .row и .col-xs-4 используются для быстрого создания сетки макетов.
- Колонны имеют внутренний отступ (padding), который для первой и последней колонны компенсируется отрицательным отступом margin в .row.
- Столбцы сетки создаются с учетом максимального количества столбцов – 12, т.е. чтобы создать три блока, то нужно использовать класс .col-md-4.
- Если в одном ряду размещено более 12 колон (суммарное значение ширины всех колонок), то каждая последующая колона будет перенесена на новый ряд.
Скачаем css grid bootdtrap 3 к себе на компьютер
Переходим на страницу настроек содержания вашего архива bootstrap 3 и снимаем все галочки, оставляем только на против Grid System (это если вы хотите скачать только стили для формирования макета с помощью сетки)
Подключаем Bootstrap Grid Sysytem к себе на страницу:
Верстаем каркас сайта с помощью bootstrap3 grid system
Каркас мы будем делать без содержимого, т.е. будут только условные блоки. Пример верстки я решил сделать для интернет магазина, т.к. в таком случае будем более наглядно отображено поведение блоков при изменении ширины браузера.
В моем макете будут следующие области: 1. шапка сайта в ней логотип и содержимое шапки 2. сайдбар 3. подвал, разделенный на верхнюю часть с 4 блоками меню и нижнюю часть с копирайтом и областью социальных иконок 4. основная область категории с 8 продуктами
Помимо основных классов сетки я ввел внутрь каждой колоны блок с классом .well который залил серым цветом (для наглядности). Так же все блоки .row имеют идентификаторы, сделал я это специально, чтобы показать, что использование сетки не создает особой глубины или вложенности в html верстке. Все блоки с колонок также имеют свои “семантические” классы.
Вот весь код сверстанного макета с применением bootstrap 3 grid system:
Как видно из верстки, для блока product используется сразу три класса колонок: col-sm-6 col-md-4 col-lg-3. col-lg-3 отобразить наши товары по 4 вряд, для экранов шириной более 1200px col-md-4 отобразить наши товары по 3 вряд, для экранов шириной более 992px col-sm-6 отобразить наши товары по 2 вряд, для экранов шириной более 768px
Таким образом комбинируя классы со значением ширины блока для разного разрешения экрана пользовательского устройства, мы добиваемся адаптивности нашего дизайна и качественного и отзывчивого отображения самого сайта.
Применение сетки при создании сайта позволяет шаблонезировать рутинные подходы к однотипным проектам и создавать уже готовые макеты (решения) для разноплановых задач.
Подводим итоги: верстка с помощью сетки довольно проста и удобна, сказать, что из-за ее использования html структура слишком увеличивается и растет глубина вложенности элементов сайта, я не могу. Если подчистить под себя файл библиотеки стилей для bootstrap 3 сетки, то можно получить размер менее 10Kb, а то еще и меньше. Одним словом пробуйте, экспериментируйте и находите удобное для себя решение, которое ускорило бы вашу работу и качество. Если остались вопросы по теме верстки макета сайта с применением сетки, пишите буду рад помочь 🙂