Bootstrap5 Цвета
Bootstrap 5 предоставляет несколько значимых классов цветов:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body(цвет по умолчанию, черный) и.text-light:
Примеры
<div class="container">
<h2>Цвета текста с определённым значением</h2>
<p class="text-muted">Приглушённый текст.</p>
<p class="text-primary">Важный текст.</p>
<p class="text-success">Текст успеха.</p>
<p class="text-info">Информационный текст.</p>
<p class="text-warning">Предупреждающий текст.</p>
<p class="text-danger">Опасный текст.</p>
<p class="text-secondary">Второстепенный текст.</p>
<p class="text-dark">Тёмно-серый текст.</p>
<p class="text-body">Цвет по умолчанию, чёрный.</p>
<p class="text-light">Светло-серый текст (плохо виден на белом фоне).</p>
<p class="text-white">Белый текст (плохо виден на белом фоне).</p>
</div>
Попробуйте »
Вы можете установить прозрачность цвета текста на 50%, используя.text-black-50или.text-white-50class:
Примеры
<p class="text-black-50">Чёрный текст с непрозрачностью 50%, белый фон.</p>
<p class="text-white-50 bg-dark">Белый текст с непрозрачностью 50%, чёрный фон.</p>
Попробуйте »
Использование в ссылках
Примеры
<div class="container">
<h2>Цвета текста</h2>
<p>Наведите курсор мыши на ссылку.</p>
<a href="#" class="text-muted">Приглушённая ссылка.</a>
<a href="#" class="text-primary">Основная ссылка.</a>
<a href="#" class="text-success">Успешная ссылка.</a>
<a href="#" class="text-info">Информационная ссылка.</a>
<a href="#" class="text-warning">Предупреждающая ссылка.</a>
<a href="#" class="text-danger">Опасная ссылка.</a>
<a href="#" class="text-secondary">Вторичная ссылка.</a>
<a href="#" class="text-dark">Тёмно-серая ссылка.</a>
<a href="#" class="text-light">Светло-серая ссылка.</a>
</div>
Попробуйте »
Цвета фона
Классы, задающие цвета фона:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkи.bg-light。
Обратите внимание, что цвета фона не задают цвет текста. В некоторых примерах их нужно использовать вместе с.text-*class.
Примеры
<div class="container">
<h2>Цвет фона</h2>
<p class="bg-primary text-white">Важный цвет фона.</p>
<p class="bg-success text-white">Цвет фона успешного состояния.</p>
<p class="bg-info text-white">Информационный цвет фона.</p>
<p class="bg-warning text-white">Цвет фона предупреждения.</p>
<p class="bg-danger text-white">Цвет фона опасности.</p>
<p class="bg-secondary text-white">Вторичный цвет фона.</p>
<p class="bg-dark text-white">Черный цвет фона.</p>
<p class="bg-light text-dark">Светло-серый цвет фона.</p>
</div>
Попробуйте »