Bootstrap в дизайн макете, как правильно?

Question

[nanobayt]

Не могу понять какая должна быть сетка в макете, общая ширина контейнера 1110, 1140, 1170? везде по разному пишут.

И вот нашел еще такую информацию, что думаете по этому?

"Дело в том, что при верстке Bootstrap задает ширину колонок в процентах. При 12 колонок, одна колонка будет 8,3333333333%. А дизайн мы создаем в пикселях, и обычно ширина колонки берется 67-68 px.

Сетку Bootsrap в 1140 px в дизайне не получится создать. Фиксированные значения у Bootstrap задаются только для отступов(отступ между колонками 30 px)

Таким образом получается следующее:
Если брать ширину колонки 67 px и расстояние между колонками 30 px — (30*11)+(67*12) = 1134
Если брать ширину колонки 68 px и расстояние между колонками 30 px — (30*11)+(68*12) = 1146

Можно конечно сделать ширину колонки 67,5 px, тогда будет так — (30*11)+(67,5*12) = 1140, но тогда получаем не целые значения ширины колонок, что считается плохо в дизайне интерфейсов."

Comments

[Dmitry Bay]

1170 вроде брейкпоинт .
А не пробовали просто скачать bootstrap psd ui ?

[Сергей delphinpro]

Если говорить о стандартных значениях бутстрапа, то там такие размеры:

Полная ширина колонки — 100 пикс. 100*12=1200
Ширина колонок без гуттеров — 70 пикс + 30 пикс гуттер (по 15 пикс с каждой стороны): 70*12+30*12=1200.
Полезная ширина сайта — 70*12+30*11=1170 (+ по 15 пикс с каждой стороны неиспользуемые для размещения контента гуттеры).

чтобы было понятнее, вот пример

[nanobayt]

Dmitry Bay, Они зачастую разные...)

[nanobayt]

Сергей delphinpro, Зашел на сайт bootstrap и посмотрел сетку 4 версии. И написано следующее, Extra large
≥1200px и Максимальная
ширина контейнера: 1140px. почему тогда 1200? если вроде как 1170px. Но если 1170px получается нельзя нормально разделить колонки по ширине. Если смотреть на мое сообщение про "Если брать ширину колонки 67 px и расстояние между колонками 30 px — (30*11)+(67*12) = 1134
Если брать ширину колонки 68 px и расстояние между колонками 30 px — (30*11)+(68*12) = 1146"

[Алекс Глебов]

Это все настраивается, ширина, количество колонок и расстояние между колонок. Любые можно

[Сергей delphinpro]

nanobayt, хех, давно оригинальный бутстрап не юзал..

Ну пусть 1140
1140 / 12 = 95 на колонку минус гуттер

(15+65+15)*12
15 внутренние отступы, 65 ширина контентной части колонки.

Answer 1

[nanobayt]

В общем поискал еще информации, разобрался и итог такой. Ширина колонки 65px и отступ с каждой стороны по 15px итого (15+65+15)*12 = 1140px максимальная ширина контейнера по умолчанию для desktop в Bootstrap 4, по факту 1110px это зона для контента в макете. В 3-й версии было 1170px общая ширина контейнера.

Answer 2

[Владислав Спиридонов]

Суть в том, что при верстке в bootstrap по умолчанию в css свойствах прописано «box-sizing: border-box». Это свойство - «Применяется для изменения алгоритма расчета ширины и высоты элемента. Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.»

К примеру у нас есть блок с width: 600px, padding: 20px и еще (обводка) border: 2px в итоге ширина этого блока пересчитается и станет 644px, а со свойством box-sizing: border-box она останется 600px, но при этом внутренний контент будет подстраиваться с увеличением padding'a например.

Собственно в чем заключается решение? Учесть то что общий контейнер будет 1200px (1170px – контент + 15px отступы справа и слева.