• Bootstrap5 按钮组

    Bootstrap 5 中允许我们将按钮放在同一行上。

    可以在 <div> 元素上添加 .btn-group 类来创建按钮组。

    实例

    <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>

    尝试一下 »

    提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。

    实例

    <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>

    尝试一下 »

    垂直按钮组

    可以使用 .btn-group-vertical 类来创建垂直的按钮组：

    实例

    <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 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> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div> </div>

    尝试一下 »

    垂直按钮组及下拉菜单

    实例

    <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 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>

    尝试一下 »