В процессе вёрстки на Bootstrap неизбежно сталкиваешься с необходимостью переопределять некоторые стили (в первую очередь цвета) для тех или иных элементов сайта. В результате основная стилевая таблица увеличивается в размерах и становится менее читаема. Чтобы сократить количество таких переопределений и увеличить скорость загрузки сайта, бывает полезно изменить стили бутстрапа по умолчанию. В этой инструкции я буду использовать Visual Studio Code и node.js. Установите их у себя прежде чем читать дальше.
Шаг 1. Скачивание исходных файлов Bootstrap 5
На первом шаге необходимо скачать исходные коды нужной версии Bootstrap можно очень просто, например с GitHub. Для этого заходим в раздел "Releases" этого проекта, выбираем необходимую версию, например, 5.3.8, и нажимаем на ссылку "Source code (zip)".
Далее распаковываем архив в нужную папку и открываем её в Visual Studio Code.
Шаг 2. Установка npm-пакетов
Открываем консоль (Ctrl + ~) и вводим:
npm installЕсли возникает ошибка:
npm : Невозможно загрузить файл C:\Program Files\nodejs\npm.ps1, так как выполнение сценариев отключено в этой системе. Для получения дополнительных сведений см. about_Execution_Policies по адресу https:/go.microsoft.com/fwlink/?LinkID=135170.
строка:1 знак:1
То для исправления ситуации сначала прописываем в консоли:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSignedА затем повторяем ввод npm install.
Шаг 3. Переназначение стилей Bootstrap
В Bootstrap 5 стили (CSS) написаны с помощью инструмента SCSS — это такой "расширенный" язык для работы со стилями.
Все коды разложены по отдельным файлам в папке scss/. Каждый файл отвечает за оформление какого‑то одного элемента сайта (например, кнопки, меню или заголовка) либо решает конкретную задачу по стилям.
Чтобы поменять стандартные стили Bootstrap 5, обычно не трогают основные файлы, а меняют специальные переменные — своего рода "настройки" стилей. Все эти переменные собраны в одном месте — в файле _variables.scss. Так удобнее вносить изменения: достаточно поправить нужные значения в этом файле, и стиль всего сайта обновится автоматически.
Если в вашем проекте не нужны какие‑то готовые блоки (компоненты) из Bootstrap 5, их можно убрать из сборки. Это очень полезно: файлы со стилями (CSS) и кодом (JavaScript) станут меньше, а сайт будет загружаться быстрее.
Вот как это работает на примере компонента Carousel (это такая лента с переключающимися картинками или слайдами):
Нужно "заблокировать" его в двух местах: в файле bootstrap.scss (это файл со стилями на языке SCSS), а также в файле index.umd.js или index.esm.js (это файлы с JavaScript‑кодом; выбирайте тот, который используете в своём проекте).
Почему блокировать необходимо в двух файлах? Потому что компонент состоит из двух частей: визуальная часть (стили) написана на SCSS, а функциональная часть (логика переключения слайдов) — на JavaScript.
Если компонент состоит только из стилей (то есть без JavaScript), то достаточно убрать его подключение в SCSS‑файлах — просто закомментируйте или удалите строку с его импортом.
Шаг 4. Компиляция файлов обновлённой сборки
Завершающий шаг - компиляция файлов. Последовательно выполняем в консоли команды:
npm start
npm run distПервая компилирует CSS и JavaScript, создает документацию и запускает локальный сервер, а вторая создает папку dist/ с скомпилированными файлами.
Если всё сделали правильно, то после выполнения команд в папке dist/ будут созданы CSS и JavaScript файлы, которые будут включать только нужные компоненты и модули системы, а также иметь указанные настройки.
В итоговый проект достаточно будет скопировать из этой папки только два файла: bootstrap.min.css и bootstrap.bundle.min.js.
Примечание: bootstrap.bundle.min.js – это тот же самый bootstrap.min.js, но включающий в себя библиотеку popper.js.
Теперь вы знаете как кастомизировать сборку и Bootstrap изменить стили бутстрап по умолчанию.
