Содержание

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

Программирование на Python для начинающих

Бесплатный курс по Python даст Вам всю необходимую базу для начала программирования на языке Python. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.

Чтобы получить Видеокурс,
заполните форму

E-mail:
Имя:

Другие курсы

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Записаться

Другие курсы

Человек не будет наслаждаться едой и питьем, если не перестрадает от голода и жажды.

Аврелий Августин

Доброго времени суток. В данной статье я расскажу как можно кастомизировать 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

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

  • Создано 07.01.2021 13:55:40
  • Михаил Русаков
Предыдущая статьяСледующая статья

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

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

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

: Подписаться на обновления

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

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

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

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

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

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Настройка. Настройка · Bootstrap v5.0.2

Cмотреть на GitHub

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

Sass Используйте наши исходные файлы Sass в своих переменных, картах, миксинов и функций.

Параметры Настройте Bootstrap со встроенными переменными для легкого переключения глобальных настроек CSS

Цвета Узнайте о настройте цветовых систем, которые поддерживают весь инструментарий.

Компоненты Создавайте компоненты с помощью базовых классов и классов-модификаторов.

CSS переменные Используйте пользовательские свойства Bootstrap для быстрого проектирования и разработки.

Оптимизация Получите опыт по созданию легких, отзывчивых и легко изменяемых проектов.

Обзор

Есть несколько способов настроить Bootstrap. Выбор оптимального способа может зависеть от вашего проекта, сложности инструментов сборки, используемой вами версии Bootstrap, поддержки браузера и многого другого.

Наши два наиболее предпочтительных метода:

  1. Использование Bootstrap через систему управления пакетами для использования и расширения наших исходныех файлов.
  2. Использоввание скомпилированныех файлов дистрибутива Bootstrap или jsDelivr для добавления или переопределения стилей Bootstrap.

Хотя мы здесь подробно не рассказаваем о том, как использовать каждый менеджер пакетов, мы можем дать некоторые рекомендации по использованию Bootstrap с вашим собственным компилятором Sass.

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

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

CSP и встроенные SVG

Некоторые компоненты Bootstrap включают встроенные SVG-файлы в наш CSS, чтобы согласованно и легко стилизовать компоненты в разных браузерах и на разных устройствах. Для организаций с более строгими конфигурациями CSP, мы задокументировали все экземпляры наших встроенных SVG (все из которых применяются через

background-image), поэтому Вы можете более тщательно изучить свои варианты.

  • Аккордеон
  • Кнопка закрытия (используется в уведомлениях и модальных окнах)
  • Чекбоксы и радиокнопки
  • Выключатели
  • Проверка на стороне сервера
  • Выпадающие списки
  • Карусель с элементами управления
  • Отзывчивое поведение навигационной панели

На основе обсуждения сообщества некоторые варианты решения этой проблемы в Вашей собственной кодовой базе включают замену URL-адресов локально размещенными ресурсами, удаление изображений и использование встроенных изображений (невозможно во всех компонентах) и изменение Вашего CSP. Наша рекомендация — внимательно изучить свои собственные политики безопасности и при необходимости выбрать лучший путь для дальнейшего развития.

Настройка и загрузка · Bootstrap

Выберите, какие файлы Less нужно скомпилировать в свою пользовательскую сборку Bootstrap. Не знаете, какие файлы использовать? Прочитайте страницы CSS и Компоненты в документации.

Общий код CSS

Стили печати

Типография

Код

Сеточная система

Столы

Формы

Кнопки

Отзывчивые утилиты

Компоненты

Глификоны

Группы кнопок

Входные группы

Навигация

Навбар

Панировочные сухари

Пагинация

Пейджер

Этикетки

Значки

Джамботрон

Миниатюры

Оповещения

Индикаторы выполнения

Медиа-элементы

Список групп

Панели

Адаптивная вставка

Уэллс

Значок закрытия

Компоненты JavaScript

Компонентные анимации (для JS)
(включая Collapse)

Падать

Подсказка

Трещать

Модальный

Карусель

