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

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

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

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

<link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Подключение файла стилей Bootstrap -->
<link href="css/mytheme.css" rel="stylesheet"> <!-- Подключения файла переопределения стилей -->
<link href="css/style.css" rel="stylesheet"> <!-- Подключения файла с собственными стилями -->

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

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

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

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

Переопределение дефолтных стилей до скачивания фреймворка

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

Скачиваем скомпилированную версию фреймворка

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

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

Скачивание отдельных компонентов Bootstrap

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

Выбираем и скачиваем нужные компоненты Bootstrap

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

Похожие записи:

Добавить комментарийОтменить ответ

Нажимая на кнопку «Добавить», я даю согласие на обработку своих персональных данных в соответствии с политикой конфиденциальности