12 и 16-колоночная система Bootstrap

#bootstrap #frontend

Мне нужно сверстать адаптивный сайт по макетам из PSD. Но проблема в том что для
широких экранов макет сделан с использованием сетки на 16 колонок Bootstrap, для средних
на 12, для маленьких на 5. Выходит что при изменении разрешения экрана, должна меняться
система сеток. И как при этом писать код, если при разном разрешении он будет разный.
    

Ответы

Ответ 1

Вообще странно, что макет изначально рисуется под бутстрап на 16 колонок. Обычно
12 колонок более, чем достаточно и грамотный веб-дизайнер так не будет поступать. Но
всегда есть исключения, истинной причины так поступать не знаю... Поэтому!

Отвечая на Ваш вопрос:

Если всё же нужно сохранить 16 колонок и использовать бутстрап - настройте его на
16 колонок здесь (переменная @grid-columns) для версии 3.4 или здесь (переменная $grid-columns)
для версии 4.2. Полученный сгенерированный бутстрап (если это версия 3.4) подключите
стандартным способом к проекту. В случае с версией 4.2 достаточно просто заменить значение
переменной и сохранить.

Для более мелких разрешений, где необходимо использовать 12 и 5 колонок - используйте
1 колонку как 3 (например 3 справа/слева и 10 в середине). Для объединенных 3-х можно
использовать внутреннюю микросетку из 16 колонок и т.д.

Для 5 колонок - по аналогии: 3 по цетру (по две) и 1 справа/слева (по пять). Внутри
них также микросетка.



P.S. Вы можете менять соотношения на своё усмотрение, я привёл просто один из вариантов
реализации (с микросеткой внутри по 16 колонок).