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: 这个类别给出一个透明的背景。

例子：这里有一个所有信息的背景颜色类的例子。

<!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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
</head>
  
<body>
    <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>

输出:

Bootstrap 5的背景颜色

Bootstrap 5 bg-color

例子2：在这个例子中，我们将使用正常的背景颜色类，如白色、黑色、透明等。

<!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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
</head>
  
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Background colors</strong>
  
        <div class="p-3 mb-2 bg-light text-dark">
            .bg-light</div>
        <div class="p-3 mb-2 bg-dark text-white">
            .bg-dark</div>
        <div class="p-3 mb-2 bg-body text-dark">
            .bg-body</div>
        <div class="p-3 mb-2 bg-white text-dark">
            .bg-white</div>
        <div class="p-3 mb-2 bg-transparent text-dark">
            .bg-transparent</div>
    </div>
</body>
  
</html>