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

Кастомизация 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 — достаточно простая операция, но которая тем не менее дает широкие возможности, для того чтобы используя всю мощь данного фреймворка, сделать Ваш сайт непохожим на другие.

Источник

Просмотров:

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

Adblock
detector