前端學習-UI框架學習-Bootstrap5-010-按鈕組

ayubene發表於2024-03-29
前端UI框架boot

菜鳥教程連結

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>

相關文章