Bootstrap 5 徽章按钮

Bootstrap 5带有一个Badges组件，可以为任何元素显示额外的、最新的信息和标签。除了正常的句子外，徽章也可以在按钮元素中实现，以显示任何链接或通知计数器。在这篇文章中，我们将通过在按钮上使用badges类来了解Badges在按钮上的使用。

先决条件： Bootstrap 5按钮

奖章按钮类：

badge : badge类用于显示小计数或通知点。

语法

<button type="button" class="btn ...">
     ... <span class=" **badge** ...">...</span>
</button>

例子1：这是一个例子，显示按钮内的通知计数，但徽章上不会有颜色。

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <title>Bootstrap 5 Badges Buttons</title>
</head>
  
<body>
    <center>
        <h1 class="text-success">
            GeeksforGeeks</h1>
        <strong>
            Bootstrap 5 Badges Buttons
        </strong>
        <br><br>
        <button type="button" class="btn btn-primary">
            Published Articles
            <!-- badge class is used -->
            <span class="badge">7</span>
        </button>
  
        <button type="button" class="btn btn-primary">
            Pending Articles
            <!-- badge class is used -->
            <span class="badge">2</span>
        </button>
    </center>
  
</body>
  
</html>

输出:

Bootstrap 5 徽章按钮

例子2：这是一个徽章的例子，其中的按钮有一个彩色的通知徽章。

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <title>Bootstrap 5 Badges Buttons</title>
</head>
  
<body>
    <center>
        <h1 class="text-success">
            GeeksforGeeks</h1>
        <strong>
            Bootstrap 5 Badges Buttons
        </strong>
        <br><br>
        <button type="button" class="btn btn-primary">
            Published Articles
            <!-- badge class is used with background color-->
            <span class="badge bg-success">7</span>
        </button>
  
        <button type="button" class="btn btn-primary">
            Pending Articles
            <!-- badge class is used with background color-->
            <span class="badge bg-danger">2</span>
        </button>
    </center>
  
</body>
  
</html>