前端学习-UI框架学习-Bootstrap5-010-按钮组

菜鸟教程链接

btn-group按钮组

<template>
  <div class="container mt-3">
    <h2>加载按钮组</h2>
                                          
    <div class="btn-group">
      <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
      </button>

      <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
      </button>
      
      <button class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
      </button>
      
      <button class="btn btn-primary" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        Loading..
      </button>
    </div>
</div>
</template>

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

垂直按钮组

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

<template>
  <div class="container mt-3">
    <h2>加载按钮组-垂直</h2>
                                          
    <div class="btn-group-vertical">
      <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
      </button>

      <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
      </button>
      
      <button class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
      </button>
      
      <button class="btn btn-primary" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        Loading..
      </button>
    </div>
</div>
</template>

按钮组及下拉菜单

按钮横向纵向仅修改 btn-group  和 btn-group-vertical
方式1

<template>
  <div class="container mt-3">
    <h2>加载按钮组</h2>
                                          
    <div class="btn-group-vertical">
      <button type="button" class="btn btn-primary">app</button>
      <button type="button" class="btn btn-primary">xiaomi</button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">app</button>
        <div class="dropdown-menu">
          <ul>
            <li><a href="#" class="dropdown-item">item1</a></li>
            <li><a href="#" class="dropdown-item">item2</a></li>
            <li><a href="#" class="dropdown-item">item3</a></li>
          </ul>
        </div>
      </div>
      
    </div>
</div>
</template>

方式2

<template>
  <div class="container mt-3">
    <h2>加载按钮组</h2>
                                          
    <div class="btn-group-vertical">
      <button type="button" class="btn btn-primary">app</button>
      <button type="button" class="btn btn-primary">xiaomi</button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">app</button>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">item1</a>
          <a href="#" class="dropdown-item">item1</a>
          <a href="#" class="dropdown-item">item1</a>
        </div>
      </div>
      
    </div>
</div>
</template>

多个按钮组

<template>
  <div class="container mt-3">
    <h2>多个按钮组并排</h2>
      <div class="btn-group m-3">
          <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 m-3">
          <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>
</template>