Bootstrap 5 Цвет фона
Bootstrap предназначен для интерфейсной веб-разработки, в которой приоритет отдается адаптации к мобильным устройствам. Он способствует более быстрому дизайну веб-страниц благодаря встроенным CSS, JS и т. д.
Bootstrap 5 предоставляет несколько служебных классов цвета, с помощью которых вы можете использовать цвет фона для передачи сообщения. Он включает в себя поддержку непрозрачности, осветления и затемнения, а также динамические цвета фона для различных триггеров.
Bootstrap 5 Цвет фона Класс:
- .bg-primary: этот класс задает основной цвет в качестве фона.
- .bg-success: этот класс дает зеленый фон.
- .bg-info: Этот класс дает бирюзовый фон.
- .bg-warning: Этот класс дает желтый фон.
- .bg-danger: этот класс дает красный фон.
- .bg-secondary: Этот класс дает серый фон.
- .bg-dark: Этот класс дает темно-серый фон.
- .bg-light: Этот класс дает светло-серый фон.
- .bg-transparent: этот класс дает прозрачный фон.
Пример: Вот пример всех информативных классов цвета фона.
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Background color</title> <link rel="stylesheet" href=</head> <body class="ms-2 me-2"> <div class="text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <strong>Bootstrap 5 Background colors</strong> <div class="p-3 mb-2 bg-primary text-white"> .bg color-primary</div> <div class="p-3 mb-2 bg-secondary text-white"> .bg-secondary</div> <div class="p-3 mb-2 bg-success text-white"> .bg-success</div> <div class="p-3 mb-2 bg-danger text-white"> .bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark"> .bg-warning</div> <div class="p-3 mb-2 bg-info text-dark"> .bg-info</div> </div></body> </html> |
Выход:
Пример 2. В этом примере мы будем использовать обычные классы цвета фона, такие как белый, черный, прозрачный и т. д.
Выход:
Ссылка: https://getbootstrap.com/docs/5.0/utilities/background/#background-color