Bootstrap 4 - 按鈕組

上頁
下一頁

說明

按鈕組允許在單行上將多個按鈕堆疊在一起。

基本按鈕組

您可以透過在 <div> 元素內部使用 .btn-group 類來建立基本按鈕組，如下例所示 −

示例

現場演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Button Group</h2>
         <div class = "btn-group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果 −

輸出

按鈕工具欄

您可以透過使用 .btn-toolbar 類將成組的按鈕組組合成單個工具欄，如下例所示 −

示例

現場演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Button Toolbar</h2>
         <div class = "btn-toolbar" role = "toolbar" aria-label = "Toolbar with button groups">
            <div class = "btn-group mr-2" role = "group" aria-label = "First group">
               <button type = "button" class =" btn btn-info">Cricket</button>
               <button type = "button" class = "btn btn-info">Football</button>
               <button type = "button" class = "btn btn-info">Hockey</button>
               <button type = "button" class = "btn btn-info">Tennis</button>
            </div>
            
            <div class = "btn-group mr-2" role = "group" aria-label = "Second group">
               <button type = "button" class = "btn btn-info">Basketball</button>
               <button type = "button" class = "btn btn-info">Volleyball</button>
               <button type = "button" class = "btn btn-info">Boxing</button>
            </div>
            
            <div class = "btn-group mr-2" role = "group" aria-label = "Third group">
               <button type = "button" class = "btn btn-info">Archery</button>
               <button type = "button" class = "btn btn-info">Badminton</button>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果 −

輸出

按鈕組大小

您可以透過向 .button-group 類新增 .btn-group-sm 或 .btn-group-lg 類來控制按鈕組的大小，如下例所示 −

示例

現場演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Button Group Sizes</h2>
         <div class = "btn-group btn-group-lg" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
         <br>
         <br>
         
         <div class = "btn-group" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
         <br>
         <br>
         
         <div class = "btn-group btn-group-sm" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果 −

輸出

垂直按鈕組

您可以透過使用類 .btn-group-vertical 來垂直顯示按鈕組，如下例所示 −

示例

現場演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Vertical Button Group</h2>
         <div class = "btn-group-vertical" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果 −

輸出

巢狀按鈕組

當您想在一系列按鈕中顯示下拉選單時，可以將一個 .btn-group 放置在另一個 .btn-group 中。

以下示例演示了按鈕組的巢狀 −

示例

現場演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Nesting Button Group</h2>
         <div class = "btn-group" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
            <div class = "btn-group" role = "group">
               <button id = "nestingbtngroup" type = "button" class = "btn btn-info 
                  dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true" 
                  aria-expanded = "false">
                  
                  Sports
               </button>
               
               <div class = "dropdown-menu" aria-labelledby = "nestingbtngroup">
                  <a class = "dropdown-item" href = "#">Cricket</a>
                  <a class = "dropdown-item" href = "#">Football</a>
                  <a class = "dropdown-item" href = "#">Hockey</a>
               </div>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果 −

輸出

bootstrap4_components.htm
列印頁面
上頁
下一頁
廣告
© . All rights reserved.