📌  相关文章
📜  如何在 Bootstrap 中为 div 添加背景颜色?

📅  最后修改于: 2022-05-13 01:56:30.601000             🧑  作者: Mango

如何在 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
    •         
        
     


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


     

    输出:

    不同背景颜色的示例

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

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

    HTML

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

    输出:

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