Bootstrap - 按鈕組

本章將討論 Bootstrap 按鈕組。Bootstrap 按鈕組將多個按鈕水平或垂直地放在一行。

基本示例

您可以使用.btn類在.btn-group類中建立一個按鈕組。

示例

您可以使用編輯和執行選項編輯和執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Button Groups</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="btn-group" role="group" aria-label="Basic Example">
        <button type="button" class="btn btn-info">Register</button>
        <button type="button" class="btn btn-danger">Submit</button>
        <button type="button" class="btn btn-warning">Cancel</button>
      </div>
    </body>
    </html>

為了確保輔助技術（如螢幕閱讀器）的可訪問性，務必使用適當的 role 屬性併為按鈕組提供明確的標籤。您可以為按鈕組使用role="group"，或為按鈕工具欄使用role="toolbar"。要為其新增標籤，可以使用aria-label或aria-labelledby。

作為.nav導航元件的替代方案，這些類也可以應用於連結組。
您可以使用.active類突出顯示連結。

示例

您可以使用編輯和執行選項編輯和執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Button Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="btn-group my-2">
      <a href="#" class="btn btn-success active" aria-current="page">Registration Link</a>
      <a href="#" class="btn btn-success">Submit</a>
      <a href="#" class="btn btn-success">Cancel</a>
    </div>
  </body>
  </html>

混合樣式

對於按鈕組混合樣式，可以建立一個按鈕組，其中每個按鈕都有不同的背景顏色。

示例

您可以使用編輯和執行選項編輯和執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Button Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="btn-group mt-2" role="group" aria-label="Mixed styles">
      <button type="button" class="btn btn-info">Register</button>
      <button type="button" class="btn btn-success">Cancel</button>
      <button type="button" class="btn btn-warning">Submit</button>
    </div>
  </body>
  </html>

輪廓樣式

使用按鈕樣式，例如btn-outline-primary、btn-outline-dark等，僅顯示組中按鈕元素邊框的顏色。

示例

您可以使用編輯和執行選項編輯和執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Button Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="btn-group my-2" role="group" aria-label="Basic outlined">
      <button type="button" class="btn btn-outline-primary">Register</button>
      <button type="button" class="btn btn-outline-dark">Submit</button>
      <button type="button" class="btn btn-outline-warning">Cancel</button>
    </div>
  </body>
  </html>

複選框和單選按鈕組

使用類似複選框的按鈕切換按鈕，我們可以建立一個外觀無縫的按鈕組。為此，請使用.btn-check類和type="checkbox"。

示例

您可以使用編輯和執行選項編輯和執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Button Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="btn-group my-2" role="group" aria-label="checkbox toggle button group">
      <input type="checkbox" class="btn-check" id="btnCheckbox1" autocomplete="off">
      <label class="btn btn-outline-primary" for="btnCheckbox1">Register</label>
    
      <input type="checkbox" class="btn-check" id="btnCheckbox2" autocomplete="off">
      <label class="btn btn-outline-warning" for="btnCheckbox2">Submit</label>
    
      <input type="checkbox" class="btn-check" id="btnCheckbox3" autocomplete="off">
      <label class="btn btn-outline-info" for="btnCheckbox3">Cancel</label>
    </div>
  </body>
  </html>

使用類似單選按鈕的按鈕切換按鈕，我們可以建立一個外觀無縫的按鈕組。為此，請使用.btn-check類和type="radio"。

示例

您可以使用編輯和執行選項編輯和執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Button Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="btn-group" role="group" aria-label="radio toggle button group">
      <input type="radio" class="btn-check" name="radioButton" id="buttonRadio1" autocomplete="off" checked>
      <label class="btn btn-outline-primary" for="buttonRadio1">Register</label>
    
      <input type="radio" class="btn-check" name="radioButton" id="buttonRadio2" autocomplete="off">
      <label class="btn btn-outline-warning" for="buttonRadio2">Submit</label>
    
      <input type="radio" class="btn-check" name="radioButton" id="buttonRadio3" autocomplete="off">
      <label class="btn btn-outline-success" for="buttonRadio3">Cancel</label>
    </div>
  </body>
  </html>

按鈕工具欄

按鈕工具欄可以透過組合多個按鈕組來建立。使用實用工具類在組、按鈕等之間新增空格。

示例

您可以使用編輯和執行選項編輯和執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Button Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="btn-toolbar mt-2" role="toolbar" aria-label="Toolbar button groups">
      <div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup1">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
      </div>
      <div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup2">
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-dark">Dark</button>
   
      </div>
      <div class="btn-group" role="group" aria-label="toolbarButtonGroup3">
        <button type="button" class="btn btn-warning">Warning</button>
      </div>
    </div>
  </body>
  </html>

