Color bootstrap: Colors · Bootstrap v5.0 — Программирование на Python и Objective-C в Mac OS

Содержание

Цвета. Утилиты · Bootstrap. Версия v4.0.0

Передача значения через цвет с помощью нескольких полезных классов. Включает поддержку ссылок на стиль в hover-состоянии.

Цвет

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

<p>.text-primary</p>
<p>.text-secondary</p>
<p>.text-success</p>
<p>.text-danger</p>
<p>.text-warning</p>
<p>.text-info</p>
<p>.text-light</p>
<p>.text-dark</p>
<p>.text-muted</p>
<p>.text-white</p>

Классы контекстуального текста также работают хорошо на ссылках, где заданы hover и focus. Заметьте, что классы .text-white and .text-muted не имеют ссылочной стилизации.

<p><a href="#">Primary link</a></p>
<p><a href="#">Secondary link</a></p>
<p><a href="#">Success link</a></p>
<p><a href="#">Danger link</a></p>
<p><a href="#">Warning link</a></p>
<p><a href="#">Info link</a></p>
<p><a href="#">Light link</a></p>
<p><a href="#">Dark link</a></p>
<p><a href="#">Muted link</a></p>
<p><a href="#">White link</a></p>

Цвет фона

Как и в цветовых классах контекстуального текста, задавайте фон любому контекстуальному классу. Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут color, так что в некоторых случаях вам понадобится утилиты .text-*.

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

<div>.bg-primary</div>
<div>.bg-secondary</div>
<div>.bg-success</div>
<div>.bg-danger</div>
<div>.bg-warning</div>
<div>.bg-info</div>
<div>.bg-light</div>
<div>.bg-dark</div>
<div>.bg-white</div>

Градиентный фон

Когда карта $enable-gradients задана как true, вы сможете использовать классы .bg-gradient-. По умолчанию карта $enable-gradients деактивирована, а код примера ниже специально «сломан». Это сделано для более легкой настройки с самого начала пользования Bootstrap. Узнайте о параметрах Sass, об активации этих классов и т.д.

.bg-gradient-primary

.bg-gradient-secondary

.bg-gradient-success

.bg-gradient-danger

.bg-gradient-warning

.bg-gradient-info

.bg-gradient-light

.bg-gradient-dark

<div>.bg-gradient-primary</div>
<div>.bg-gradient-secondary</div>
<div>.bg-gradient-success</div>
<div>.bg-gradient-danger</div>
<div>.bg-gradient-warning</div>
<div>.bg-gradient-info</div>
<div>.bg-gradient-light</div>
<div>.bg-gradient-dark</div>

Специфические случаи

Иногда контекстуальные классы нельзя применять из-за специфики другого селектора. В некоторых случаях эффективным «костылем» может стать оборачивание содержимого вашего элемента в <div> с классом.

Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Руководство Bootstrap Color Utility

1- Text Color (Цвет текста)

Text Colors:

text-color-example

<p>.text-primary</p>
<p>.text-secondary</p>
<p>.text-success</p>
<p>.text-danger</p>
<p>.text-warning</p>
<p>.text-info</p>
<p>.text-light</p>
<p>.text-dark</p>
<p>.text-body</p>
<p>.text-muted</p>
<p>.text-white</p>
<p>.text-black-50</p>
<p>.text-white-50</p>

Link Colors:

Все классы выше (За исключением .text-white & .text-muted) могут применить к Link для настройки цвета для Link. Bootstrap поддерживает статус hover и focus соответствующий каждому цвету выше.

text-color-link-example

<p><a href="#">Primary link</a></p>
<p><a href="#">Secondary link</a></p>
<p><a href="#">Success link</a></p>
<p><a href="#">Danger link</a></p>
<p><a href="#">Warning link</a></p>
<p><a href="#">Info link</a></p>
<p><a href="#">Light link</a></p>
<p><a href="#">Dark link</a></p>
<p><a href="#">Muted link</a></p>
<p><a href="#">White link</a></p>

2- Background Color (Цвет фона)

Индентично цвету текста (Text color), Bootstrap так же предоставляет классы для настройки фонового цвета элементам.

bg-color-example

<div>.bg-primary</div>
<div>.bg-secondary</div>
<div>.bg-success</div>
<div>.bg-danger</div>
<div>.bg-warning</div>
<div>.bg-info</div>
<div>.bg-light</div>
<div>.bg-dark</div>
<div>.bg-white</div>
<div>.bg-transparent</div>

Классы Bootstrap 4, изменяющие цвет текста и фона

В Bootstrap-4 существует ряд классов, которые связаны с назначением цветовых характеристик для шрифта или для фона элемента. Они похожи по названию, но отличаются внешне.

Классы, изменяющие цвет шрифта

Цвет шрифта задается следующими классами:

<p>.text-primary</p>
<p>.text-secondary</p>
<p>.text-success</p>
<p>.text-danger</p>
<p>.text-warning</p>
<p>.text-info</p>
<p>.text-light</p>
<p>.text-dark</p>
<p>.text-muted</p>
<p>.text-white</p>

<p>.text-primary</p>

<p>.text-secondary</p>

<p>.text-success</p>

<p>.text-danger</p>

<p>.text-warning</p>

<p>.text-light</p>

<p>.text-muted</p>

<p>.text-white</p>

See the Pen Bootstrap 4 Color classes by Elen (@ambassador) on CodePen.18892

Классы для изменения цвета ссылок

Вы можете использовать ряд классов для текста, чтобы назначить цвет ссылок, отличный от стандартного голубого:

See the Pen Bootstrap 4 Link Classes by Elen (@ambassador) on CodePen.18892

Можно увидеть при наведении на ссылки или при переходе по ним клавишей Tab, что происходит изменение цвета. Стилизация отсутствует для классов ссылок .text-white and .text-muted.

Классы, изменяющие цвет фона

<div>.bg-primary</div>
<div>.bg-secondary</div>
<div>.bg-success</div>
<div>.bg-danger</div>
<div>.bg-warning</div>
<div>.bg-info</div>
<div>.bg-light</div>
<div>.bg-dark</div>
<div>.bg-white</div>

<div>.bg-primary</div>

<div>.bg-secondary</div>

<div>.bg-success</div>

<div>.bg-danger</div>

<div>.bg-warning</div>

<div>.bg-light</div>

<div>.bg-white</div>

See the Pen Bootstrap 4 Background Color classes by Elen (@ambassador) on CodePen.18892

Как можно заметить, названия классов для изменения цвета фона подобны названиям классов для текста,нужно только заменить приставку text- на bg-. Но эти классы не управляют одновременно и цветом текста. Поэтому для изменения текста нужно использовать соответствующий цветовой класс с приставкой .text-. Если у вас внутри класса с приставку bg- расположена ссылка, она станет темнее при наведении.

Классы для создания градиентного фона

Используя стандартную таблицу стилей Bootstrap-4, вы не сможете назначить эти классы и получить отображение градиентного фона в блоках, т.к. этим процессом управляет SCSS-переменная $enable-gradients, которая по умолчанию равна false и доступна для редактирования в файле _variables.scss из пакета исходных файлов Bootstrap.

<div>.bg-gradient-primary</div>
<div>.bg-gradient-secondary</div>
<div>.bg-gradient-success</div>
<div>.bg-gradient-danger</div>
<div>.bg-gradient-warning</div>
<div>.bg-gradient-info</div>
<div>.bg-gradient-light</div>
<div>.bg-gradient-dark</div>

<div>.bg-gradient-primary</div>

<div>.bg-gradient-secondary</div>

<div>.bg-gradient-success</div>

<div>.bg-gradient-danger</div>

<div>.bg-gradient-warning</div>

<div>.bg-gradient-info</div>

<div>.bg-gradient-light</div>

<div>.bg-gradient-dark</div>

Но, изменив значение этой переменной на true, и скомпилировав новый css-файл, вы вполне сможете использовать градиентные фоны от Bootstrap-4. Не факт, что они вам так уж сильно понадобятся, т.к. градиентные переходы в этих классах очень мягкие, почти незаметные. Наверное, именно поэтому разработчики по умолчанию не включили эти классы в состав bootstrap.css.

Ссылки на документацию Bootstrap:

На английском
На русском

цветов · Bootstrap v4.5

Передайте смысл через цвет с помощью нескольких вспомогательных классов цвета. Также включает поддержку стилизации ссылок с помощью состояний наведения.

Работа со спецификой

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

с классом.

Передача смысла вспомогательным технологиям

Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана.Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only .

Цвет

. Основной текст

.text-вторичный

.text-success

. Текст-опасность

.text-warning

.text-info

. Текстовый свет

.темный текст

.text-body

.без звука

. Текст-белый

.text-черный-50

.text-white-50

   .text-primary 
 .text-secondary 
 .text-success 
. текст-опасность 
. текст-предупреждение 
 .text-info 
 .text-light 
 .text-dark 
 .text-body 
. текст без звука 
 .text-white 
 .text-black-50 
.text-white-50

Классы контекстного текста также хорошо работают с привязками с предоставленными состояниями наведения и фокуса. Обратите внимание, что классы .text-white и .text-muted не имеют дополнительных стилей ссылок, кроме подчеркивания.

    Основная ссылка  
  Дополнительная ссылка  
  Ссылка на успех  
  Ссылка на опасность  
  Предупреждающая ссылка  
  Информационная ссылка  
  Легкая ссылка  
  Темная ссылка  
  Ссылка отключена  
  Белая ссылка

Цвет фона

Подобно классам цвета контекстного текста, легко установить фон элемента для любого контекстного класса.Компоненты привязки будут темнеть при наведении курсора, как и классы текста. Фоновые утилиты не устанавливают цвет , поэтому в некоторых случаях вы захотите использовать утилиты .text- * .

.bg-primary

.bg-вторичный

.bg-success

.bg-опасность

.bg-предупреждение

.bg-info

.bg-светлый

.bg-темный

.bg-белый

.bg-прозрачный

   .bg-primary 
.bg-вторичный 
 .bg-success 
 .bg-dangerous 
 .bg-warning 
 .bg-info 
 .bg-light 
 .bg-dark 
 .bg-white 
 .bg-transparent

Фоновый градиент

Если для $ enable-gradient установлено значение true (по умолчанию false ), вы можете использовать служебные классы .bg-gradient- .Узнайте о наших опциях Sass, чтобы включить эти и другие классы.

.bg-gradient-primary
.bg-gradient-вторичный
.bg-gradient-success
.bg-gradient-dangerous
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark

Бутстрап 4 цвета

Цвета текста

Bootstrap 4 имеет несколько контекстных классов, которые можно использовать для предоставления «значения через цвета».

Классы цветов текста: .text-muted ,
.text-primary , .text-success , .text-info ,
.text-warning , .text-dangerous , .text-secondary , .text-white ,
.text-dark , .text-body (основной цвет по умолчанию / часто черный) и .text-light :

Пример

Этот текст отключен.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет собой предупреждение.

Этот текст представляет опасность.

Дополнительный текст.

Темно-серый текст.

Основной текст.

Светло-серый текст.

Попробуй сам »

Классы контекстного текста также могут использоваться в ссылках, которые добавят более темный цвет при наведении курсора:

Вы также можете добавить 50% непрозрачности для черного или белого текста с помощью классов .text-black-50 или .text-white-50 :

Пример

Черный текст с непрозрачностью 50% на белом фоне

Белый текст с непрозрачностью 50% на черном фоне

Попробуй сам »

Цвет фона

Классы фоновых цветов: .bg-primary , .bg-success, .bg-info , .bg-warning , .bg-dangerous , .bg-secondary , .bg-dark и .bg-light .

Обратите внимание, что цвета фона не определяют цвет текста, поэтому в некоторых случаях вы захотите использовать их вместе с классом .text- * .

Пример

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет собой предупреждение.

Этот текст представляет опасность.

Дополнительный цвет фона.

Темно-серый цвет фона.

Светло-серый цвет фона.

Попробуй сам »

Цветовые классы начальной загрузки для текста, фона, ссылок и др.

В этом уроке я покажу вам примеры встроенных цветовых классов Bootstrap для различных элементов. В Bootstrap есть специальные классы для раскрашивания текста, ссылок, кнопок и т. Д.

пример текста фоновые ссылки навигационная панель

Обычно имена классов используют контекст, который может отражать назначение текста или какого-либо другого элемента. Например, при использовании текста или кнопки красного цвета имя класса содержит слово « –danger» , отражающее некоторую опасную или критическую информацию или действие. Точно так же — предупреждение — это оранжевый цвет для контекста, в котором вы тревожите посетителя для определенного действия.

Таким же образом Bootstrap 4 имеет стандартный шаблон для использования имен классов e.грамм. –Успех, –первичный, –вторичный, –светлый, –темный, –вредительный и т. Д.

Этим именам предшествуют имена элементов или короткие коды. Например, текст — для текста, btn- для кнопок, bg- для фона.

В последнем разделе вы также можете увидеть пример настройки цветов навигационной панели.

Bootstrap 4 класса для раскрашивания текста

Во-первых, взгляните на пример всех встроенных классов для раскрашивания простого текста в Bootstrap 4.

См. Онлайн-демонстрацию и код

Разметка для раскрашивания текста:

140002

Для синеватого текста:.text-primary class

Серый текст: .text-secondary class

Для зеленого текста: .text-success

Для текста красного цвета: .text-dangerous

Оранжевый текст: .text-warning

Голубой текст: .text-info class

Светлый текст на темном фоне.text-light

темный текст: .text-dark

.text-muted

Текст белого цвета : .text-white

Доступны следующие классы для раскраски текста:

темный текст / * Черноватый * /
текст белый
текстовая лампа
text-primary / * Стандартный синий цвет * /
вторичный текст / * Сероватый цвет * /
текст-предупреждение / * Оранжевый цвет * /
text-success / * Зеленый цвет * /
text-dangerous / * Красный цвет * /
text-info / * Голубой цвет * /
без звука

Пример использования контекстных классов цвета фона

Точно так же вы можете использовать стандартные классы цвета фона для установки фона различных элементов.

В следующем примере показано использование классов контекстного цвета фона в элементах абзацев, div и различных заголовков (h2-h6). Наряду с цветом фона также используются классы контекстного цвета текста.

См. Онлайн-демонстрацию и код

В разметке:

140002

.bg-primary для синего фона в абзаце

.bg-warning для оранжевого фона в заголовке h2

.bg-info в заголовке 2 со светом синий фон

.bg-light

.bg-dark

.bg-white

.bg-secondary

.bg-success

.bg-dangerous: для фона красного цвета с белым текстом в абзаце

Bootstrap 4 цветовых класса для кнопок

До сих пор вы можете увидеть образец раскраски в Bootstrap. Мы видели, что текст можно раскрасить, используя контекстные имена, используя text- [context class]. Аналогичным образом замените «текст» на «bg» для установки цвета фона.

Кнопки можно раскрасить таким же образом в Bootstrap.Просто замените «текст» или «bg» в классах выше на «btn», и те же стандартные цвета будут применены к кнопкам.

Следующие классы кнопок доступны в Bootstrap версии 4:

БТН-первичный
btn-вторичный
btn-success
btn-info
btn-светлый
btn-темный
БТН-Опасность
btn-предупреждение

Просмотрите демонстрацию в Интернете, щелкнув ссылку ниже для кнопок обычного размера:

См. Онлайн-демонстрацию и код

Узнайте больше о кнопках Bootstrap 4 с 15 примерами.

Пример раскраски пунктов списка

Как и стандартные встроенные классы текста, фона и кнопок, шаблон, который можно использовать для раскраски элементов списка, аналогичен.

Используйте контекстные классы Bootstrap 4 для создания списков со следующими цветами:

список-группа-элемент-первичный
список-группа-элемент-опасность
список-группа-элемент-успех
список-группа-элемент-информация
список-группа-элемент-вторичный
список-группа-элемент-предупреждение
список-группа-элемент-темный
список-группа-элемент-свет

См. Пример использования этих классов:

См. Онлайн-демонстрацию и код

Вы можете увидеть подробное руководство по списку Bootstrap здесь: списки Bootstrap 4

Пример раскраски ссылок

Если вы хотите раскрасить ссылки с помощью классов Bootstrap, просто назначьте классы контекстного текста тегам .Например:

Ссылка синего цвета

См. Пример, в котором я использовал все доступные классы текста для создания ссылок с цветами:

См. Онлайн-демонстрацию и код

В разметке:

140002

Bootstrap 4 цвета ссылок

Имя класса: text-primary

Имя класса: текст -вторичный

Название класса: текстовый белый

Имя класса: text-success

Имя класса: text-info

Имя класса: текст -светлый

Название класса: темный текст

Имя класса: без звука

Имя класса: text-dangerous

Имя класса: текст -предупреждение

Как видите, в нескольких ссылках также используются классы цвета фона.

Использование цвета текста и фона в примере таблицы Bootstrap 4

Тем не менее, Bootstrap 4 имеет встроенные контекстные классы для раскрашивания заголовков таблиц (thead-dark или thead-light) и строк таблицы с помощью контекстных классов и т. Д.

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

Кроме того, заголовок таблицы имеет отдельный цвет фона и текста. Посмотри:

См. Онлайн-демонстрацию и код

В разметке:

140002

000

000 34

0002 47

00030002 47

0003

9 0002 64

< th> Сумма

Месяц	Количество продаж
янв.	105	15 000 долларов США.00
фев	95	12 000,00 долл. США
март	150	20 000 долларов.00
апр	50	30 000,00 долл. США
май	80	15 000 долл. США.00
июн	110	22 000,00 долл. США

Чтобы узнать больше о контекстных классах таблицы и других функциях, посетите учебник по таблицам Bootstrap 4.

Установка фона для примера навигационной панели

Вы можете использовать классы цвета фона для установки фона панели навигации в Bootstrap 4. Для этого просто используйте класс фона в теге

, содержащем вашу панель навигации. Например:

Взгляните на эту демонстрационную онлайн-панель навигации:

См. Онлайн-демонстрацию и код

Просто скопируйте / вставьте код в свой редактор, чтобы увидеть все панели навигации.

Bootstrap 4 | Цвета — GeeksforGeeks

Цвета текста: Bootstrap предоставляет множество классов для установки цвета текста элемента. Все классы цветов текста перечислены ниже:

Пример: В этом примере используется класс цвета текста для установки цвета текстового содержимого.

html

< html lang = «en» >

< title > Пример цвета Bootstrap title >

000 0008 -8 " >

< meta name = " viewport " content = " width = device 1 " >

< link rel = " таблица стилей " href =

< скрипт src =

< сценарий src =

сценарий >

скрипт >

головка >

< корпус >

= «контейнер» >

< h3 > Список цветов начальной загрузки h3 >

< ul >

000 000 "текст без звука" >.класс с отключенным текстом li >

< li класс = "text-primary" >. класс с отключенным текстом li >

< li class = «text-success» > .text-success class li >

класс = «текстовая информация» >.text-info class li >

< li class = "text-warning" > .text-warning class li >

< li класс = «текст-опасность» > .text-опасность класс li >

класс = «текст-вторичный» >.текст-средний класс li >

< li класс = "текст белый" > .text-белый класс li >

< li class = «text-dark» > .text-dark class li >

класс = "текстовое тело" >.text-body class li >

< li class = "text-light" > .text-light class li >

ul >

div >

/ html >

Вывод:

Цвета фона: Bootstrap предоставляет множество классов для установки цвета фона элемента.Все классы цветов фона перечислены ниже:

Пример: В этом примере используется класс background-color для установки цвета фона содержимого.

html

< html lang = «en» utf-8 " >

< meta name = " масштаб окна просмотра " контент = ширина устройства " = 1 " >

< link rel = 900 08 "таблица стилей" href =

< скрипт src =

< скрипт src =

скрипт >

голова >

< корпус class = «контейнер» >

90 002 < h3 > Список цветов фона начальной загрузки h3 >

< ul >

0007 = "bg-primary" >.bg-primary class li >

< li class = «bg-success» > .bg-success class 0007 >

< li класс = «bg-info» > .bg-info class li >

класс = «bg-warning» >.класс bg-warning li >

< li класс = «bg-dangerous» > .bg-класс опасности 0007 >

< li класс = «bg-secondary» > .bg-secondary class li >

класс = «bg-dark» >.bg-dark class li >

< li class = «bg-light» > .bg-light class 0007 >

ul >

div >

/

html >

Вывод:

Поддерживаемый браузер:

Google Chrome
Internet Explorer
Firefox
Цвет фона Safari

Opera 901 для всех доступных цветов в Bootstrap 5 - 5 воздушных шаров

В Bootstrap 5 доступно 12 различных цветов, и каждый цвет имеет 9 различных оттенков, которые вы можете использовать.

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

Создать класс CSS для всех основных цветов

Если вы хотите создать цвет фона и цвет текста для всех основных цветов. Вы можете просмотреть списки всех доступных базовых (500) цветов, которые хранятся в переменной $ colors в библиотеке начальной загрузки

 
@import "~ bootstrap / scss / functions";
@import "~ bootstrap / scss / variables";
@import "~ bootstrap / scss / utilities";

// Генерация bg и цвета текста для всех базовых цветов
@each $ color, $ value в $ colors {
  .bg - # {$ color} {
        цвет фона: значение $! важно;
  }

  .text - # {$ color} {
    цвет: $ value! important;
  }
}

@import '~ bootstrap / scss / bootstrap';

Создать класс CSS для всех оттенков серого цвета

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

 
@import "~ bootstrap / scss / functions";
@import "~ bootstrap / scss / variables";
@import "~ bootstrap / scss / utilities";

// Создание всех оттенков серого
@each $ key, $ value in $ grays {
  .bg-gray - # {$ key} {
        цвет фона: значение $! важно;
  }

  .text-gray - # {$ key} {
    цвет: $ value! important;
  }
}

// Bootstrap
@import '~ bootstrap / scss / bootstrap';

Создать класс CSS для всех оттенков всех цветов

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

 
@import "~ bootstrap / scss / functions";
@import "~ bootstrap / scss / variables";
@import "~ bootstrap / scss / utilities";

$ blues: ("100": $ blue-100, "200": $ blue-200, "300": $ blue-300, "400": $ blue-400, "500": $ blue-500, " 600 »: $ blue-600,« 700 »: $ blue-700,« 800 »: $ blue-800,« 900 »: $ blue-900)! Default;
$ indigos: ("100": $ индиго-100, "200": $ индиго-200, "300": $ индиго-300, "400": $ индиго-400, "500": $ индиго-500, " 600 »: $ индиго-600,« 700 »: $ индиго-700,« 800 »: $ индиго-800,« 900 »: $ индиго-900)! По умолчанию;
$ purples: ("100": фиолетовый-100 $, "200": фиолетовый-200 $, "300": фиолетовый-300 $, "400": фиолетовый-400, "500": фиолетовый-500, " 600 ": фиолетовый-600, 700: фиолетовый-700, 800: фиолетовый-800, 900: фиолетовый-900)! Default;
$ pinks: («100»: розовый-100 $, «200»: розовый-200 $, «300»: розовый-300 $, «400»: розовый-400 $, «500»: розовый-500 $, " 600 »: розовый-600 $,« 700 »: розовый-700 $,« 800 »: розовый-800 $,« 900 »: розовый-900)! Default;
$ reds: ("100": $ красный-100, "200": $ красный-200, "300": $ красный-300, "400": $ красный-400, "500": $ красный-500, " 600 »: $ красный-600,« 700 »: $ красный-700,« 800 »: $ красный-800,« 900 »: $ красный-900)! Default;
$ апельсины: ("100": оранжевый-100, "200": оранжевый-200, "300": оранжевый-300, "400": оранжевый-400, "500": оранжевый-500, " 600 »: $ оранжевый-600,« 700 »: $ оранжевый-700,« 800 »: $ оранжевый-800,« 900 »: $ оранжевый-900)! Default;
$ yellows: ("100": желтый-100 $, "200": желтый-200 $, "300": желтый-300 $, "400": желтый-400 $, "500": желтый-500 $, " 600 »: желтый-600 $,« 700 »: желтый-700 $,« 800 »: желтый-800 $,« 900 »: желтый-900 $)! Default;
$ зелень: ("100": $ зелёный-100, "200": $ зелёный-200, "300": $ зелёный-300, "400": зелёный-400, "500": зелёный-500, " 600 »: зеленый-600 $,« 700 »: зеленый-700 $,« 800 »: зеленый-800 $,« 900 »: зеленый-900 $)! Default;
$ teals: ("100": $ teal-100, "200": $ teal-200, "300": $ teal-300, "400": $ teal-400, "500": $ teal-500, " 600 ": $ бирюзовый-600," 700 ": $ бирюзовый-700," 800 ": $ бирюзовый-800," 900 ": $ бирюзовый-900)! Default;
$ cyans: ("100": $ cyan-100, "200": $ cyan-200, "300": $ cyan-300, "400": $ cyan-400, "500": $ cyan-500, " 600 »: $ cyan-600,« 700 »: $ cyan-700,« 800 »: $ cyan-800,« 900 »: $ cyan-900)! По умолчанию;

@each $ key, $ value in $ blues {
  .bg-blue - # {$ key} {
        цвет фона: значение $! важно;
  }

  .text-blue - # {$ key} {
    цвет: $ value! important;
  }
}

@each $ key, $ value in $ purples {
  .bg-blue - # {$ key} {
        цвет фона: значение $! важно;
  }

  .text-blue - # {$ key} {
    цвет: $ value! important;
  }
}

@each $ key, $ value в $ indigos {
  .bg-blue - # {$ key} {
        цвет фона: значение $! важно;
  }

  .синий текст - # {$ key} {
    цвет: $ value! important;
  }
}

@each $ key, $ value in $ pinks {
  .bg-blue - # {$ key} {
        цвет фона: значение $! важно;
  }

  .text-blue - # {$ key} {
    цвет: $ value! important;
  }
}

@each $ key, $ value in $ reds {
  .bg-blue - # {$ key} {
        цвет фона: значение $! важно;
  }

  .text-blue - # {$ key} {
    цвет: $ value! important;
  }
}

@each $ key, $ value in $ oranges {
  .bg-blue - # {$ key} {
        цвет фона: значение $! важно;
  }

  .text-blue - # {$ key} {
    цвет: $ value! important;
  }
}

@each $ key, $ value in $ yellows {
  .bg-blue - # {$ key} {
        цвет фона: значение $! важно;
  }

  .text-blue - # {$ key} {
    цвет: $ value! important;
  }
}

@each $ key, $ value in $ greens {
  .bg-blue - # {$ key} {
        цвет фона: значение $! важно;
  }

  .синий текст - # {$ key} {
    цвет: $ value! important;
  }
}


@each $ key, $ value in $ teals {
  .bg-blue - # {$ key} {
        цвет фона: значение $! важно;
  }

  .text-blue - # {$ key} {
    цвет: $ value! important;
  }
}

@each $ key, $ value in $ cyans {
  .bg-blue - # {$ key} {
        цвет фона: значение $! важно;
  }

  .text-blue - # {$ key} {
    цвет: $ value! important;
  }
}

@import '~ bootstrap / scss / bootstrap';

Итак, повеселитесь, используя разнообразные цвета и оттенки бутстрапа.

цвет бутстрапа - npm

Галерея цветовой темы для Bootstrap 4

Каждая папка в / dist / - это собственная тема, включая:

bootstrap-color.css : встроенный CSS
bootstrap-color.min.css : построенный и минимизированный css
_begin.scss : настройка параметров
_end.scss : изменить структуру

Начало работы

Вы можете использовать встроенные файлы CSS в / dist / ,
или импортируйте файлы SASS _begin.scss _end.scss прямо в ваши сценарии, чтобы настроить его.

Мы сделали демонстрацию с использованием цвета начальной загрузки с Vue на
bootstrap-цвет-демо-vue
вы можете оформить заказ и настроить его.

Шаг сборки

Вы также можете зарегистрировать проект на локальном компьютере, изменить темы, а затем выполнить сборку с помощью: yarn build

Использование

Есть несколько способов интегрировать Bootswatch в свой проект.

Через предварительно скомпилированный актив

Загрузите файл начальной загрузки .min.css связать с темой и заменить
Таблица стилей по умолчанию для Bootstrap. Вы все равно должны включить JavaScript в Bootstrap.
файл, чтобы иметь функциональные раскрывающиеся списки, модальные окна и т. д.

Через Sass Imports

Если вы используете Sass (SCSS) в своем проекте, вы можете
импортировать файлы _begin.scss и _end.scss для данной темы.
Этот метод позволяет вам переопределить переменные темы.

  
  @import "~ цвет начальной загрузки / dist / [тема] / начало"; 
  @import "~ bootstrap / scss / bootstrap"; 
  @import "~ цвет начальной загрузки / dist / [тема] / конец";

Обязательно импортируйте загрузочный файл Bootstrap .scss между _begin.scss и _end.scss !

Через NPM / ПРЯЖУ

Вы можете установить как пакет с помощью команды

npm install bootstrap-color bootstrap

или

пряжа добавить бутстрап цвета бутстрапа .

Авторские права

Этот проект перестраивает цветовые темы из
Хакерские темы,
Сапоги,
BootstrapThemes,
и т.д. Спасибо за ваш отзыв! <3

Цвет начальной загрузки

Цвета текста:

пример цвета текста

.основной текст

.text-secondary

.text-success

. текст-опасность

. текст-предупреждение

.text-info

.text-light

.text-dark

.text-body

. текст без звука

.text-white

.text-black-50

.text-white-50

Цвета ссылок:

Все вышеперечисленные классы (кроме .text-white & .text-muted ) может применяться к Links , чтобы установить цвет Link . Bootstrap поддерживает статус hover и focus , соответствующий каждому указанному выше цвету.

цвет текста, пример ссылки

Основная ссылка

Дополнительная ссылка

Ссылка на успех

Ссылка на опасность

Предупреждающая ссылка

Информационная ссылка

Легкая ссылка

Темная ссылка

Ссылка отключена

Белая ссылка

Подобно цвету текста, Bootstrap также предоставляет классы для настройки цвета фона для элементов.