Как работает 1170 сетка бутстрап?

Question

[Raul Abdullin]

Если честно не совсем понимаю, что за 15 пикселей с каждой стороны сетки от 1170. Итого получается 1140. Для чего эти паддинги по бокам? Дело в том, что я уже много лет в фотошопе и скетче рисую по сетке 1170 без учета этих паддингов. Сорри за сумбур, но думаю в целом понятен вопрос :)

Answer 1

[V Sh.]

1170px + 15px (left padddng) + 15px (right padding) = 1200px.

Comments

[Raul Abdullin]

А для чего эти паддинги? Я вообще не понимаю смысловую составляющую их?

[V Sh.]

raulvodov, а зачем вообще паддинги? Чтобы контент к границе не лип)

[Raul Abdullin]

V Sh., понял спасибо :)

Answer 2

[Евгений Вольф]

Если честно не совсем понимаю, что за 15 пикселей с каждой стороны сетки от 1170.

Не могу сказать на 100%, но по моему, это обычные "отступы колонки", с каждой стороны. Т.е. расстояние между колонками соотв. должно быть 15+15px, т.е. 30px.

Для чего эти паддинги по бокам?

Это почти риторический вопрос... Но, авторы сетки определенно видели в этом какой-то смысл. Как один из вариантов - что бы контент не "прилипал" к краям дисплея на устройствах с маленьким разрешением, напримр на мобильных.

Дело в том, что я уже много лет в фотошопе и скетче рисую по сетке 1170 без учета этих паддингов.

Тут два основных варианта для конечного исполнителя:
1. Собрать страп-сетку под свои/Ваши нужды, страп-сетка легко кастомизируется, включая примерно все её параметры, от разрешения и ширины колонок до...
1.1 Убрать эти padding'и с помощью CSS'а, заменив пару соотв. свойств
2. Не использовать страп-сетку или использовать какую-то другую сетку :)

Comments

[Raul Abdullin]

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

[Евгений Вольф]

raulvodov, в 4-ой версии страпа, насколько я помню, они специально для страждущих сделали отдельно CSS где только сетка. В 3-ей версии, вариантов думаю два (из тех, что я могу сходу придумать):
1. Зайти суда, выбрать нужные компоненты (в Вашем случае, это будет только "Grid system" (судя по всему), убрать все остальные галки и нажать кнопку "Compile & download" (или как-то так, внизу страницы). На выходе получиться файл ~13Кб, вместо ~120Кб стандартного страпа.
2. Воспользоваться сторонним ПО, которое удалит мусор (т.е. неиспользуемые стили). Предположительно, вот таким (и ещё немного подробностей). Не могу сказать, что это именно то решение, которое Вам нужно (в том смысле, что это именно тот самый, "волшебный" плагин), но, в своё время, когда занимался вёрсткой - какой-то плагин для Gulp'а ставил/использовал и возможно именно этот.

[Евгений Вольф]

raulvodov, кстати, про страп-4... Хоть он ещё и в версии альфа-6, но в целом пользовать уже можно в большей степени. Думаю, если говорить исключительно о сетке - она там работоспособна полностью (хотя лучше конечно проверить...).

На этой картинке: как Вы могли заметить, есть отдельный файл "grid", думаю, это отделенная от "всего остального" сетка. Хотя, могу конечно ошибаться, давно не верстал...