Как в фотошопе сделать сетку бутстрап bootstrap grid
Обновлено: 05.07.2024
Многие начинающие дизайнеры сталкиваются с проблемой, где взять или скачать сетку в формате psd для Bootstrap 3 или Bootstrap 4 для Photoshop.
Однако в Фотошопе сетка Bootstrap делается элементарно.
1) Создаем наш документ, например, 1920px на 1080px.
2) В верхнем меню выбираем пункт "Просмотр" и в нем "Новый макет направляющей. ".
3) Ставим галочку напротив блока "Столбцов".
- Число - 12
- Ширина - 67,5 пикс. для Bootstrap 3, 65 пикс. для Bootstrap 4.
- Средник - 30 пикс.
4) Ставим галочку напротив блока "Поле"
- Слева: 375 пикс для Bootstrap 3, 390 для Bootstrap 4.
- Справа: 375 пикс для Bootstrap 3, 390 для Bootstrap 4.
5) Внизу отмечаем галочки "Центрировать колонки", "Удалить существующие колонки". Жмем "Ок"
6) Повторяем действия: в верхнем меню выбираем пункт "Просмотр" и в нем "Новый макет направляющей. ".
7) Ставим галочку напротив блока "Столбцов".
- Число - 12
- Ширина - 97,5 пикс. для Bootstrap 3, 95 пикс. для Bootstrap 4.
- Средник - пустой
- Поле - снимаем галочку
8) Удалить существующие направляющие - убираем галочку, Центрировать колонки - галочка включена.
Bootstrap сетка, PSD
При создании дизайна сайтов в Adobe Photoshop не обойтись без использования какой-либо системы сеток. Можно создать сетку самостоятельно, используя направляющие, либо воспользоваться уже готовым, проверенным решением - готовой сеткой Bootstrap в формате PSD. Не смотя на то, что дефолтные размеры Bootstrap сетки несколько стандартизируют дизайн, данный вариант успешно используют в своей работе огромное количество веб-дизайнеров по всему миру. Кроме того, такая стандартизация позволяет максимально быстро выполнять HTML верстку созданного макета, что неминуемо приводит к ускорению работы над проектом в условиях разработки сайтов на потоке или создания шаблонов.
Параметры стандартной Bootstrap сетки в PSD формате:
- Общая ширина рабочей области: 1920px;
- Ширина контейнера с отступами: 1170px;
- Ширина колонки без отступов: 68px;
- Ширина отступа (Gutter): 15px;
- Система сетки: 12-ти колоночная.
Расстояние между колонками и некоторые размеры могут иметь погрешность +/- 1px в связи с тем, что некоторые нечетные величины не могут быть поделены поровну. Но это некритично в масштабах разработки PSD макета.
Правила работы с PSD сеткой Bootstrap
Существуют определенные правила работы с Bootstrap сеткой. Некоторые начинающие веб-дизайнеры не учитывают в своей работе эти правила, в результате чего возникает непонимание между верстальщиком и дизайнером, в случае, если над проектом работает команда. Bootstrap сетка в PSD формате для создания дизайна сайта разрабатывалась основываясь на "физических" свойствах сетки CSS фреймворка Bootstrap и дизайнер должен придерживаться определенных правил для исключения излишних коллизий в процессе разработки.
1. Крайние поля служат исключительно для отступов на малых разрешениях и не могут быть использованы для размещения каких-либо элементов дизайна или контента сайта.
2. Вы можете использовать любое количество одиночных колонок для визуализации различных блоков сайта.
3. После разделения макета на колонки и блоки, промежутки (Gutters) между ними не могут быть использованы для размещения каких-либо элементов дизайна или контента сайта.
4. Не бойтесь выходить за рамки сетки. Если вы решили сделать какую-то нестандартную секцию или блок - реализуйте вашу идею вне рамок Bootstrap сетки, если это необходимо. Но постарайтесь обеспечить ваше решение какой-либо системой, например, придерживайтесь центра макета или частично используйте возможности Bootstrap сетки, соблюдайте кратность элементов или придерживайтесь любой другой логической системы при создании нестандартного блока. Так вы значительно облегчите работу верстальщика, если над проектом трудится команда разработчиков. Вам скажут спасибо.
Последний пункт очень важен, так как многие начинающие веб-дизайнеры боятся выходить за рамки Bootstrap сетки и дизайн, в большинстве случаев, получается довольно однообразный и скучный. Помните, что направляющие Bootstrap сетки необходимы вам только для разметки блоков сайта, которые необходимо упорядочить в соответствии с системой сеток, это может быть разделение макета на базовые логические части - сайдбар + контент, определение элементов блока, таких, как айтемы карусели, секции новостей и так далее. В остальном, не стоит ограничиваться рамками сетки и делать визуализацию только по направляющим. Однако если вы создаете дизайн определенной секции или блока в соответствии с системой Bootstrap сетки, обязательно придерживайтесь правил из пунктов 1,2,3 выше.
5. Порядок элементов
5.1 Классы порядка элементов
Можно использовать специальные классы с префиксом «.order-» для определения порядка элементов. Если вы знакомы с Flex-версткой, данные правила будут вам знакомы. Bootstrap 4 дает возможность задавать порядок элементов с помощью классов. Можно задавать порядок напрямую (.order-1.order-md-2):
Или можно использовать специальные классы, которые определяют порядок первого и последнего элементов (.order-first, .order-last):
5.2 Смещение колонок
По аналогии с Bootstrap 3, в 4-й версии также есть возможность горизонтального смещения колонок, однако реализовано это несколько иначе и для этого есть специальные классы с префиксом «.offset-».
5.2.1 Классы смещения
Сдвигать колонку вправо можно, используя классы «.offset-md-*», которые увеличивают левый отступ на * количество элементов. Из примера ниже, класс «.offset-md-2» сдвинет колонку «.col-md-4» на 2 колонки вправо, остальные примеры работают по аналогии:
Можно сбрасывать отступ на всех разрешениях благодаря классу «.offset-*-0», где * - это sm, md, lg или xl.
3. Адаптивные классы
3.1 Брейкпоинты
Очень интересная возможность Bootstrap 4 - возможность задавать универсальные колонки, которые будут отображаться на всех разрешениях. Это упомянутый ранее класс «.col». Кроме того, можно определить класс, указывающий конкретное количество колонок, занимаемое содержимым - это классы с префиксом «.col-», например «.col-6» говорит нам о том, что содержимое займет 6 колонок из 12. В случае, когда конкретное количество задавать не обязательно, можно смело использовать универсальный класс «.col».
3.2 На мобильных устройствах
Вы можете использовать префикс класса «.col-sm-» для того, чтобы задать базовую сетку на всех разрешениях, кроме самых маленьких. На небольших экранах колонки такой сетки будут складываться друг под друга. На разрешениях больше - будут занимать столько места, сколько вы определили в классах.
Здесь мы видим, что первый ряд на устройствах с разрешением более «sm», то-есть больше, чем 576 пикс. разбивается на 2 колонки - шириной 8 и 4 из 12-ти соответственно. Ширина колонок во втором ряду вычисляется автоматически, но на самых малых разрешениях эти колонки также складываются друг под друга, благодаря классу «.col-sm».
3.3 Создание сложной комбинированной сетки
С помощью Bootstrap вы можете создавать любые комбинации колонок при создании сетки. Для каждой колонки можно задать любое поведение на различных разрешениях с помощью адаптивных классов. Здесь отличия от третьей версии - только в наименованиях классов.
Смотрите по картинкам
Направляющие сетки для Bootstrap 3
Направляющие сетки для Bootstrap 4
Вот и все! Теперь вы знаете, как легко и просто делается сетка в Фотошопе для Bootstrap 3 или Bootstrap 4. И не надо никаких png и прочих заморочек.
Для самых ленивых - вы можете скачать zip-архив с уже готовыми пустыми psd-файлами с сетками для Bootstrap 3 и 4.
Bootstrap 4. Сетка. Подробное руководство
Всем привет, друзья! В середине 2013 года вышел Bootstrap 3, который за прошедшие годы неплохо зарекомендовал себя как удобный, расширяемый CSS каркас для быстрого создания адаптивных макетов. Миллионы сайтов успешно используют этот фреймворк и мы уже порядком привыкли к нему. 18 января 2018 года случилось важное событие — вышла из беты долгожданная версия Bootstrap 4, основанная на использовании модели Flexbox для разметки, которая в настоящее время уже имеет поддержку всех современных браузеров и является более удобной и гибкой для разработчиков, нежели классическая модель разметки, основанная на Float. Теперь с полной уверенностью можно сказать, что на «Флексах» не можно, а НУЖНО верстать!
6. Вложенность
Весьма ожидаемо, что Bootstrap 4 поддерживает вложенность элементов. Работает здесь все также, как в третьей версии - чтобы вложить колонки в другие, необходимо создать дочерний класс «.row» и уже в него вкладывать колонки.
Мы рассмотрели основные особенности работы с сеткой Bootstrap 4. Если у вас есть желание более подробно ознакомиться со всеми возможностями фреймворка, рекомендую изучить документацию на официальном сайте.
В следующем уроке мы рассмотрим настройку Bootstrap сетки под ваш конкретный проект на примере использования в стартовом шаблоне OptimizedHTML 4. А именно настройку, работу с переменными отступов, брейкпоинтов, количества колонок и прочего.
2. Автоматическая разметка колонок
2.1 Колонки одинаковой ширины
С помощью нового универсального класса «.col» можно указать до 12 колонок в ряду (родитель «.row»), ширина которых будет автоматически вычислена в зависимости от количества элементов и будет равна.
2.2 Установка ширины одной колонки
Вы также можете явно установить ширину одной колонки, а остальные оставить автоматическими.
В данном примере второй элемент в третьем ряду имеет класс «.col-6» и второй элемент во втором ряду имеет класс «.col-5», которые занимают соответствующее количество колонок на всех разрешениях экрана. Ширина остальных колонок является отзывчивой и вычисляется автоматически, занимая все оставшееся пространство.
2.3 Контент переменной ширины
Можно использовать класс «col--auto», чтобы определить контент с переменной шириной, в зависимости от занимаемого пространства содержимым колонки. Где breakpoint - размер экрана (xl, lg, md или sm).
Здесь мы видим, что две центральные колонки занимают ширину, соответствующую ширине содержимого, однако в первом ряду благодаря классу «.justify-content-sm-center» у «.row» весь ряд центрируется и общая ширина зависит только от ширины центральной колонки, в то время, как второй ряд растягивается на всю доступную ширину, но вторая колонка остается фиксированной по ширине содержимого.
2.4 Мульти-ряд
Благодаря Bootstrap 4 вы можете сделать в одном ряду несколько строк (переносов). Реализовать это можно с помощью класса «.w-100», который очень похож на тег «br» и по-сути просто делает перенос колонок на новую строку.
Обратите внимание, что данный класс является частью дополнительных возможностей Bootstrap 4, которые подключаются к проекту отдельно в случае использования Sass версии проекта Bootstrap и находятся в папке «scss/utilities». Вы также можете подключить другие плагины из этой папки к вашему проекту по необходимости.
Как работать с сеткой bootstrap в фотошопе?
1. Можно ли сетку bootstrap использовать под любой дизайн?
2. Как добавить bootstrap сетку в фотошоп? Ставил Guide Guide но не видно его в фотошопе почему-то?
3. Есть сетки в виде psd, как их использовать в фотошоп т.е. как положить её сверху своего макета?
1) Нет. Сетка это лишь вариант все упорядочить и подчинить единому ритму. Никто не мешает вам придумать какой угодно свои дизайн со своей собственной сеткой.
3) Просто делайте дизайн прямо в этом PSD сохранив его под другим именем.
Если же вы уже начали делать дизайн в другом файле, то откройте оба (сетку и ваш файл). Затем выберите все необходимые слои сетки. Затем Правый клик > Dublicate. В появившемся меню в списке Document выберите тот, в который хотите перенести слои. Слои скопируются в ваш макет.
Дополнительные материалы урока Bootstrap 4
Сегодня мы подробно разберем работу с сеткой Bootstrap 4, по ходу дела сравнивая ее со старой версией. Данный урок будет полезен вам не только если вы новичок и знакомитесь с Bootstrap, но и в том случае, если вы опытный разработчик и хотите изучить все правила и нюансы верстки с использованием сетки Bootstrap 4 и Flexbox инструментов, входящих в ее состав.
4. Выравнивание
Bootstrap 4 основан на «флексах» и дарит нам все возможности данной модели, которые доступны в простых готовых классах. В числе возможностей - вертикальное и горизонтальное выравнивание.
4.1 Вертикальное выравнивание
Помимо управления выравниванием через родительский «.row», можно выравнивать колонки, задавая им соответствующие классы:
4.2 Горизонтальное выравнивание
Кроме того, Bootstrap 4 имеет в своем арсенале инструменты для горизонтального выравнивания колонок при помощи префикса «.justify-content-» у «.row».
4.3 Удаление полей между колонками
Очень часто встречаются ситуации, когда необходимо убрать поля между колонками. Например, если вы создаете галерею и элементы должны быть расположены вплотную, например так:
Для этого достаточно у элемента «.row» задать дополнительный класс «.no-gutters».
4.4 Перенос колонок на новую строку
Если ряд (.row) заполняется суммарным количеством колонок более 12-ти, последующая колонка переносится на новую строку.
1. Основные параметры сетки по умолчанию
По умолчанию сетка Bootstrap 4 очень похожа на сетку третьей версии, однако появились некоторые важные отличия.
Из таблицы основных опций мы можем заметить явные отличия от сетки третьей версии. Теперь отсутствует префикс класса «.col-xs-», отвечающий за самые маленькие разрешения, вместо него указывается упрощенный префикс «.col-». Можно ошибочно подумать, что префикс «.col-» отвечает за минимальные разрешения мобильных устройств, однако это не совсем так. Помимо всего прочего, префикс «.col-» - это одно из важнейших новшеств Bootstrap 4. Это класс, который отвечает за автоматическую разметку колонок на любом разрешении. Но об этом позже.
За малые разрешения (small) отвечает префикс «.col-sm-» с медиа-запросом от 576 пикс. Ширина контейнера составляет 540 пикс. Средние разрешения отрабатываются от 768 пикс. Ширина контейнера - 720 пикс. Большие разрешения работают с разрешения устройств от 992 пикс. Ширина контейнера - 960 пикс. И самые большие - от 1200 пикс. Ширина контейнера фиксируется на значении 1140 пикс.
Обратите внимание, что максимальные значения медиа-запросов имеют неточные значения с дробной частью «.98» в пикселях. Это заметно при выборе Desktop First метода верстки, где максимальная ширина медиа-запроса ограничена. Например, при компиляции Sass «+media-breakpoint-down(lg)» мы получим «@media (max-width: 1199.98px)». Здесь 0.02 пикселя освобождаются для старта следующего медиа-запроса. Имейте это ввиду. В следующих выпусках «Джедай верстки 8» мы рассмотрим этот и множество других моментов из этого урока на реальном примере.
Читайте также: