Меню

Bootstrap как менять цвет



Цвета

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

Цвета темы

Мы используем подмножество всех цветов, чтобы создать меньшую цветовую палитру для создания цветовых схем, также доступных в виде переменных Sass и карты Sass в scss/_variables.scss файле Bootstrap.

Все эти цвета доступны в виде карты Sass, $theme-colors .

Все цвета

Все цвета Bootstrap доступны как переменные Sass и карта Sass в scss/_variables.scss файле. Чтобы избежать увеличения размеров файлов, мы не создаем классы цвета текста или фона для каждой из этих переменных. Вместо этого мы выбираем подмножество этих цветов для палитры темы.

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

Примечания к Sass

Sass не может программно генерировать переменные, поэтому мы вручную создали переменные для каждого оттенка и оттенка сами. Мы указываем значение средней точки (например, $blue-500 ) и используем пользовательские цветовые функции для тонирования (осветления) или затенения (затемнения) наших цветов с помощью mix() функции цвета Sass.

Использование mix() — это не то же самое, что lighten() и darken() — в первом случае указанный цвет смешивается с белым или черным, а во втором — только регулируется значение яркости каждого цвета. В результате получается гораздо более полный набор цветов, как показано в этой демонстрации CodePen.

Наши tint-color() и shade-color() функции используют mix() наряду с нашим $theme-color-interval переменным, которая определяет ступенчатое процентное значение для каждого смешанного цвета мы производим. Полный исходный код см. В файлах scss/_functions.scss и scss/_variables.scss .

Карты Color Sass

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

  • $colors перечисляет все наши доступные базовые ( 500 ) цвета
  • $theme-colors перечисляет все семантически названные цвета темы (показано ниже)
  • $grays перечисляет все банки и оттенки серого
Читайте также:  Крымские плоды зеленого цвета 1

Внутри scss/_variables.scss вы найдете цветовые переменные Bootstrap и карту Sass. Вот пример $colors карты Sass:

Добавляйте, удаляйте или изменяйте значения на карте, чтобы обновить, как они используются во многих других компонентах. К сожалению, в настоящее время не все компоненты используют эту карту Sass. В будущих обновлениях мы постараемся улучшить это. А пока планируйте использовать $ < color >переменные и эту карту Sass.

Пример

Вот как вы можете использовать их в своем Sass:

Также доступны служебные классы цвета для установки color и background-color использования 500 значений цвета.

Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.

В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.

Источник

Цвета

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

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

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

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

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

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

Цвет фона

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

Читайте также:  Дымчато синий цвет сочетание

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

Когда карта $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

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

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

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

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

Источник

Как изменить цвет панели навигации в Bootstrap?

Цвет панели навигации можно изменить в Bootstrap двумя способами:

Метод 1: Использование встроенных классов цвета

Изменение цвета текста

Цвет текста панели навигации можно изменить с помощью двух встроенных классов:

  • navbar-light: этот класс устанавливает цвет текста на темный. Это используется при использовании светлого цвета фона.
  • navbar-dark: этот класс установит цвет текста на свет. Это используется при использовании темного фона.

Изменение цвета фона:

Bootstrap 4 имеет несколько встроенных классов для цветов любого фона. Их можно использовать для установки цвета фона панели навигации. Доступны следующие классы фона:

  • .bg-primary: устанавливает основной цвет.
  • .bg-second: устанавливает цвет вторичного цвета.
  • .bg-success: устанавливает цвет для успеха.
  • .bg-danger: устанавливает цвет опасности.
  • .bg-warning: устанавливает цвет предупреждения.
  • .bg-info: устанавливает цвет информационного цвета.
  • .bg-light: Устанавливает цвет на светлый.
  • .bg-dark: устанавливает темный цвет.
  • .bg-white: устанавливает белый цвет.
  • .bg-transparent: устанавливает прозрачность панели навигации.

Пример:

How to change navigation bar color in Bootstrap ?

Читайте также:  Как узнать какого цвета у меня был антифриз

Источник

Bootstrap 4 Цвета

Цвета текста в Bootstrap 4

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

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

Пример

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

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

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

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

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

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

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

Пример

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

Пример

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

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

Цвета фона

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

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

Пример

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

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

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

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

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

Вторичный цвет фона.

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

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

ПАЛИТРА ЦВЕТОВ

КАК СДЕЛАТЬ

Ваше предложение:

Спасибо за Вашу помощь!

Ваше сообщение было отправлено в W3Schools.

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политики конфиденциальности. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Источник