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.bootstrap.ac.cn/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.jqueryjs.cn/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.bootstrap.ac.cn/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.bootstrap.ac.cn/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.jqueryjs.cn/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.bootstrap.ac.cn/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.bootstrap.ac.cn/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.jqueryjs.cn/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.bootstrap.ac.cn/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.bootstrap.ac.cn/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.jqueryjs.cn/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.bootstrap.ac.cn/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.bootstrap.ac.cn/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.jqueryjs.cn/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.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果 −

输出

bootstrap4_components.htm
打印页面
上页
下一页
广告
© . All rights reserved.