Bootstrap grid позволяет быстро и удобно создавать адаптивный дизайн сайтов прямо в Photoshop. Экономит время верстальщика и ускоряет разработку. Давайте разберемся, как использовать Bootstrap сетку в PSD.
Суть Bootstrap сетки
Bootstrap использует сетка бутстрап из 12 колонок для создания гибкой компоновки контента. Элементы размещаются внутри контейнера, который делится на строки и колонки. Каждая строка содержит до 12 колонок, в которые уже помещается нужный контент.
Такая сетка бутстрап обладает высокой гибкостью и позволяет легко создавать адаптивный дизайн для разных разрешений экранов – от мобильных до десктопных устройств. Все благодаря тому, что Bootstrap 4 использует современный CSS фреймворк Flexbox для компоновки.
Flexbox позволяет легко менять направление, выравнивание и порядок элементов в любой момент времени. Это очень удобно при создании отзывчивого дизайна.
Основные компоненты Bootstrap сетка бутстрап:
- Контейнер (container) – обертка и центровщик для контента
- Строка (row) – горизонтальная группа колонок
- Колонки (column) – вертикальные секции контента
Рассмотрим простой пример 3 колонок одинаковой ширины, выровненных по центру страницы:
Здесь использован контейнер .container для центрирования, внутри которого создается строка .row, а в ней уже размещаются 3 колонки .col-*-* равной ширины на всех устройствах.
Уровни Bootstrap сетки
Bootstrap сетка бутстрап включает 5 основных адаптивных уровней:
- Extra small (xs) – для телефонов портретной ориентации
- Small (sm) – для телефонов альбомной ориентации
- Medium (md) – для планшетов
- Large (lg) – для ноутбуков и десктопов
- Extra large (xl) – для больших десктопов и ТВ
Каждый уровень имеет свою контрольную точку, на которой происходит изменение поведения колонок Bootstrap сетки. Это делает дизайн полностью адаптивным для любых размеров экранов.
Например, контент может располагаться в 1 колонку на мобильных, в 2 колонки на планшетах и в 3 колонки на десктопе. Все это легко реализуется классами Bootstrap сетка бутстрап.
Классы и селекторы
Для создания гибкой компоновки контента в Bootstrap 4 используется обширный набор классов сетки:
- col – колонка по умолчанию
- col-* - колонка определенной ширины
- col-sm-* - колонка определенной ширины со смещением на уровне sm
- row – строка по умолчанию
- row-cols-* – количество колонок в строке
- order-* – порядок колонок
- offset-* - смещение колонок
Эти классы можно комбинировать, чтобы реализовать практически любую компоновку. Например, расположить контент в 3 колонки на десктопах и в 1 колонку на мобильных:
Здесь использован класс .col-md-4 для создания 3 колонок на уровне md (планшеты, ноутбуки, десктопы), и .col-12 для 1 колонки на xs и sm уровнях (телефоны).
Переменные и миксины Sass
Для большей гибкости Bootstrap 4 использует препроцессор Sass. Он позволяет настраивать такие параметры сетка бутстрап, как:
- Число колонок
- Ширина колонок
- Размер отступов между колонками (gutter)
- Контрольные точки
- Медиа-запросы
Это делается с помощью переменных и миксинов в Sass файле _variables.scss. Например, параметр $grid-columns отвечает за число колонок.
Также есть готовые миксины для генерации семантического CSS кода колонок, отступов, контейнеров сетки Bootstrap. Это избавляет от необходимости писать все классы вручную.
PSD шаблон Bootstrap 3
Чтобы ускорить верстку сайта, можно использовать готовый PSD шаблон сетка бутстрап фотошопа. Он представляет собой Photoshop файл со слоями для 12-колоночной сетки Bootstrap 3, который накладывается поверх макета.
Это значительно облегчает работу верстальщика. Не нужно задумываться о адаптивности, просто размещайте блоки в нужные колонки слоев, и сетка автоматически сделает их отзывчивыми.
PSD шаблоны сетка бутстрап можно скачать или сделать самостоятельно. Главное, чтобы были прорисованы 12 колонок для всех 5 контрольных точек Bootstrap.
PSD шаблон Bootstrap 4
Версия Bootstrap 4 также получила широкую поддержку среди дизайнеров и верстальщиков. Для нее тоже доступны PSD шаблоны сетки.
Главное отличие от версии 3 в том, что теперь используется flexbox для компоновки. Это делает сетку еще более гибкой и мощной.
Также в Boltstrap 4 появилась дополнительная 5-я контрольная точка – Extra large (xl). А переменные и миксины Sass позволяют легко настраивать параметры сетки.
Создание PSD шаблона
Чтобы сделать собственный шаблон сетка бутстрап фотошопа, можно:
- Нарисовать его вручную в Photoshop
- Сгенерировать автоматически с помощью онлайн сервисов или скриптов
- Скачать готовый PSD файл в интернете
Главное потом правильно настроить его под нужный проект: подогнать цвета, шрифты, размеры под дизайн сайта. И можно приступать к верстке!
Примеры использования
Рассмотрим несколько примеров использования PSD шаблонов сетка бутстрап для ускорения верстки сайтов:
При создании одностраничного сайта или лендинга удобно использовать шаблон Bootstrap grid. Он позволяет легко располагать блоки в нужном порядке и с нужными отступами.
Например, можно разместить:
- Шапку сайта в 1 колонку
- Основной контент в 8 колонок
- Сайдбар в 3 колонки
- Футер опять в 12 колонок
При этом шаблон автоматически сделает такую компоновку адаптивной под все устройства.
Интернет-магазин
Для интернет-магазинов удобно использовать сетку из 3 колонок для отображения товаров. Например:
- Фильтр и панель поиска в боковой колонке
- Список товаров в средней колонке
- Корзина и дополнительные блоки в правой колонке
Все это легко располагается с помощью шаблона сетка бутстрап и автоматически адаптируется.
Редизайн сайта
Если нужно сделать рестайлинг имеющегося сайта, Bootstrap поможет в этом. Накладываем шаблон поверх старого макета и переносим блоки в нужные слои сетки.
Это позволит быстро изменить расположение элементов и сделать их адаптивными под новый дизайн. Таким образом можно легко обновлять старые проекты.
Преимущества использования
Итак, основные плюсы использования PSD шаблонов сетка бутстрап:
- Экономия времени верстальщика
- Ускорение разработки сайта
- Легкая адаптивная верстка
- Возможность быстрого рестайлинга
Шаблоны Bootstrap Grid для Photoshop – это мощный инструмент, который стоит использовать!
Недостатки PSD шаблонов
Несмотря на множество преимуществ, у PSD шаблонов Bootstrap сетки есть и некоторые недостатки:
- Замедляют работу Photoshop при большом количестве слоев
- Требуют дополнительного места для хранения файла
- Не гибки в плане изменения структуры сайта
Поэтому в некоторых случаях имеет смысл обойтись без шаблонов. Например, если дизайн сайта слишком нестандартный и не вписывается в 12-колоночную сетку Bootstrap. Или если скорость работы Photoshop важнее адаптивности макета.
Альтернатива PSD шаблонам
В качестве альтернативы PSD шаблонам сетка бутстрап можно использовать простые рамки и направляющие в Photoshop.
Это менее гибко чем сетка Bootstrap, зато не нагружает документ лишними слоями. Рамки можно легко настроить под любое количество колонок.
Другие варианты для адаптивной верстки в Photoshop - создание сразу нескольких макетов для разных разрешений или использование веб-верстки вместо PSD.
Обновления Bootstrap
Стоит отметить, что Bootstrap регулярно обновляется и выходят новые версии фреймворка.
Например, последняя на данный момент версия 5 уже использует сетку CSS Grid вместо Flexbox. Это открывает дополнительные возможности для компоновки контента.
Поэтому для актуальности нужно периодически обновлять PSD шаблоны сетка бутстрап или генерировать их заново. Тогда можно использовать все новые функции текущей версии Bootstrap.
Выводы
Использование PSD шаблонов для Bootstrap Грид кардинально упрощает создание адаптивного дизайна в Photoshop. Несмотря на некоторые ограничения, плюсов значительно больше:
- Быстрая адаптивная верстка
- Удобство расположения контента
- Высокая гибкость макета
Bootstrap grid является мощным инструментом для создания адаптивного веб-дизайна. Система из 12-ти колонок и 5 контрольных точек позволяет легко верстать сайты под разные разрешения – от мобильных до десктопных.