Выберите, какие плагины jQuery должны быть включены в ваши пользовательские файлы JavaScript. Не знаете, что включить? Прочтите страницу JavaScript в документации.

Связан с компонентами

Предупреждение об увольнении

Дополнительные кнопки

Функциональность карусели

Выпадающие списки

Модальные

Подсказки

Всплывающие окна (требуются всплывающие подсказки)

Переключаемые вкладки

Магия

Прикрепить

Крах

прокрутка

Переходы (обязательны для любого вида анимации)

Требуется jQuery

Для всех подключаемых модулей требуется последняя версия jQuery.

Настройте переменные Less, чтобы определить цвета, размеры и многое другое в ваших пользовательских таблицах стилей CSS.

Цвета

Серый и фирменные цвета для использования в Bootstrap.

@серая база

@серый-темнее

@серо-темный

@серый

@серо-светлый

@серо-светлый

@основной бренд

@успех бренда

@brand-info

@бренд-предупреждение

@бренд-опасность

Леса

Настройки для некоторых самых глобальных стилей.

@body-bg

Цвет фона для .

@text-color

Глобальный цвет текста на .

@link-color

Глобальный цвет текстовой ссылки.

@link-hover-color

Цвет при наведении ссылки устанавливается с помощью функции darken() .

@link-hover-decoration

Украшение при наведении ссылки.

Типографика

Шрифт, высота строки и цвет для основного текста, заголовков и т. д.

@font-family-sans-serif

@font-family-serif

@font-family-monospace

