Cмотреть на GitHub
Цвет и фон
Установите цвет фона с контрастным цветом переднего плана
На этой странице
Обзор
Добавлено в версии 5.2.0Помощники по цвету и фону сочетают в себе мощь наших утилит .text-* и утилит .bg-* в одном классе. Используя нашу функцию Sass color-contrast(), мы автоматически определяем контрастный color для определенного background-color.
Внимание! В настоящее время нет поддержки нативной CSS-функции
color-contrast, поэтому мы используем нашу собственную через Sass. Это означает, что настройка цветов нашей темы с помощью переменных CSS может вызвать проблемы с цветовым контрастом в этих утилитах.
Primary с контрастным цветом
Secondary с контрастным цветом
Success с контрастным цветом
Danger с контрастным цветом
Warning с контрастным цветом
Info с контрастным цветом
Light с контрастным цветом
Dark с контрастным цветом
<divclass="text-bg-primary p-3">Primary с контрастным цветом</div><divclass="text-bg-secondary p-3">Secondary с контрастным цветом</div><divclass="text-bg-success p-3">Success с контрастным цветом</div><divclass="text-bg-danger p-3">Danger с контрастным цветом</div><divclass="text-bg-warning p-3">Warning с контрастным цветом</div><divclass="text-bg-info p-3">Info с контрастным цветом</div><divclass="text-bg-light p-3">Light с контрастным цветом</div><divclass="text-bg-dark p-3">Dark с контрастным цветом</div>С компонентами
Используйте их вместо комбинированных классов .text-* и .bg-*, как в баджах:
PrimaryInfo
<spanclass="badge text-bg-primary">Primary</span><spanclass="badge text-bg-info">Info</span>Или на карточках:
Заголовок
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карточки.
Заголовок
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карточки.
<divclass="card text-bg-primary mb-3"style="max-width: 18rem;"><divclass="card-header">Заголовок</div><divclass="card-body"><pclass="card-text">Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карточки.</p></div></div><divclass="card text-bg-info mb-3"style="max-width: 18rem;"><divclass="card-header">Заголовок</div><divclass="card-body"><pclass="card-text">Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карточки.</p></div></div>
