Bootstrap-5徽章

Bootstrap 5是Bootstrap的最新主要发行版，他们在其中修改了UI并进行了各种更改。徽章用于创建标签。通过使用相对字体大小，徽章可以缩放以匹配直接父元素的大小。

句法：

 Contents... 

类型：以下是Bootstrap 5中提供的八种背景。

• bg-primary
• bg-secondary
• 成功
• 危险
• 警告
• bg信息
• bg-light
• 暗黑

示例1：此示例演示了Bootstrap 5中前四种类型的Badge的工作方式。

  

---

输出：

示例2：此示例演示了Bootstrap 5中最后四种类型的Badge的工作方式。

的HTML

  

  
    
    

  

    

        

            GeeksforGeeks
        
    
    

        
Hello World
            
                GeeksforGeeks
            
        
        

            Hello World
            
                GeeksforGeeks
            
        
        

            Hello World
            
                GeeksforGeeks
            
        
        

            Hello World
            
                GeeksforGeeks
            
        
    

  

输出：

示例3：该示例显示了Bootstrap 5中通知徽章的工作方式。

的HTML

  

    
    

  

    

        

            GeeksforGeeks
        
        
                Notifications 
                
                    10
                 
        
    

                   

输出：

示例4：此示例显示Bootstrap 5中的Pill Badges的工作方式。

的HTML

   

    
    

   

    

   
        

            GeeksforGeeks
        
        Primary
        
        Secondary
        
        Success
        
        Danger
        
        Warning
        
        Info
        
        Light
        
        Dark
        
    

  
                   

输出：