Kumpulan Tombol Bootstrap 5

Kumpulan Tombol

Bootstrap 5 memungkinkan Anda menggabungkan sekumpulan tombol dalam kumpulan tombol (dalam baris satu):

Gunakan yang bersamaan dengan .btn-group kelas <div> elemen untuk membuat kumpulan tombol:

实例

<div class="btn-group">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <button type="button" class="btn btn-primary">小米</button>
</div>

亲自试一试

Petunjuk:Jangan gunakan ukuran tombol untuk setiap tombol di dalam kumpulan, tetapi gunakan kelas .btn-group-lg untuk kumpulan tombol besar atau untuk .btn-group-sm untuk kumpulan tombol kecil:

实例

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <button type="button" class="btn btn-primary">小米</button>
</div>

亲自试一试

垂直按钮组

Bootstrap 5 还支持垂直按钮组：

请使用类 .btn-group-vertical 创建垂直按钮组：

实例

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <button type="button" class="btn btn-primary">小米</button>
</div>

亲自试一试

并排按钮组

默认情况下，按钮组是 "inline" 的，存在多个按钮组时会并排显示：

实例

<div class="btn-group">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <button type="button" class="btn btn-primary">小米</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">吉利</button>
  <button type="button" class="btn btn-primary">长城</button>
  <button type="button" class="btn btn-primary">红旗</button>
</div>

亲自试一试

嵌套按钮组和下拉菜单

嵌套按钮组，可创建下拉菜单（您将在后面的章节中学习有关下拉菜单的更多内容）：

实例

<div class="btn-group">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">小米</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">手机</a>
      <a class="dropdown-item" href="#">平板电脑</a>
    </div>
  </div>
</div>

亲自试一试