Как настроить сетку по bootstrap ?

Bootstrap — это набор готовых инструментов для создания адаптивного дизайна. Его разработали в Twitter.

Общие параметры сетки:

Отступ между колонками (Gutter) – 30 пикселей
Базовая единица – 5 пикселей
Колонки – 12
Количество брейкпоинтов – 5

Что такое брейкпоинты?

Это контрольные точки, где контент перестраивается в зависимости от устройства.

Как построить сетку в Figma по Bootstrap?

Предположим, мы хотим создать сетку для веб-версии сайта.
За основу берем разрешение экрана 1440 на 1024 пикселей.

При этом согласно документации Bootstrap экраны больше 1200 пикселей относятся к ExtraLarge, а ширина контейнера у них – 1140 пикселей.

Настраиваем сетку:

Отступы по краям (Margin) – (1440 - 1140)/2 = 150+15 (cогласно документации Bootstrap, между границей контейнера и колонками требуются отступы по 15 пикселей).
Колонки – 12
Gutter – 30 пикселей
Тип (Type) – Stretch.

Значения для других разрешений в карточках ниже 👇🏻

#дизайн #сетка #bootstrap #design

Сайт goodbrief.io делает брифы для ваших портфолио-проектов.

Нужно лишь выбрать тип продукта, который хотите создать и его категорию, а сайт сгенерирует вам бриф.

Пополняйте портфолио классными проектами🔥

#дизайн #портфолио #web #design