Кастомизация Bootstrap
Доброго времени суток. В данной статье я расскажу как можно кастомизировать Bootstrap. В частности кастомизацию Bootstrap мы будем реализовывать, добавляя собственные цвета. Также как и цвета, в собственной сборке фреймворка можно задать пользовательские значения и для других свойств.
Итак, для начала у Вас должны быть установлены Node и npm. Если они уставлены, то переходим к загрузке исходников фреймворка Bootstrap.
Я для этого использую комманду git, которая скопирует исходники фреймворка в папку bootstrap. Если же у Вас эта консольная программа не установлена Вы можете просто загрузить исходники из официального репозитория Bootstrap.
git clone https://github.com/twbs/bootstrap.git
Далее переходим в папку bootstrap и устанавливаем необходимые пакеты:
$ cd ./bootstrap
$ npm install
После этого рядом с папкой bootstrap создаем файл index.html со следующим содержимым:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Customize</title>
<link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="alert alert-lucky">Внимание, внимание, говорит...!</div>
</div>
</body>
</html>
Теперь приступаем непосредственно к добавлению собственных цветов к сборке фреймворка. Для этого переходим в папку boostrap/scss и создаем в ней файл _mytheme.scss. Обратите внимание, что название файла должно начинаться именно с нижнего подчеркивания. Далее открываем в той же папке файл bootstrap.scss и перед всеми (!) импортами модулей добавляем @import "mytheme";.
Пример того, что должно получиться:
/*!
* Bootstrap v5.0.0-beta1 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
// scss-docs-start import-stack
// Configuration
@import "mytheme"; // наш файл темы должен идти перед всеми импортами самого фреймворка
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
...
А теперь рассмотрим содержимое непосредственно самого файла _mytheme.scss.
// пользовательские цвета
$sadness: #318399 !default;
$lucky: #f5500e !default;
// карта с цветами темы
$theme-colors: (
"sadness": $sadness,
"lucky": $lucky
) !default;
В данном файл можно переопределять практически любые переменные из файла _variables.scss.
Далее соберем фреймворк уже с нашими цветами. Для этого надо выполнить следующие команды в папке bootstrap.
$ npm run dist
Откроем страницу index.html в браузере и, если компиляция исходников произошла без ошибок увидим страницу с пользовательскими цветами.
Таким образом, добавление пользовательских стилей в Bootstrap - достаточно простая операция, но которая тем не менее дает широкие возможности, для того чтобы используя всю мощь данного фреймворка, сделать Ваш сайт непохожим на другие.
-
- Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.