一、按钮组
1.1 创建按钮组
Bootstrap 5 中允许我们将按钮放在同一行上。
可以在
元素上添加 .btn-group 类来创建按钮组。
<div class="container mt-3"> <h2>按钮组</h2> <p> .btn-group 类用于创建按钮组:</p> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> </div>
1.2 设置按钮组大小
我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。
<div class="container mt-3"> <h2>按钮组大小</h2> <p>我们可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小。</p> <h3>大按钮:</h3> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> <h3>默认按钮:</h3> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> <h3>小按钮:</h3> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> </div>
1.3 垂直按钮组
可以使用 .btn-group-vertical 类来创建垂直的按钮组：
<div class="container mt-3"> <h2>垂直按钮组</h2> <p>可以使用 .btn-group-vertical 类来创建垂直的按钮组：</p> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> </div>
1.4 内嵌按钮组及下拉菜单
我们可以在按钮组内设置下拉菜单：
<div class="container mt-3"> <h2>内嵌按钮组</h2> <p>按钮组设置下拉菜单:</p> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Tablet</a></li> <li><a class="dropdown-item" href="#">Smartphone</a></li> </ul> </div> </div> </div>
1.5 垂直按钮组及下拉菜单
<div class="container mt-3"> <h2>垂直按钮组及下拉菜单</h2> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Tablet</a></li> <li><a class="dropdown-item" href="#">Smartphone</a></li> </ul> </div> </div> </div>
1.6 多个按钮组
按钮组可以一个个并列显示在同一行上：
<div class="container mt-3"> <h2>多个按钮组并排</h2> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">BMW</button> <button type="button" class="btn btn-primary">Mercedes</button> <button type="button" class="btn btn-primary">Volvo</button> </div> </div>
二、徽章
2.1 徽章特性
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .bg-secondary) 添加到 元素上即可。 徽章可以根据父元素的大小的变化而变化:
<div class="container mt-3"> <h2>徽章</h2> <h1>测试标题 <span class="badge bg-secondary">New</span></h1> <h2>测试标题 <span class="badge bg-secondary">New</span></h2> <h3>测试标题 <span class="badge bg-secondary">New</span></h3> <h4>测试标题 <span class="badge bg-secondary">New</span></h4> <h5>测试标题 <span class="badge bg-secondary">New</span></h5> <h6>测试标题 <span class="badge bg-secondary">New</span></h6> </div>
2.2 各种颜色类型的徽章
以下列出了所有颜色类型的徽章:
<div class="container mt-3"> <h2>各种颜色类型的徽章</h2> <span class="badge bg-primary">主要</span> <span class="badge bg-secondary">次要</span> <span class="badge bg-success">成功</span> <span class="badge bg-danger">危险</span> <span class="badge bg-warning">警告</span> <span class="badge bg-info">信息</span> <span class="badge bg-light">浅色</span> <span class="badge bg-dark">深色</span> </div>
2.3 药丸形状徽章
使用 .rounded-pill 类来设置药丸形状徽章:
<div class="container mt-3"> <h2>药丸形状徽章</h2> <span class="badge rounded-pill bg-default">默认</span> <span class="badge rounded-pill bg-primary">主要</span> <span class="badge rounded-pill bg-success">成功</span> <span class="badge rounded-pill bg-info">信息</span> <span class="badge rounded-pill bg-warning">警告</span> <span class="badge rounded-pill bg-danger">危险</span> </div>
2.4 徽章插入到元素内
以下实例将徽章嵌入到按钮内：
<div class="container mt-3"> <h2>徽章嵌入到按钮内</h2> <button type="button" class="btn btn-primary"> Messages <span class="badge bg-danger">4</span> </button> <button type="button" class="btn btn-danger"> Notifications <span class="badge bg-dark">7</span> </button> </div>
