如何在 Bootstrap 中为 div 添加背景颜色？

Bootstrap 提供了许多类来设置元素的背景颜色。我们可以轻松地将元素的背景设置为任何上下文类。锚组件将在悬停时变暗，就像文本类一样。下面的示例列出了一些背景颜色类别。

我们可以通过简单地添加类“bg-primary”、“bg-success”、“bg-danger”、“bg-info”等来为 div 添加背景颜色，如下例所示。

分步实施指南：

第 1 步：在所有其他样式表之前将 Bootstrap 和 jQuery CDN 包含到 标记中以加载我们的 CSS。

第 2 步：在 HTML 正文中添加

标签，使用 class container 。

第 3 步：使用.bg-primary、.bg-success等添加

标签 标签中的类。

示例 1：以下示例显示了不同的背景颜色类来设置内容的背景颜色。

HTML

       

         
       
    
     
         
    
         
    
         
    
    

   

    
        
            .bg-primary class
            .bg-success class
            .bg-info class
            .bg-warning class
            .bg-danger class
        
    
 

 

输出：

不同背景颜色的示例

示例 2：以下示例显示了如何 将背景颜色和其他类添加到 HTML div。

• 首先，在 HTML 代码中找到div并将预定义的类添加到开始标记。
• 将 Bootstrap 预定义类添加到要更改的div中。

HTML

       

       
    
     
         
    
        
    
         
    
    

   

    .bg-primary
    .bg-secondary
    .bg-success
    .bg-danger
    .bg-warning
    .bg-info

   

输出：

div 标签的背景颜色（每个 div 之间的这些空格是填充）