Как поменять width в bootstrap?

Question

[Indus Indusovich]

Привет,осваиваю бутстрап,и наткнулся на непонятность.
Вот по стандарту есть размер 1170px 12 колонок по 30 px
Это все отлично,но если у меня дизайн к примеру 1200px\960px\1000px?
Как нужно готовить бутстрап под свой конкретно проект?Как мне подготовить его под 960px?

Answer 1

[Дмитрий Евграфович]

1. Залезть в исходники и поменять переменные там.
2. Собрать кастомизированную версию на сайте getbootstrap.com/customize

Второй вариант быстрее, но первый дает потенциально больше преимуществ и знаний (если выберете его - качайте лучше sass исходники вместо less, четвертый бутстрап уже на sass будет сделан)

Comments

[Indus Indusovich]

Так а какие переменные менять?Я просто не шарю,там есть 3 размера ширины для разных экранов,мне надо только сделать дефолтный размер не 1170px а 960px,а все остальное оставить как было,как мне такое реализовать?там просто много всего сходу не пойму

[Дмитрий Евграфович]

Indus Indusovich: в разделе Media queries breakpoints можете размеры задать, при которых будут действовать разные сетки (то есть применяться col-xs или col-md и соответственно другие элементы типа btn-xs btn-lg). @grid-columns - задает количество колонок (если вам нарисовали в 10-колоночном дизайне), @grid-gutter-width - пространство между колонками (делится на два и прибавляется). Но по правде редко приходится менять брейкпоинты, легче представить, как будет выглядеть макет дизайнера при чуть большем разрешении и слегка растянуть его, адаптировав под сетку (это ж все адаптивно будет один хрен и при разных разрешениях ширина колонок тянется). 12 же - это золотое число в математике. Такая сетка гармонично делится на 2, 3, 4, 6 равных частей против какого-нибудь 10 колоночного, где равные столбики будут лишь 2 или 5-кратные.

[Indus Indusovich]

Дмитрий Евграфович: На деле это не прокатит,если ширина макета будет 960px или там 1440 то придется делать такую ширину,что тогда делать?как менять брейкпоинты?Я понимаю основы,но не могу понять как оно на практике будет работать,можете привести пример настройки bootstrap customize под любой нестандартный размер?К примеру 1000px максимальна,а если экран больше чем 1000px то тянеться просто body.

[Дмитрий Евграфович]

Indus Indusovich: еще раз, открываете ссылку, долистываете до раздела Media queries breakpoints и там ставите нужные вам размеры в пикселях. Смотрите на @screen-md - там 992 пикселя. Все, что меньше 1200 (@screen-lg) но больше 992 подчиняется @screen-md. Если поставите @screen-md 1000, то в разрешениях от 1200 до 1000 будут работать -md классы, от 1200 и выше -lg, 999 и меньше -sm.

[Indus Indusovich]

Дмитрий Евграфович: а не проще тогда скачать бутстрап с дефолтными настройками а уже в проекте сделать контейнеру max-width сколько нужно

[Дмитрий Евграфович]

Indus Indusovich: боюсь, я не понимаю вашей задачи. Вы сначала спрашиваете, как адаптировать бутстрап под свои нужды, а теперь меняете размер контейнера. Размер контейнера не повлияет на расстояние между колонками, не повлияет на количество колонок и на диапазоны разрешений, в которых действуют те или иные классы (col-xs вместо col-md например).

Answer 2

[onlinebd_ru]

Я для больших разрешений использую файлы для bootstrap 4, 1600px (HD+), 1920px (Full HD), 2560px (Retina 1440p), 2880px (15" Retina), 3840px (UHD), 4096px (4K), 8192px (8K).
Файлы в свободном доступе Bootstrap 4 Grid для больших разрешений экранов