English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap 4 предоставляет несколько цветовых классов с определённым значением: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark и .text-light:
<!DOCTYPE html> <html> <head> <title>Пример Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <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-light">Светло-серый текст (на белом фоне не видно).</p> <p class="text-white">Белый текст (на белом фоне не видно).</p> </div> </body> </html>Проверьте, посмотрите ‹/›
Использование в ссылках
<!DOCTYPE html> <html> <head> <title>Пример Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <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> </body> </html>Проверьте, посмотрите ‹/›
Классы, предоставляющие цвет фона: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark и .bg-light.
Обратите внимание, что цвет фона не устанавливает цвет текста, и в некоторых примерах вам нужно использовать класс .text-* вместе с ним.
<!DOCTYPE html> <html> <head> <title>Пример Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <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> </body> </html>Проверьте, посмотрите ‹/›