Моноширинные шрифты по умолчанию для , и 

  .
 @база семейства шрифтов
 @база размера шрифта
 @размер шрифта большой
 @маленький размер шрифта
 @размер шрифта-h2
 @размер шрифта-h3
 @размер шрифта-h4
 @размер шрифта-h5
 @размер шрифта-h5
 @размер шрифта-h6
 @line-height-base
 Безразмерный  line-height  для использования в таких компонентах, как кнопки.
 @line-height-computed
 Вычисленная "высота строки" (  размер шрифта  *  высота строки  ) для использования с полем   ,  отступом  и т. д.
 90 149 @headings-font-family
 По умолчанию наследуется от   .
 @заголовки-шрифт-вес
 @высота строки заголовков
 @цвет заголовков
 Иконография 
 Укажите пользовательское местоположение и имя файла прилагаемого шрифта значков Glyphicons. Полезно для тех, кто включает Bootstrap через Bower.
 @icon-font-path
 Загрузите шрифты из этого каталога.
 @icon-font-name
 Имя файла для всех файлов шрифтов.
 @icon-font-svg-id
 Идентификатор элемента в файле значка SVG.
 Компоненты 
 Определение общих размеров отступов и радиусов границ и многое другое. Значения основаны на тексте 14 пикселей и высоте строки 1,428 (~ 20 пикселей для начала).
 @padding-base-vertical
 @padding-base-horizontal
 @padding-большой-вертикальный
 @padding-большой-горизонтальный
 @padding-small-vertical
 @padding-small-horizontal
 @padding-xs-vertical
 @padding-xs-горизонтальный
 @line-height-large
 @line-height-small
 @граница-радиус-база
 @граница-радиус-большой
 @border-radius-small
 @component-active-color
 Глобальный цвет для активных элементов (например, навигации или раскрывающихся списков).
 @component-active-bg
 Глобальный цвет фона для активных элементов (например, навигации или раскрывающихся списков).
 @caret-width-base
 Ширина границы   для создания кареток, обозначающих раскрывающиеся списки.
 @caret-width-large
 Размер каретки немного увеличивается для более крупных компонентов.
 Таблицы 
 Настройка таблицы  .table  с базовыми значениями, каждое из которых используется во всех вариантах таблицы.
 @table-cell-padding
 Заполнение для   s и   s.
 @table-уплотненная-ячейка-заполнение
 Заполнение для ячеек в  .table-уплотненная  .
 @table-bg
 Цвет фона по умолчанию для всех таблиц.
 @table-bg-accent
 Цвет фона, используемый для  .table-striped  .
 @table-bg-hover
 Цвет фона, используемый для  .table-hover  .
 @table-bg-активный
 @table-border-color
 Цвет границы для границ таблицы и ячеек.
 Кнопки 
 Для каждой кнопки Bootstrap определите цвет текста, фона и границы.
 @btn-шрифт-вес
 @btn-цвет по умолчанию
 @btn-default-bg
 @btn-граница по умолчанию
 @btn-основной-цвет
 @btn-primary-bg
 @btn-основная-граница
 @btn-успех-цвет
 @btn-success-bg
 @btn-успех-граница
 @btn-info-color
 @btn-info-bg
 @btn-информация-граница
 @btn-предупреждающий-цвет
 @btn-warning-bg
 @btn-warning-border
 @btn-опасный-цвет
 @btn-danger-bg
 @btn-danger-border
 @btn-link-disabled-color
 @btn-граница-радиус-база
 @btn-граница-радиус-большой
 @btn-border-radius-small
 Формы 
 @input-bg
    цвет фона
 @input-bg-disabled
    цвет фона
 @input-color
 Цвет текста для    s
 @input-border
    цвет границы
 @input-border-radius
 По умолчанию .
 Small  .form-control  радиус границы
 @input-border-focus
 Цвет границы для входных данных в фокусе
 @input-color-placeholder
 Цвет текста-заполнителя
 @input-height-base
 По умолчанию  .form-control  height
 @input-height-large
 Large  .form-control  height
 @input-height-small
 Small  .form-control  height
 @form-group-margin-bottom
  .form-group  поле
 @legend-color
 @легенда-граница-цвет
 @input-group-addon-bg
 Цвет фона для надстроек текстового ввода
 @input-group-addon-border-color
 Цвет границы для надстроек текстового ввода
 @cursor-disabled
 Курсор отключен для элементов управления формы и кнопок.
 Раскрывающиеся списки 
 Контейнер раскрывающегося меню и содержимое.
 @dropdown-bg
 Фон для выпадающего меню.
 @dropdown-border
 Выпадающее меню  border-color  .
 @dropdown-fallback-border
 Выпадающее меню  border-color   для IE8  .
 @dropdown-divider-bg
 Цвет разделителя между выпадающими элементами.
 @dropdown-link-color
 Цвет текста выпадающей ссылки.
 @dropdown-link-hover-color
 Цвет наведения для выпадающих ссылок.
 @dropdown-link-hover-bg
 Фон наведения для выпадающих ссылок.
 @dropdown-link-active-color
 Цвет текста элемента активного выпадающего меню.
 @dropdown-link-active-bg
 Цвет фона активного выпадающего меню.
 @dropdown-link-disabled-color
 Отключен цвет фона элемента раскрывающегося меню.
 @dropdown-header-color
 @dropdown-caret-color
 Устарело  @dropdown-caret-color  начиная с версии 3.1.0 будет меняться, приспосабливаясь для разных размеров экрана.
 @screen-xs
 Устарело  @screen-xs  с версии 3.0.1
 @screen-xs-min
 Устарело  @screen-xs-min  с версии 3. 2.0 9 0003  @экран-телефон
 Устарело  @screen-phone  начиная с версии 3.0.1
 @screen-sm
 Устарело  @screen-sm  начиная с версии 3.0.1
 @screen-sm-min
 @screen-tablet
 Устарело  @screen-tablet  начиная с версии 3.0.1
 @screen-md
 Устарело
 @screen-md-мин
 @screen-desktop
 Устарело  @screen-desktop  начиная с версии 3.0.1
 @screen-lg
 Устарело  @screen-lg  начиная с версии 3.0.1
 @screen-lg-min
 @screen-lg-desktop
 Устарело  @screen-lg-desktop  начиная с версии 3.0.1
 @screen-xs-max
 @экран-см-макс
 @screen-md-max
 Система сетки 
 Определите собственную адаптивную сетку.
 @grid-columns
 Количество столбцов в сетке.
 @grid-gutter-width
 Отступы между столбцами. Делится пополам на лево и право.
 @grid-float-breakpoint
 Точка, в которой панель навигации становится развернутой.
 @grid-float-breakpoint-max
 Точка, в которой панель навигации начинает сворачиваться.
 Размеры контейнера 
 Определите максимальную ширину  .container  для разных размеров экрана.
 @контейнер-таблетка
 @container-sm
 Для  @screen-sm-min  и выше.
 @контейнер-рабочий стол
 @container-md
 Для  @screen-md-min  и выше.
 @контейнер-большой-рабочий стол
 @container-lg
 Для  @screen-lg-min  и выше.
 Navbar 
 @navbar-высота
 @navbar-margin-bottom
 @navbar-border-radius
 @navbar-padding-horizontal
 @navbar-padding-vertical
 @navbar-collapse-max-height
 @navbar-цвет по умолчанию
 @navbar-default-bg
 @navbar-default-border
 @navbar-default-link-color
 @navbar-default-link-hover-color
 @navbar-default-link-hover-bg
 @navbar-default-link-active-color
 @navbar-default-link-active-bg
 @navbar-default-link-disabled-color
 @navbar-default-link-disabled-bg
 @navbar-default-brand-color
 @navbar-default-brand-hover-color
 @navbar-default-brand-hover-bg
 @navbar-default-toggle-hover-bg
 @navbar-default-toggle-icon-bar-bg
 @navbar-default-toggle-border-color
 Перевернутая панель навигации 
 @navbar-inverse-color
 @navbar-inverse-bg
 @navbar-обратная-граница
 @navbar-обратная-ссылка-цвет
 @navbar-inverse-link-hover-color
 @navbar-inverse-link-hover-bg
 @navbar-обратная-ссылка-активный-цвет
 @navbar-обратная-ссылка-активная-bg
 @navbar-обратная-ссылка-отключенный-цвет
 @navbar-обратная-ссылка-disabled-bg
 @navbar-inverse-brand-color
 @navbar-inverse-brand-hover-color
 @navbar-inverse-brand-hover-bg
 @navbar-inverse-toggle-hover-bg
 @navbar-inverse-toggle-icon-bar-bg
 @navbar-inverse-toggle-border-color
 Навигация 
 Общие стили навигации 
 @nav-link-padding
 @nav-link-hover-bg
 @nav-disabled-link-color
 @nav-disabled-link-hover-color
 Вкладки 
 @nav-tabs-border-color
 @nav-tabs-link-hover-border-color
 @nav-tabs-active-link-hover-bg
 @nav-tabs-active-link-hover-color
 @nav-tabs-active-link-hover-border-color
 @nav-tabs-justified-link-border-color
 @nav-tabs-justified-active-link-border-color
 Таблетки 
 @nav-pills-border-radius
 @nav-таблетки-активная-ссылка-hover-bg
 @nav-таблетки-активная-ссылка-наведение-цвет
 @цвет страницы
 @pagination-bg
 @граница страницы
 @pagination-hover-color
 @pagination-hover-bg
 @pagination-hover-border
 @pagination-active-color
 @pagination-active-bg
 @pagination-active-border
 @pagination-disabled-color
 @pagination-disabled-bg
 @pagination-disabled-граница
 Пейджер 
 @пейджер-bg
 @граница пейджера
 @pager-border-radius
 @pager-hover-bg
 @пейджер-актив-бг
 @пейджер-активный-цвет
 @ пейджер-отключенный-цвет
 Джамботрон 
 @jumbotron-padding
 @jumbotron-цвет
 @jumbotron-bg
 @jumbotron-цвет-заголовок
 @jumbotron-размер шрифта
 @jumbotron-heading-размер шрифта
 Определите цвета для состояний обратной связи формы и, по умолчанию, предупреждений.
 @состояние-успех-текст
 @state-success-bg
 @государство-успех-граница
 @state-info-текст
 @state-info-bg
 @государство-информация-граница
 @текст-предупреждения-состояния
 @state-warning-bg
 @государственная-предупреждающая-граница
 @статус-опасность-текст
 @state-danger-bg
 @государство-опасность-граница
 Подсказки 
 @tooltip-max-width
 Максимальная ширина подсказки
 @tooltip-color
 Цвет текста подсказки
 @tooltip-bg
 Toolt цвет фона IP
 @tooltip-opacity
 @tooltip-arrow-width
 Ширина стрелки подсказки
 @tooltip-arrow-color
 Цвет стрелки подсказки
 Всплывающие окна 
 @popover-bg
 Цвет фона всплывающего окна
 @popover-max-width
 Максимальная ширина всплывающего окна
 @popover-border-color
 Цвет границы всплывающего окна
 @popover-fallback-border- color
 Цвет рамки резервного всплывающего окна
 @popover-title-bg
 Цвет фона заголовка всплывающего окна
 @popover-arrow-width
 Ширина стрелки всплывающего окна
 @popover-arrow-color
 900 02 Цвет стрелки всплывающего окна
 @pover-rrow-outer-width
 Ширина внешней стрелки. color
 Метки 
 @label-default-bg
 Цвет фона метки по умолчанию
 @label-primary-bg
 Основной цвет фона метки
 @label-success-bg
 9000 2 Цвет фона метки успеха
 @label-info-bg
 Цвет фона информационной метки
 @label-warning-bg
 Цвет фона предупреждающей метки
 @label-danger-bg
 Цвет фона метки опасности
 @label-color
 По умолчанию label text color
 @label-link-hover-color
 Цвет текста связанной метки по умолчанию
 Modals 
 @modal-inner-padding
 Отступы, применяемые к модальному телу
 @modal-title-padding 9 0003
 Отступы, примененные к модальному заголовку
 @modal-title-line-height
 Модальный заголовок line-height
 @modal-content-bg
 Цвет фона области модального содержимого
 @modal-content-border-color
 Цвет границы модального содержимого
 @modal-content-fallback-border-color
 Цвет границы модального содержимого  для IE8 
 @modal-backdrop-bg
 Цвет фона модального фона
 9 0149 @modal-backdrop-opacity
 Непрозрачность модального фона
 @modal-header-border-color
 @modal-footer-border-color
 @modal-lg
 @modal-md
 @modal-sm
 Оповещения 
 Определите цвета предупреждений, радиус границы и отступы.
 @предупреждение-заполнение
 @alert-border-radius
 @alert-link-font-weight
 @alert-success-bg
 @успех-уведомления-текст
 @alert-success-граница
 @alert-info-bg
 @alert-info-текст
 @alert-info-border
 @оповещение-предупреждение-бг
 @ текст предупреждения-предупреждения
 @алерт-предупреждение-граница
 @alert-danger-bg
 @ текст предупреждения об опасности
 @Alert-Danger-Border
 Индикаторы выполнения 
 @progress-bg
 Цвет фона всего компонента выполнения
 @progress-bar-color
 Цвет текста индикатора выполнения
 @progress-border-radius
 Переменная для установки закругленных углов на индикаторе выполнения.
 @progress-bar-bg
 Цвет индикатора выполнения по умолчанию
 @progress-bar-success-bg
 Цвет индикатора выполнения успешного выполнения 003  @прогресс -bar-danger-bg
 Цвет индикатора состояния опасности
 @progress-bar-info-bg
 Цвет индикатора состояния информации
 Группа списка 
 @list-group-bg
 Цвет фона на  . list-group-item 
 @list-group-border
  .list-group-item  цвет рамки
 @list-group -граница- radius
 Радиус границы группы списка
 @list-group-hover-bg
 Цвет фона отдельных элементов списка при наведении
 @list-group-active-color
 Цвет текста активных элементов списка
 @list- group-active-bg
 Цвет фона активных элементов списка
 @list-group-active-border
 Цвет границы активных элементов списка
 @list-group-active-text-color
 Цвет текста для контента в активных элементах списка
 @list-group-disabled-color
 Цвет текста отключенных элементов списка
 @list-group-disabled-bg
 Цвет фона отключенных элементов списка
 @list-group-disabled-text-color
 Цвет текста содержимого отключенных элементов списка
 @list-group-link-color
 @list-group-link-hover-color
 @list-group-link-heading-color
 Панели 
 @panel-bg
 @panel-body-padding
 @panel-heading-padding
 @нижний колонтитул панели
 @панель-граница-радиус
 @panel-inner-border
 Цвет границы для элементов внутри панелей
 @panel-footer-bg
 @панель-текст по умолчанию
 @панель-дефолт-граница
 @panel-default-heading-bg
 @панель-первичный-текст
 @панель-первичная-граница
 @panel-primary-heading-bg
 @ панель-успех-текст
 @панель-успех-граница
 @panel-success-heading-bg
 @панель-информация-текст
 @панель-информация-граница
 @panel-info-heading-bg
 @панель-предупреждение-текст
 @панель-предупреждение-граница
 @panel-warning-heading-bg
 @панель-опасность-текст
 @панель-опасность-граница
 @panel-danger-heading-bg
 Миниатюры 
 @thumbnail-padding
 Отступ вокруг миниатюры
 @thumbnail-bg
 Цвет фона миниатюры
 @thumbnail-border
 9 0002 Цвет границы миниатюры
 @thumbnail-border-radius
 Граница миниатюры радиус
 @thumbnail-caption-color
 Пользовательский цвет текста для подписей миниатюр
 @thumbnail-caption-padding
 Отступ вокруг заголовка миниатюры
 Wells 
 @well-bg
 @граница колодца
 Значки 
 @значок-цвет
 @badge-link-hover-color
 Цвет текста связанного значка при наведении
 @badge-bg
 @badge-active-color
 Цвет текста значка в активной навигационной ссылке
 @badge-active-bg
 Цвет фона значка в активной навигационной ссылке
 @значок-шрифт-вес
 @значок-линия-высота
 @badge-border-radius
 @breadcrumb-padding-vertical
 @breadcrumb-padding-horizontal
 @breadcrumb-bg
 Цвет фона хлебных крошек
 @breadcrumb-color
 Цвет текста хлебных крошек
 @breadcrumb-active-color
 Цвет текста текущей страницы в хлебе rumb
 @breadcrumb-separator
 Текстовый разделитель между элементами хлебных крошек
 Карусель 
 @carousel-text-shadow
 @carousel-control-color
 @carousel-control-width
 @carousel-control-opacity
 @carousel-control-размер-шрифта
 @carousel-indicator-active-bg
 @carousel-indicator-border-color
 @carousel-caption-color
 Закрыть 
 @close-font-weight
 @близкий цвет
 @close-text-shadow
 Код 
 @код-цвет
 @code-bg
 @kbd-цвет
 @kbd-bg
 @pre-bg
 @предцвет
 @ цвет перед границей
 @пре-прокручиваемая-максимальная-высота
 Тип 
 @component-offset-horizontal
 Горизонтальное смещение для форм и списков.
 @text-muted
 Цвет приглушенного текста
 @abbr-border-color
 Аббревиатуры и акронимы Цвет рамки
 @headings-small-color
 Мелкий цвет заголовков
 @blockquote-small-color
 Цитата, мелкий цвет
 @blockquote-font-size
 Размер шрифта цитаты
 @blockquote-border-color
 Цитата border color
 @page-header-border-color
 Цвет границы заголовка страницы
 @dl-horizontal-offset
 Ширина заголовков списка описаний по горизонтали
 @dl-horizontal-breakpoint
 Точка, в которой .dl-horizontal становится горизонтальной
 @hr-border
 Цвет горизонтальной линии.
 Ура! Ваша пользовательская версия Bootstrap теперь готова к компиляции. Просто нажмите кнопку ниже, чтобы завершить процесс.
 Настройка темы Bootstrap 4 | Pinegrow Web Editor 
 Узнайте, как с помощью Pinegrow настроить тему Bootstrap 4, изменив переменные Bootstrap SASS и добавив правила CSS.
 Начиная с Pinegrow 6, вы можете настраивать многие аспекты темы Bootstrap с помощью панели дизайна, включая цвета и шрифты. Смотрите документацию здесь. Другие настройки должны быть выполнены, как описано ниже.
 Настройка Bootstrap обычно немного сложна, поскольку требует настройки среды компиляции SASS, установки исходных кодов Bootstrap SASS и создания файловой структуры для пользовательской темы.
 А вот с сосновым бором все очень просто.
 Pinegrow берет на себя все эти задачи. Все, что нам нужно сделать, это фактическая настройка.
 У вас нет опыта работы с SASS и переменными? Просто продолжайте читать, и вы узнаете по пути.
 Если вы хотите, вы можете использовать эту статью в качестве практического руководства, просто откройте Pinegrow (скачайте пробную версию, если у вас ее еще нет) и следуйте инструкциям.
 Эта статья также доступна в виде видео на YouTube, если вы предпочитаете смотреть действие:
 
 Начнем!
 Создать или открыть проект 
 Сначала создайте новый проект Bootstrap 4 с помощью «Файл -> Новая страница» или откройте существующий проект Bootstrap 4 с помощью «Файл -> Открыть проект».
 Обратите внимание: чтобы настроить существующий проект, файл bootstrap.css (или bootstrap.min.css) необходимо включить на страницу локально, а не удаленно из CDN.
 Если мы создали новую страницу, мы сначала сохраняем ее, а затем открываем папку как проект:
 Позвольте Pinegrow настроить структуру SASS для темы 
 Обратите внимание, что эта команда работает с проектами, поэтому для нее требуется версия Pinegrow PRO.
 Откройте страницу своего проекта и выберите «Страница -> Настроить тему Bootstrap».
 Появится всплывающее уведомление с вопросом, хотим ли мы добавить исходники Bootstrap SASS в проект, чтобы выполнить настройку.
 Мы подтверждаем, и Сосновый Рост сделает за нас всю подготовительную работу. Другое уведомление объяснит, что было сделано:
  •  В нашем проекте создана папка bootstrap_theme.
  •  Исходные файлы Bootstrap SASS были скопированы в bootstrap_theme/bootstrap.
  •  Наш новый основной файл темы, custom.scss, был создан в папке bootstrap_theme. Все наши пользовательские переменные и правила CSS войдут в файл custom.scss, который, в свою очередь, включает исходные файлы Bootstrap SASS.
 Эта структура настроена в соответствии с официальными рекомендациями Bootstrap по настройке.
 Когда дело доходит до настройки Bootstrap, важно никогда не изменять фактические исходные файлы Bootstrap. Почему? Потому что все наши изменения будут перезаписаны, если мы обновим файлы Bootstrap в будущем.
 С помощью этой структуры мы сохраняем наши изменения в custom.scss и просто перезаписываем bootstrap_theme/bootstrap новыми исходными файлами Bootstrap, когда хотим обновить версию Bootstrap, используемую в проекте.
 Переменные Bootstrap SASS 
 Давайте посмотрим на доступные нам переменные Bootstrap.
 На панели «Стиль» откройте меню «Таблицы стилей». Здесь мы видим структуру нашей пользовательской темы Bootstrap:
 Не беспокойтесь, если это выглядит немного пугающе. Нас интересуют только два файла:
  •  _variables.scss со всеми переменными Bootstrap, удобно собранными в одном месте, и
  •  custom.scss, верхний файл в этой структуре, куда будут помещаться все наши модификации.
 Щелкните файл _variables.scss, чтобы открыть его на отдельной вкладке на панели «Стиль».
 В SASS перед переменными стоит символ $. Когда SASS компилируется в CSS, компилятор заменяет переменные их значениями.
 Pinegrow имеет встроенный компилятор SASS, поэтому нет необходимости устанавливать что-либо еще. Уникальная особенность SASS в Pinegrow заключается в том, что все изменения в файлах SASS немедленно компилируются и отображаются на странице — нет необходимости предварительно сохранять изменения.
 Изменение основного цвета 
 Для начала давайте изменим основной цвет темы.
 За это отвечает переменная $primary. Его значение по умолчанию — $blue, еще одна переменная, определенная в начале файла _variables. scss.
 Мы могли бы просто начать изменять переменную $primary в _variables.scss, но помните — это плохая идея. Это сделало бы невозможным легкое обновление версии Bootstrap без потери наших правок.
 Обратите внимание, мы работаем над функцией, которая блокирует определенные таблицы стилей, чтобы можно было предотвратить любые такие случайные изменения. На данный момент мы должны помнить об этом.
 Чтобы настроить $primary, щелкните его правой кнопкой мыши и выберите «Настроить в custom.scss». Если custom.scss еще не выбран, мы выбираем его из выпадающего списка.
 Pinegrow создает копию $primary в custom.scss и отображает custom.scss на собственной вкладке панели стилей.
 Мало того, Pinegrow также скопировал переменную $blue, потому что она используется в значении $primary. Без этого наша тема не сможет скомпилироваться, потому что компилятор SASS не будет знать, что означает $blue в определении $primary.
 Теперь мы можем изменить значение $primary на вкладке custom.scss.
 Цвета на странице сразу меняются.
 Мы можем ввести прямое значение цвета или создать новую переменную, например, $violet, и использовать ее.
 Создать новую переменную 
 Чтобы создать новую переменную, нажмите на строки вставки, которые появляются после наведения курсора между двумя элементами:
 Затем введите: $violet [TAB] #aa00aa [ENTER].
 Имеет смысл определить новый цвет как переменную, чтобы мы могли легко повторно использовать его в других местах.
 Поскольку мы хотим использовать $violet в $primary, нам нужно поместить определение $violet перед $primary.
 Теперь мы можем использовать $violet как значение $primary.
 Использование переменных Bootstrap в пользовательских значениях 
 Что если мы хотим, чтобы $primary использовала существующую переменную, определенную в _variables. scss?
 Сначала мы должны перенести эту переменную в custom.scss, перейдя на вкладку _variables.scss, щелкнув правой кнопкой мыши $pink и выбрав «Настроить в custom.scss». Pinegrow скопирует переменную в custom.scss.
 Помните, порядок переменных, которые ссылаются друг на друга, важен. Pinegrow пытается автоматически сохранить правильный порядок переменных, когда мы делаем «Настроить в…». В данном случае $pink был вставлен перед $primary, потому что именно так он расположен в _variables.scss.
 И это именно то, что нам нужно, чтобы мы могли использовать $pink в качестве значения $primary.
 Сохранение файла темы CSS 
 Всякий раз, когда мы сохраняем страницу, скомпилированный файл bootstrap.css (или bootstrap.min.css, если он использовался на странице) также сохраняется.
 Обратите внимание: на данный момент Pinegrow фактически не минимизирует файл css, если используется имя bootstrap.min.css.
 Удаление неиспользуемых переменных 
 Мы можем удалить переменные, которые больше не используются. Например, $blue больше не используется в $primary, поэтому мы можем безопасно удалить его из custom.scss, щелкнув значок корзины рядом с ним. Это удалит только $blue из custom.scss — он останется в _variables.scss.
 Поиск переменных 
 Теперь давайте изменим шрифты.
 Просматривая все переменные в _variables.scss, мы обнаруживаем, что их очень много. Мы можем использовать функцию поиска на панели «Стиль», чтобы найти нужные переменные.
 Щелкните значок поиска, чтобы отобразить строку поиска, а затем введите поисковый запрос «шрифт». Теперь на всех вкладках панели «Стиль» мы видим только CSS-правила и переменные, содержащие термин «шрифт».
 А вот и наша переменная: $font-family-sans-serif.
 Снова кликаем по нему правой кнопкой мыши и выбираем «Настроить в custom.scss».
 Во вкладке custom.scss (обратите внимание, активное условие поиска также влияет на то, что там отображается) мы меняем переменную так, чтобы она использовала Georgia, красивый системный шрифт с засечками.
 Красиво!
 Использование пользовательских шрифтов 
 А как насчет использования пользовательских шрифтов, например Google Fonts?
 Тоже легко. Хотя в Pinegrow есть инструмент «Страница -> Управление шрифтами Google», для этой задачи проще включить шрифты вручную.
 Заходим в Google Fonts и находим шрифт, например Lato.
 Нажмите «Выбрать этот шрифт» и выберите параметр @import для встраивания шрифта.
 Просто копируем оператор @import без тегов