Кастомизация Bootstrap
Программирование на Python для начинающих
Бесплатный курс по Python даст Вам всю необходимую базу для начала программирования на языке Python. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.
Чтобы получить Видеокурс,
заполните форму
| E-mail: | |
| Имя: | |
Другие курсы
Как создать профессиональный Интернет-магазин
После семинара:
— Вы будете знать, как создать Интернет-магазин.
— Вы получите бесплатный подарок с подробным описанием каждого шага.
— Вы сможете уже приступить к созданию Интернет-магазина.
Записаться
Другие курсы
Человек не будет наслаждаться едой и питьем, если не перестрадает от голода и жажды.
Аврелий Августин
Доброго времени суток. В данной статье я расскажу как можно кастомизировать 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>
0">Теперь приступаем непосредственно к добавлению собственных цветов к сборке фреймворка. Для этого переходим в папку 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";
...
com/twbs/bootstrap/blob/main/LICENSE)А теперь рассмотрим содержимое непосредственно самого файла _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.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
- Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
Настройка. Настройка · Bootstrap v5.0.2
Cмотреть на GitHub
Узнайте как создавать темы и расширения Bootstrap с помощью Sass и множества глобальных опций, обширную систему цветов и многое другое.
Sass
Используйте наши исходные файлы Sass в своих переменных, картах, миксинов и функций.
Параметры Настройте Bootstrap со встроенными переменными для легкого переключения глобальных настроек CSS
Цвета Узнайте о настройте цветовых систем, которые поддерживают весь инструментарий.
Компоненты Создавайте компоненты с помощью базовых классов и классов-модификаторов.
CSS переменные Используйте пользовательские свойства Bootstrap для быстрого проектирования и разработки.
Оптимизация
Получите опыт по созданию легких, отзывчивых и легко изменяемых проектов.
Обзор
Есть несколько способов настроить Bootstrap. Выбор оптимального способа может зависеть от вашего проекта, сложности инструментов сборки, используемой вами версии Bootstrap, поддержки браузера и многого другого.
Наши два наиболее предпочтительных метода:
- Использование Bootstrap через систему управления пакетами для использования и расширения наших исходныех файлов.
- Использоввание скомпилированныех файлов дистрибутива Bootstrap или jsDelivr для добавления или переопределения стилей Bootstrap.
Хотя мы здесь подробно не рассказаваем о том, как использовать каждый менеджер пакетов, мы можем дать некоторые рекомендации по использованию Bootstrap с вашим собственным компилятором Sass.
Для тех, кто хочет использовать файлы дистрибутива и включить их, смотрите страницу начала работы и пример HTML-страницы. И там уже смотрите документацию по макету, компонентам и поведению для дальнейшего использования.
По мере знакомства с Bootstrap продолжайте изучать этот раздел о использовании наших глобальных параметров, использовании и изменении цветовой системы, создании компонентов, использовании нашего растущего списока пользовательских свойств CSS и оптимизации кода при сборке с Bootstrap.
CSP и встроенные SVG
Некоторые компоненты Bootstrap включают встроенные SVG-файлы в наш CSS, чтобы согласованно и легко стилизовать компоненты в разных браузерах и на разных устройствах. Для организаций с более строгими конфигурациями CSP, мы задокументировали все экземпляры наших встроенных SVG (все из которых применяются через
- Аккордеон
- Кнопка закрытия (используется в уведомлениях и модальных окнах)
- Чекбоксы и радиокнопки
- Выключатели
- Проверка на стороне сервера
- Выпадающие списки
- Карусель с элементами управления
- Отзывчивое поведение навигационной панели
На основе обсуждения сообщества некоторые варианты решения этой проблемы в Вашей собственной кодовой базе включают замену URL-адресов локально размещенными ресурсами, удаление изображений и использование встроенных изображений (невозможно во всех компонентах) и изменение Вашего CSP.
Наша рекомендация — внимательно изучить свои собственные политики безопасности и при необходимости выбрать лучший путь для дальнейшего развития.
Настройка и загрузка · Bootstrap
Выберите, какие файлы Less нужно скомпилировать в свою пользовательскую сборку Bootstrap. Не знаете, какие файлы использовать? Прочитайте страницы CSS и Компоненты в документации.
Общий код CSS
Стили печати
Типография
Код
Сеточная система
Столы
Формы
Кнопки
Отзывчивые утилиты
Компоненты
Глификоны
Группы кнопок
Входные группы
Навигация
Навбар
Панировочные сухари
Пагинация
Пейджер
Этикетки
Значки
Джамботрон
Миниатюры
Оповещения
Индикаторы выполнения
Медиа-элементы
Список групп
Панели
Адаптивная вставка
Уэллс
Значок закрытия
Компоненты JavaScript
Компонентные анимации (для JS)
(включая Collapse)
Падать
Подсказка
Трещать
Модальный
Карусель
Выберите, какие плагины jQuery должны быть включены в ваши пользовательские файлы JavaScript.
Не знаете, что включить? Прочтите страницу JavaScript в документации.
Связан с компонентами
Предупреждение об увольнении
Дополнительные кнопки
Функциональность карусели
Выпадающие списки
Модальные
Подсказки
Всплывающие окна (требуются всплывающие подсказки)
Переключаемые вкладки
Магия
Прикрепить
Крах
прокрутка
Переходы (обязательны для любого вида анимации)
Требуется jQuery
Для всех подключаемых модулей требуется последняя версия jQuery.
Настройте переменные Less, чтобы определить цвета, размеры и многое другое в ваших пользовательских таблицах стилей CSS.
Цвета
Серый и фирменные цвета для использования в Bootstrap.
@серая база
@серый-темнее
@серо-темный
@серый
@серо-светлый
@серо-светлый
@основной бренд
@успех бренда
@brand-info
@бренд-предупреждение
@бренд-опасность
Леса
Настройки для некоторых самых глобальных стилей.
@body-bg Цвет фона для .
Глобальный цвет текста на .
Глобальный цвет текстовой ссылки.
@link-hover-color Цвет при наведении ссылки устанавливается с помощью функции darken() .
Украшение при наведении ссылки.
Типографика
Шрифт, высота строки и цвет для основного текста, заголовков и т.
д.
@font-family-sans-serif
@font-family-serif
@font-family-monospace Моноширинные шрифты по умолчанию для , и .
@база семейства шрифтов
@база размера шрифта
@размер шрифта большой
@маленький размер шрифта
@размер шрифта-h2
@размер шрифта-h3
@размер шрифта-h4
@размер шрифта-h5
@размер шрифта-h5
@размер шрифта-h6
@line-height-base Безразмерный line-height для использования в таких компонентах, как кнопки.
Вычисленная "высота строки" ( размер шрифта * высота строки ) для использования с полем , отступом и т. д.
По умолчанию наследуется от .
@заголовки-шрифт-вес
@высота строки заголовков
@цвет заголовков
Иконография
Укажите пользовательское местоположение и имя файла прилагаемого шрифта значков Glyphicons.
Полезно для тех, кто включает Bootstrap через Bower.
Загрузите шрифты из этого каталога.
@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 Глобальный цвет для активных элементов (например, навигации или раскрывающихся списков).
Глобальный цвет фона для активных элементов (например, навигации или раскрывающихся списков).
@caret-width-base Ширина границы для создания кареток, обозначающих раскрывающиеся списки.
Размер каретки немного увеличивается для более крупных компонентов.
Таблицы
Настройка таблицы .table с базовыми значениями, каждое из которых используется во всех вариантах таблицы.
Заполнение для Заполнение для ячеек в Цвет фона по умолчанию для всех таблиц. Цвет фона, используемый для Цвет фона, используемый для @table-bg-активный Цвет границы для границ таблицы и ячеек. Для каждой кнопки 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 Цвет текста для По умолчанию Small Цвет границы для входных данных в фокусе Цвет текста-заполнителя По умолчанию Large Small @legend-color @легенда-граница-цвет Цвет фона для надстроек текстового ввода Цвет границы для надстроек текстового ввода Курсор отключен для элементов управления формы и кнопок. Контейнер раскрывающегося меню и содержимое. Фон для выпадающего меню. Выпадающее меню Выпадающее меню Цвет разделителя между выпадающими элементами. Цвет текста выпадающей ссылки. Цвет наведения для выпадающих ссылок. Фон наведения для выпадающих ссылок. Цвет текста элемента активного выпадающего меню. Цвет фона активного выпадающего меню. Отключен цвет фона элемента раскрывающегося меню. Устарело Устарело Устарело Устарело Устарело @screen-sm-min Устарело Устарело @screen-md-мин Устарело Устарело @screen-lg-min Устарело @screen-xs-max @экран-см-макс @screen-md-max Определите собственную адаптивную сетку. Количество столбцов в сетке. Отступы между столбцами. Делится пополам на лево и право. Точка, в которой панель навигации становится развернутой. Точка, в которой панель навигации начинает сворачиваться. Определите максимальную ширину @контейнер-таблетка Для @контейнер-рабочий стол Для @контейнер-большой-рабочий стол Для @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 @государство-опасность-граница Максимальная ширина подсказки Цвет текста подсказки Toolt цвет фона IP @tooltip-opacity Ширина стрелки подсказки Цвет стрелки подсказки Цвет фона всплывающего окна Максимальная ширина всплывающего окна Цвет границы всплывающего окна Цвет рамки резервного всплывающего окна Цвет фона заголовка всплывающего окна Ширина стрелки всплывающего окна Ширина внешней стрелки. Цвет фона метки по умолчанию Основной цвет фона метки Цвет фона информационной метки Цвет фона предупреждающей метки Цвет фона метки опасности По умолчанию label text color Цвет текста связанной метки по умолчанию Отступы, применяемые к модальному телу Отступы, примененные к модальному заголовку Модальный заголовок line-height Цвет фона области модального содержимого Цвет границы модального содержимого Цвет границы модального содержимого для IE8 Цвет фона модального фона Непрозрачность модального фона @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 Цвет фона всего компонента выполнения Цвет текста индикатора выполнения Переменная для установки закругленных углов на индикаторе выполнения. Цвет индикатора выполнения по умолчанию Цвет индикатора выполнения успешного выполнения 003 @прогресс -bar-danger-bg Цвет индикатора состояния опасности Цвет индикатора состояния информации Цвет фона на Радиус границы группы списка Цвет фона отдельных элементов списка при наведении Цвет текста активных элементов списка Цвет фона активных элементов списка Цвет границы активных элементов списка Цвет текста для контента в активных элементах списка Цвет текста отключенных элементов списка Цвет фона отключенных элементов списка Цвет текста содержимого отключенных элементов списка @list-group-link-color @list-group-link-hover-color @list-group-link-heading-color @panel-bg @panel-body-padding @panel-heading-padding @нижний колонтитул панели @панель-граница-радиус Цвет границы для элементов внутри панелей @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 Отступ вокруг миниатюры Цвет фона миниатюры Граница миниатюры радиус Пользовательский цвет текста для подписей миниатюр Отступ вокруг заголовка миниатюры @well-bg @граница колодца @значок-цвет Цвет текста связанного значка при наведении @badge-bg Цвет текста значка в активной навигационной ссылке Цвет фона значка в активной навигационной ссылке @значок-шрифт-вес @значок-линия-высота @badge-border-radius @breadcrumb-padding-vertical @breadcrumb-padding-horizontal Цвет фона хлебных крошек Цвет текста хлебных крошек Цвет текста текущей страницы в хлебе rumb Текстовый разделитель между элементами хлебных крошек @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 @предцвет @ цвет перед границей @пре-прокручиваемая-максимальная-высота Горизонтальное смещение для форм и списков. Цвет приглушенного текста Аббревиатуры и акронимы Цвет рамки Мелкий цвет заголовков Цитата, мелкий цвет Размер шрифта цитаты Цитата border color Цвет границы заголовка страницы Ширина заголовков списка описаний по горизонтали Точка, в которой .dl-horizontal становится горизонтальной Цвет горизонтальной линии. Ура! Ваша пользовательская версия Bootstrap теперь готова к компиляции. Просто нажмите кнопку ниже, чтобы завершить процесс. Узнайте, как с помощью 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 PRO. Откройте страницу своего проекта и выберите «Страница -> Настроить тему Bootstrap». Появится всплывающее уведомление с вопросом, хотим ли мы добавить исходники Bootstrap SASS в проект, чтобы выполнить настройку. Мы подтверждаем, и Сосновый Рост сделает за нас всю подготовительную работу. Другое уведомление объяснит, что было сделано: Эта структура настроена в соответствии с официальными рекомендациями Bootstrap по настройке. Когда дело доходит до настройки Bootstrap, важно никогда не изменять фактические исходные файлы Bootstrap. Почему? Потому что все наши изменения будут перезаписаны, если мы обновим файлы Bootstrap в будущем. С помощью этой структуры мы сохраняем наши изменения в custom.scss и просто перезаписываем bootstrap_theme/bootstrap новыми исходными файлами Bootstrap, когда хотим обновить версию Bootstrap, используемую в проекте. Давайте посмотрим на доступные нам переменные Bootstrap. На панели «Стиль» откройте меню «Таблицы стилей». Здесь мы видим структуру нашей пользовательской темы Bootstrap: Не беспокойтесь, если это выглядит немного пугающе. Щелкните файл _variables.scss, чтобы открыть его на отдельной вкладке на панели «Стиль». В SASS перед переменными стоит символ $. Когда SASS компилируется в CSS, компилятор заменяет переменные их значениями. Pinegrow имеет встроенный компилятор SASS, поэтому нет необходимости устанавливать что-либо еще. Уникальная особенность SASS в Pinegrow заключается в том, что все изменения в файлах SASS немедленно компилируются и отображаются на странице — нет необходимости предварительно сохранять изменения. Для начала давайте изменим основной цвет темы. За это отвечает переменная $primary. Его значение по умолчанию — $blue, еще одна переменная, определенная в начале файла _variables. Мы могли бы просто начать изменять переменную $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. Что если мы хотим, чтобы $primary использовала существующую переменную, определенную в _variables. Сначала мы должны перенести эту переменную в custom.scss, перейдя на вкладку _variables.scss, щелкнув правой кнопкой мыши $pink и выбрав «Настроить в custom.scss». Pinegrow скопирует переменную в custom.scss. Помните, порядок переменных, которые ссылаются друг на друга, важен. Pinegrow пытается автоматически сохранить правильный порядок переменных, когда мы делаем «Настроить в…». В данном случае $pink был вставлен перед $primary, потому что именно так он расположен в _variables.scss. И это именно то, что нам нужно, чтобы мы могли использовать $pink в качестве значения $primary. Всякий раз, когда мы сохраняем страницу, скомпилированный файл bootstrap.css (или bootstrap.min.css, если он использовался на странице) также сохраняется. Обратите внимание: на данный момент Pinegrow фактически не минимизирует файл css, если используется имя bootstrap.min.css. Мы можем удалить переменные, которые больше не используются. Теперь давайте изменим шрифты. Просматривая все переменные в _variables.scss, мы обнаруживаем, что их очень много. Мы можем использовать функцию поиска на панели «Стиль», чтобы найти нужные переменные. Щелкните значок поиска, чтобы отобразить строку поиска, а затем введите поисковый запрос «шрифт». Теперь на всех вкладках панели «Стиль» мы видим только CSS-правила и переменные, содержащие термин «шрифт». А вот и наша переменная: $font-family-sans-serif. Снова кликаем по нему правой кнопкой мыши и выбираем «Настроить в custom.scss». Во вкладке custom.scss (обратите внимание, активное условие поиска также влияет на то, что там отображается) мы меняем переменную так, чтобы она использовала Georgia, красивый системный шрифт с засечками. Красиво! А как насчет использования пользовательских шрифтов, например Google Fonts? Тоже легко. Хотя в Pinegrow есть инструмент «Страница -> Управление шрифтами Google», для этой задачи проще включить шрифты вручную. Заходим в Google Fonts и находим шрифт, например Lato. Нажмите «Выбрать этот шрифт» и выберите параметр @import для встраивания шрифта. Просто копируем оператор @import без тегов
s и s. @table-уплотненная-ячейка-заполнение .table-уплотненная . .table-striped . .table-hover .
Кнопки
Формы
@input-bg цвет фона цвет фона s цвет границы.
.form-control радиус границы .form-control height .form-control height .form-control height .form-group поле Раскрывающиеся списки
border-color .
border-color для IE8 . @dropdown-caret-color начиная с версии 3.1.0 будет меняться, приспосабливаясь для разных размеров экрана. @screen-xs с версии 3.0.1 @screen-xs-min с версии 3.
2.0 9 0003 @экран-телефон @screen-phone начиная с версии 3.0.1 @screen-sm начиная с версии 3.0.1 @screen-tablet начиная с версии 3.0.1 @screen-desktop начиная с версии 3.0.1 @screen-lg начиная с версии 3.0.1 @screen-lg-desktop начиная с версии 3.0.1 Система сетки
Размеры контейнера
.container для разных размеров экрана. @screen-sm-min и выше. @screen-md-min и выше. @screen-lg-min и выше. Перевернутая панель навигации
Навигация
Общие стили навигации
Вкладки
Таблетки
Пейджер
Джамботрон
Подсказки
@tooltip-max-width Всплывающие окна
@popover-bg
color Метки
@label-default-bg Modals
@modal-inner-padding Оповещения
Индикаторы выполнения
@progress-bg Группа списка
@list-group-bg .
list-group-item .list-group-item цвет рамки Панели
Миниатюры
@thumbnail-padding Wells
Значки
Карусель
Закрыть
Код
Тип
@component-offset-horizontal
Настройка темы Bootstrap 4 | Pinegrow Web Editor
Смотрите документацию здесь. Другие настройки должны быть выполнены, как описано ниже. Создать или открыть проект
Позвольте Pinegrow настроить структуру SASS для темы
Переменные Bootstrap SASS
Нас интересуют только два файла: Изменение основного цвета
scss.
Создать новую переменную
Использование переменных Bootstrap в пользовательских значениях
scss? Сохранение файла темы CSS
Удаление неиспользуемых переменных
Например, $blue больше не используется в $primary, поэтому мы можем безопасно удалить его из custom.scss, щелкнув значок корзины рядом с ним. Это удалит только $blue из custom.scss — он останется в _variables.scss. Поиск переменных
Использование пользовательских шрифтов