Кастомизация Bootstrap 3

Опубликовано: 01.09.2018

Здравствуйте, друзья! Продолжаем разбирать фреймворк Bootstrap. В предыдущих статьях мы поговорили о том, « Что такое Bootstrap » и рассмотрели « Как работать с Bootstrap ». Сегодня разберем кастомизацию фреймворка, рассмотрим несколько вариантов изменения Bootstrap под себя и скачивание отдельных элементов фреймворка.

Для чего нужна кастомизация Bootstrap? Дело в том, что если всегда пользоваться готовыми решениями, которые предлагает фреймворк, то все создаваемые сайты будут похожи друг на друга, как братья близнецы, поэтому в подавляющем большинстве проектов производится кастомизация под конкретный дизайн макета.

Как получить адаптивную сетку Bootstrap нужной ширины

Первым и наиболее часто используемым методом кастомизации является темизация. В первом варианте темизации создается файл стилей, в котором переопределяются стандартные стили Bootstrap и дописываются дополнительные. Во втором варианте создаются два файла стилей; в первом файле переопределяются стандартные стили, а во втором — пишутся дополнительные нужные под конкретный проект. Главное, чтобы созданные файлы подключались после стандартного файла стилей фреймворка.

Я предпочитаю первый вариант темизации и ограничиваюсь одним файлом, в который вношу все нужные мне изменения.

Если нам нужно произвести много глобальных изменений, например: поменять дефолтные брекпоинты сетки, изменить цвет для всего класса или группы классов, то, используя темизацию, конечно, можно все реализовать, но для этого нужно написать кучу переопределяющих стилей и потратить очень много времени, ковыряясь в исходном коде фреймворка. Для глобальных изменений существуют еще два метода кастомизации.

Второй метод кастомизации дает возможность переопределить дефолтные стили до скачивания фреймворка. Для этого переходим на страницу «Customize» на официальном сайте getbootstrap.com, опускаем ниже до раздела «Less variables» и здесь в полях можно поменять все, что угодно: цвета, шрифты, отступы, размеры различных элементов, брекпоинты сетки и т.д.

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

Недостаток этого варианта в том, что если мы не знаем точно, какой цвет, шрифт и т.д. нам нужен, попросту говоря, экспериментируем, то нам каждый раз придется возвращаться на данную страницу и снова компилировать и скачивать до нужного результата.

Для экспериментов и поиска нужных решений подойдет третий метод кастомизации, он заключается в изменении исходников фреймворка. Переопределение дефолтных стилей производится с помощью препроцессоров «Less» и «Sass», подробно об этом способе я рассказывал в статье « Bootstrap Less: работа с препроцессором ». Вкратце принцип похож на второй метод кастомизации, только изменения производятся не сайте Bootstrap, а на компьютере. Плюс в быстроте изменений, если что-то не нравится, то не нужно возвращаться на сайт, компилировать и скачивать заново.

Зачастую мы не пользуемся всеми компонентами Bootstrap, а бывает вообще, что нужна только сетка. Разработчики платформы позаботились и об этом. В самом начале страницы «Customize» в разделе «Less files» можно выбрать, что нам нужно, просто отметив или убрав галочку с чекбокса. Если нужна только сетка, отмечаем «Grid system», а с остальных убираем галочку, опускаемся в самый низ к уже знакомой нам кнопке, компилируем и скачиваем. Теперь фреймворк будет весить в несколько раз меньше.

На этом все, как видите фреймворк Bootstrap достаточно простой и гибкий инструмент, используйте его и вы ускорите свою работу в разы. Желаю всем творческих успехов, если остались вопросы, спрашивайте.