Bootstrap 中的标签和徽章是什么？

在本文中，我们将学习 Bootstrap 标签和徽章及其实现。 Bootstrap是一个免费的开源工具集，用于创建响应式网站和 Web 应用程序。 Bootstrap 是最流行的前端框架之一，它具有一组非常好的预定义 CSS 代码。 Bootstrap 使用不同类型的类来制作响应式网站。引导标签和徽章用于指定附加信息。徽章通过使用相对字体大小来缩放以匹配直接父元素的大小。标签告诉有关链接或文本的附加信息。

标签： Bootstrap ' .label'类是一个预定义的类，它以不同的格式提供与网页上的链接或文本相关的重要附加详细信息，例如警告、计数、更新、警报和提示等。 & 还为网页上的内容添加样式。

句法：

Content

类型：以下是 Bootstrap 中可用的 6 种标签：

• label-default ：顾名思义，这是使用的默认标签，当没有其他标签用于元素时。
• label-primary ：此标签用于通过将蓝色添加到元素来表示一些重要的标签。
• label-success ：此标签用于通过将绿色添加到元素来表示成功或一些积极的行动标签。
• label-info：此标签用于通过将浅蓝色添加到元素来指示信息标签。
• label-warning ：此标签用于通过向元素添加黄色来指示警报或负面操作标签。
• label-danger ：此标签用于通过将红色添加到元素来指示危险或负面行为标签。

方法：我们将通过以下方法实现标签：

• 在所有其他样式表之前将 Bootstrap CDN 包含到 标记中以加载我们的 CSS。

• 在带有类容器的 HTML 正文中添加
  标记。
• 在 html 正文中使用.label类声明 标记。
• 添加不同的标签，例如 .label-success、.label-primary、.label-danger、classes 为标签添加背景颜色。

示例 1：此示例说明了标签的实现。

HTML

  

    
    

  

    

        
Bootstrap Label Example
        
GeeksForGeeks
            New
        
          
        
GeeksForGeeks
            New
        
          
        
GeeksForGeeks
            New
        
          
        
GeeksForGeeks
            New
        
          
        
GeeksForGeeks
            New
        
          
        
GeeksForGeeks
            New
        
    

  

输出：

示例 2：此示例说明了具有不同预定义上下文类的标签。

HTML

  

    

  

    

        
Bootstrap Label Classes
        Default Label
        Primary Label
        Success Label
        Warning Label
        Danger Label
        Info Label
    

  

输出：

徽章：徽章是简单且基本的组件，用于显示指标或计算数字。这对于邮件计数和警报等目的非常有用。徽章与标签相同，只是它们有更多的圆角。徽章通过使用相对字体大小和 em 单位来缩放以匹配直接父元素的大小。这些可以使用预定义的“.badge”类来使用。有关详细信息，请参阅 Bootstrap-5 徽章文章。

句法：

 Contents... 

类型：以下是 Bootstrap 5 中可用的 8 种背景类型。

• bg-primary：用于为元素添加蓝色背景，突出元素的重要性。
• bg-info：用于通过给元素添加浅蓝色背景色来表示一些信息。
• bg-success：通过对元素使用绿色背景色来表示成功或积极的行动。
• bg-danger ：用于通过对元素使用红色背景颜色来指示危险或负面行为。
• bg-warning ：用于通过对元素使用黄色背景颜色来指示警报或负面操作。
• bg-secondary：用于通过对元素使用灰色背景颜色来表示无信息或次要动作。
• bg-light ：用于表示元素的透明背景颜色。
• bg-dark ：用于表示元素的深灰色背景色。

方法：我们将通过以下方法实现徽章：

• 在所有其他样式表之前将 Bootstrap CDN 包含到 标记中以加载我们的 CSS。

• 在带有类容器的 HTML 正文中添加
  标记。
• 在 标记中添加带有类徽章的 。

注意：您还可以使用单击按钮时打开的 标签添加指向附加到徽章的其他网站的链接。

示例 1：此示例说明按钮内的徽章。

HTML

  

    

  

    

        
Bootstrap Badge Example
        
            Danger 10
        
        
            Success 12
        
        
            Warning 20
        
        
            Warning 25
        
        
            Warning 6
        
    

  

输出：

示例 2：此示例说明了带有指向其他网站的链接的徽章，并且还使用了“药丸徽章”来使角落像药丸一样圆润。

HTML

  

    
  
    

  

    

        

            Badges with link to other websites.
        
  
        
            
                GeeksForGeeks 1
            
        
  
        
            
                Web-development 8
            
        
  
        
            
                Machine-learning 6
            
        
  
        
            
                Data-structures 2
            
        
    

  

输出：

支持的浏览器：

• 谷歌浏览器
• 火狐
• IE浏览器
• 微软边缘
• 苹果浏览器
• 歌剧