如何更改引导丸徽章的大小？

给定一个具有药丸徽章的HTML文档(以防万一，如果您不知道什么是药丸徽章，请参考)，任务是增加徽章的大小。可以有三种方法可以做到这一点。该方法讨论如下：

方法1：使用内联样式：您可以简单地向span标签添加一个style属性，该span属性将badge-pill作为类，并根据您的意愿更改字体大小。

例子：

  

    

  

    

        Size of Pill badge Simple 
        Bootstrap Code
    
      
     
    
      
    

        Size of Pill badge after 
        using Approach 1st 
    
      
     
    

  

输出：

方法2：将徽标嵌入标题标签中：我们还可以将徽标的span标签包裹在不同的标题标签中，以实现所需的结果。

例子：

  

    

  

  
    

  
        

            Size of Pill badge Simple 
            Bootstrap Code
        
          
         
          
        

            Different Sizes of Pill badge 
            after using Approach 2nd 
        
          
        
h1 tag
        
 
        
          
        
h2 tag
        
 
        
          
        
h3 tag
        
 
        
          
        
h4 tag
        
 
        
          
        
h5 tag
        
 
        
          
        
h6 tag
        
 
        
    

  

输出：

方法3：通过使用Internal / External CSS覆盖类：我们还可以为徽章添加自己的自定义类名称，并在CSS文件中，我们可以更新font-size属性以获得所需的结果。

例子：

  

    
  
    

  

    

  
        

            Size of Pill badge Simple 
            Bootstrap Code
        
          
         
        
          
        

            Size of Pill badge after 
            using Approach 3nd 
        
          
        
             
    

  

输出：