<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.