Как подключить только сетку Bootstrap?

Question

[Raul Abdullin]

Подскажите как подключить только сетку Bootstrap к проекту?
Т.е. я кастомизировал бутстрап и скачал только grid system для бутстрап 3.3.7.
Со всех остальных пунктов и полей убрал галочки, в том числе убрал всю информацию из полей (см. скрин). Правильно всё сделал?
В итоге скачалась папка в которой содержится config.json и css папка:
bootstrap-theme.css
bootstrap-theme.min.css
bootstrap.css
bootstrap.min.css
Все эти 4 css файла относятся к сетке или какой-то один нужно подключить?

Comments

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

Все эти 4 css файла относятся к сетке или какой-то один нужно подключить?

Думаю, файла

bootstrap.min.css

будет достаточно :)

[Raul Abdullin]

Евгений Вольф, но не уверены? :) я блин второй день гуглю нигде не могу найти информацию по тому, как подключить отдельно сетку

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

raulvodov, я уверен на 90%, но не могу на 100% поручиться, что оно именно так. Не верстал какое-то время, по этому подзабыл немного. Чисто логически, файлы нужны вот для чего:

bootstrap.css - это все основные стили страпа, в Вашем случае, только сетка
bootstrap-theme.css - это тема для страпа, их довольно много разных и к сетке они по идее не должны относиться, есть всякие "тёмные", "светло голубые" и пр. темы для страпа, где переоформлены меню, кнопки и некоторые другие стандартные элементы, без темы соотв. стап выглядит "дефолтно" (если можно так сказать)

файлы *.min.css, *.min.jsи т.д., т.е. файлы с суффиксом min - это минифицированные версии оригинала, т.е. тот же самый код, но сжатый, без пробелов и "в одну строчку". Такие файлы используют в "продакшене" (что бы быстрее загружались и читались машиной). То есть, это те файлы, которые не правят (сжатая версия оригинального исходного кода). Надеюсь понятно изъяснился...

Возвращаясь к теме, логически - Вам нужен файл bootstrap.css или bootstrap.min.css (второй предпочтительнее, если Вы не собиратетесь его изменять).

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

raulvodov, Вы попробуйте подключить 1 файл из того, что у Вас скачалось, а именно: bootstrap.min.css, если не заработает по какой-то причине - будем дальше разбираться.

P.S. Для чистоты эксперимента, можно скачать полную версию страпа (без кастомизации) подключить её и проверить что всё работает, а потом заменить её этим файлом. JS-файлы соотв. подключать не обязательно, если Вам не нужны всякие меню (некоторые их виды) и пр. подобные штуки.

[Raul Abdullin]

Евгений Вольф, а на практике может пригодиться такое, что понадобятся изменения? Например расстояния между колонками? Или необязательно расстояния между колонками менять. Объясню на примере, что мне может понадобится. По стандарту в сетке бутстрапа расстояние между колонками 30 пиксеелй. Я часто между блоками в дизайне в фотошопе / скетче расстояние делаю 50 пикселей, но при этом использую сетку бутстрапа. Как обычно решается подобная задача?

[Сергей Горячев]

raulvodov, а ты уверен, что ты искал?
Сетка bootstrap /?
Как оставить в bootstrap 4 только сетку и вспомогательные классы?
Есть ли вырезанная сетка bootstrap 4?
Как выбрать только сетку bootstrap и меню?
Как вытащить из bootstrap 4 только сетку?

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

raulvodov,

Объясню на примере, что мне может понадобится. По стандарту в сетке бутстрапа расстояние между колонками 30 пиксеелй. Я часто между блоками в дизайне в фотошопе / скетче расстояние делаю 50 пикселей, но при этом использую сетку бутстрапа. Как обычно решается подобная задача?

Это можно (и как по мне - гораздо удобнее) сделать на той же страничке, где Вы собирались бутстрап в конфигурации "только сетка", там же есть почти все (а может и все) параметры страпа, в т.ч. отступы между колонками.

Answer 1

[Влад]

bootstrap.css – основной файл стилей, как раз таки здесь и хранится сетка, его и нужно подключать.
bootstrap.min.css – минимизированная копия файла выше.
bootstrap-theme.css – стандартные стили (тема) Bootstrap, отвечающая за дизайн некоторых компонентов.
bootstrap-theme.min.css – минимизированная копия файла выше.

Comments

[Raul Abdullin]

спасибо огромное, а на практике, как думаете что лучше использовать
bootstrap.css или bootstrap.min.css?

[Влад]

raulvodov, если требуется использовать как можно меньше места и сделать загрузку сайта немного быстрее, то подойдет лучше bootstrap.min.css, а если нужно постоянное редактирование стандартных стилей (в данном случае сетки), то рекомендую использовать bootstrap.css.

[Raul Abdullin]

Влад, а на практике часто сетку редактировать приходится? И если да, что обычно редактировать?
Например расстояния между колонками? Или необязательно расстояния между колонками менять. Объясню на примере, что мне может понадобится. По стандарту в сетке бутстрапа расстояние между колонками 30 пиксеелй. Я часто между блоками в дизайне в фотошопе / скетче расстояние делаю 50 пикселей, но при этом использую сетку бутстрапа. Как обычно решается подобная задача? Или можно в данном случае внутри колонок просто паддинги увеличить и не трогать сетку?

[Влад]

raulvodov, скажу по своему опыту, работаю с Bootstrap уже более полугода, еще ни разу не приходилось редактировать стили сетки. Если требуется точно по пикселям сделать расстояние между колонками, то, как вы уже сказали, можно использовать CSS-свойство padding для определенных колонок.

[Raul Abdullin]

Влад, значит всё таки лучше наверное использовать bootstrap.css ? а не bootstrap.min.css, если понадобится изменять данные паддинги?

[Влад]

raulvodov, вы можете использовать свой CSS-файл или писать стили прямо в коде страницы и редактирование файлов Bootstrap не потребуется.

[Raul Abdullin]

Влад, ок понял спасибо большое

[Влад]

raulvodov, пожалуйста :)

Answer 2

[Никита Чернов]

getbootstrap.com/docs/4.0/getting-started/download
Скачиваете Source files, dist > css > boostrap-grid.css / bootstrap-grid.min.css

Comments

[Raul Abdullin]

это бутстрап 4 насколько понимаю?

[Никита Чернов]

Да, с 3 еще проще.
getbootstrap.com/docs/3.3/customize/?id=7244d15a2f...
Оставляете галочку только на сетке и скачиваете

[Raul Abdullin]

DRIMchansky, ага спасибо, так и сделал. Только там помимо сетки какой-то код, как мне сказали нормалайзер. Стоит ли его оставлять?

[Никита Чернов]

Можно удалить лишний код и подключить актуальный сброс отдельно
https://www.youtube.com/watch?v=KGYmOlNteas&list=P...

[Raul Abdullin]

DRIMchansky, спасибо интересное видео