組合輸入組和按鈕組到工具欄中。使用實用工具類適當調整間距。

示例

您可以使用編輯和執行選項編輯和執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Button Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="btn-toolbar mb-3" role="toolbar" aria-label="toolbarButtonGroup1">
      <div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup2">
        <button type="button" class="btn btn-outline-primary">Primary</button>
        <button type="button" class="btn btn-outline-info">Info</button>
        <button type="button" class="btn btn-outline-secondary">secondary</button>
      </div>
      <div class="input-group">
        <div class="input-group-text" id="inputbtnGroup1">@</div>
        <input type="text" class="form-control" placeholder="Username" aria-label="toolbarButtonGroup3" aria-describedby="inputButtonGroup1">
      </div>
    </div>
  
    <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="toolbarButtonGroup4">
      <div class="btn-group" role="group" aria-label="toolbarButtonGroup1">
        <button type="button" class="btn btn-outline-warning">Warning</button>
        <button type="button" class="btn btn-outline-success">Success</button>
      </div>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="tutorialspoint" aria-label="toolbarButtonGroup5" aria-describedby="inputButtonGroup2">
        <div class="input-group-text" id="inputbtnGroup2">@example.com</div>
      </div>
    </div>
  </body>
  </html>

大小

巢狀多個組時，請在每個.btn-group上使用.btn-group-*，而不是為每個按鈕使用按鈕大小類。

示例

您可以使用編輯和執行選項編輯和執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Button Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h6 class="mt-4">Default size button group</h6>
    <div class="btn-group" role="group" aria-label="Default size button group">
      <button type="button" class="btn btn-outline-dark">Dark</button>
      <button type="button" class="btn btn-outline-warning">Warning</button>
    </div>
  
    <h6 class="mt-4">Small size button group</h6>
    <div class="btn-group btn-group-sm" role="group" aria-label="Small size button group">
      <button type="button" class="btn btn-outline-secondary">Secondary</button>
      <button type="button" class="btn btn-outline-success">Success</button>
    </div>
   
    <h6 class="mt-4">Large size button group</h6>
    <div class="btn-group btn-group-lg" role="group" aria-label="Large size button group">
      <button type="button" class="btn btn-outline-primary">Primary</button>
      <button type="button" class="btn btn-outline-info">Info</button>
    </div>
  
  </body>
  </html>

巢狀

要將下拉選單與按鈕序列混合使用，請在一個.btn-group中使用另一個.btn-group。

示例

您可以使用編輯和執行選項編輯和執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Button Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="btn-group mt-2" role="group" aria-label="Nested dropdown">
      <button type="button" class="btn btn-primary">Submit</button>
      <button type="button" class="btn btn-warning">Cancel</button>
    
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Languages
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">English</a></li>
          <li><a class="dropdown-item" href="#">Hindi</a></li>
        </ul>
      </div>
    </div>
  </body>
  </html>

垂直排列

要建立垂直堆疊的按鈕組，請使用.btn-group-vertical類。在這種情況下，Bootstrap 不支援分割按鈕下拉選單。

示例

您可以使用編輯和執行選項編輯和執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Button Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="btn-group-vertical mt-2" role="group" aria-label="Button group with verical variation">
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-info">Info</button>
    </div>
  </body>
  </html>

建立帶有下拉選單的垂直按鈕組。

示例

您可以使用編輯和執行選項編輯和執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Button Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="btn-group-vertical mt-2" role="group" aria-label="Vertical button group">
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-info">Secondary</button>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Languages
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">English</a></li>
          <li><a class="dropdown-item" href="#">French</a></li>
        </ul>
      </div>
      <button type="button" class="btn btn-success">Success</button>
      </div>
    </div>
  </body>
  </html>

建立帶有單選按鈕的垂直按鈕組。

示例

您可以使用編輯和執行選項編輯和執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Button Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="btn-group-vertical mt-2" role="group" aria-label="Vertical button group with radio">
      <input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton1" autocomplete="off" >
      <label class="btn btn-outline-warning" for="verticalRadioButton1">Unchecked Radio Button</label>
      <input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton2" autocomplete="off" checked>
      <label class="btn btn-outline-warning" for="verticalRadioButton2">checked Radio Button</label>
      <input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton3" autocomplete="off">
      <label class="btn btn-outline-warning" for="verticalRadioButton3">Unchecked Radio Button</label>
    </div>
  </body>
  </html>

列印頁面