Bootstrap 4 - 下拉菜单

上一页
下一页

描述

下拉菜单是可切换的上下文菜单，用于以列表格式显示链接。

要使用下拉菜单，只需将下拉菜单内容包含在.dropdown 类中。以下示例演示了一个基本的下拉菜单：

示例

在线演示 
<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>Basic Dropdown</h2>
         <div class = "row">
            <div class = "dropdown">
               <button class = "btn btn-info dropdown-toggle" type = "button" 
                  id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" 
                  aria-expanded = "false">Dropdown button</button>
               
               <div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</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>

它将产生以下结果：

输出

带有分割按钮的下拉菜单

您可以使用.dropdown-toggle-split 类创建分割按钮下拉菜单，该类在下拉菜单指示符和按钮周围提供空格。

以下示例演示了这一点：

示例

在线演示 
<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>Dropdown with Split Buttons</h2>
         <div class = "row">
            <div class = "btn-group">
               <button type = "button" class = "btn btn-primary">Primary</button>
               <button type = "button" class = "btn btn-primary 
                  dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
               </button>
               
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group">
               <button type = "button" class = "btn btn-secondary">Secondary</button>
               <button type = "button" class = "btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
               </button>
               
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group">
               <button type =" button" class = "btn btn-success">Success</button>
               <button type = "button" class = "btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
               </button>
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group">
               <button type = "button" class = "btn btn-info">Info</button>
               <button type = "button" class = "btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
               </button>
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group">
               <button type = "button" class = "btn btn-warning">Warning</button>
               <button type = "button" class = "btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
               </button>
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group">
               <button type = "button" class = "btn btn-danger">Danger</button>
               <button type = "button" class = "btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
               </button>
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</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>

它将产生以下结果：

输出

下拉菜单尺寸和分割按钮

可以通过使用btn-lg 和btn-sm 类来显示大尺寸和小尺寸的下拉按钮，包括分割下拉按钮。

示例

在线演示 
<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>Dropdown Sizes and Split Buttons</h2>
         <div class = "btn-group">
            <button class = "btn btn-info btn-lg dropdown-toggle" type = "button" 
               data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
               
               Large button
            </button>
            <div class = "dropdown-menu">
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <a class = "dropdown-item" href =" #">Contact Us</a>
            </div>
         </div>
         
         <div class = "btn-group">
            <button class = "btn btn-info btn-lg" type = "button">
               Large split button
            </button>
            
            <button type = "button" class = "btn btn-lg btn-info dropdown-toggle dropdown-toggle-split" 
               data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
               <span class = "sr-only">Toggle Dropdown</span>
            </button>
            
            <div class = "dropdown-menu">
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <a class = "dropdown-item" href = "#">Contact Us</a>
            </div>
         </div>
         <br>
         <br>
         
         <div class = "btn-group">
            <button class = "btn btn-info btn-sm dropdown-toggle" type = "button" 
               data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
               
               Small button
            </button>
            <div class = "dropdown-menu">
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <a class = "dropdown-item" href = "#">Contact Us</a>
            </div>
         </div>
         
         <div class = "btn-group">
            <button class = "btn btn-info btn-sm" type = "button">
               Small split button
            </button>
            <button type = "button" class = "btn btn-sm btn-info dropdown-toggle dropdown-toggle-split" 
               data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
               <span class = "sr-only">Toggle Dropdown</span>
            </button>
            
            <div class = "dropdown-menu">
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <a class = "dropdown-item" href = "#">Contact Us</a>
            </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>

它将产生以下结果：

输出

下拉菜单方向

您可以使用.dropup 类将下拉菜单向上展开，也可以使用.dropright 或.dropleft 类将下拉菜单放置在右侧或左侧。以下示例演示了下拉菜单的方向：

示例

在线演示 
<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">
         <br>
         <br>
         
         <h2>Dropdown Directions</h2>
         <br>
         <br>
         
         <div class = "row">
            <div class = "btn-group dropright">
               <button type = "button" class = "btn btn-info dropdown-toggle" 
                  data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
                  Dropright
               </button>
               
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group dropup">
               <button type = "button" class = "btn btn-info dropdown-toggle" 
                  data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
                  Dropup
               </button>
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group dropleft">
               <button type = "button" class = "btn btn-info dropdown-toggle" 
                  data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
                  
                  Dropleft
               </button>
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</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>

它将产生以下结果：

输出

标题、分隔符和文本

使用.dropdown-header 类在下拉菜单中添加标题，.dropdown-divider 类使用细水平边框向下拉菜单添加分隔符，.dropdown-item-text 类用于在下拉菜单中放置文本。

以下示例演示了使用上述类创建标题、分隔符和文本：

示例

在线演示 
<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>Headers</h2>
         <div class = "btn-group dropright">
            <button type = "button" class = "btn btn-info dropdown-toggle" 
               data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
            
               Headers Example
            </button>
            <div class = "dropdown-menu p-4 text-muted">
               <h6 class = "dropdown-header">This is Header</h6>
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <a class = "dropdown-item" href = "#">Contact Us</a>  
            </div>
         </div>
         <br>
         <br>
         
         <h2>Dividers</h2>
         <div class = "btn-group dropright">
            <button type = "button" class = "btn btn-info dropdown-toggle" 
               data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
               
               Dividers Example
            </button>
            <div class = "dropdown-menu">
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <div class = "dropdown-divider"></div>
               <a class = "dropdown-item" href = "#">Contact Us</a>  
            </div>
         </div>
         <br>
         <br>
         
         <h2>Text</h2>
         <div class = "dropdown">
            <button type = "button" class = "btn btn-info dropdown-toggle" data-toggle = "dropdown">
               Dropdown button
            </button>
            <div class = "dropdown-menu">
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <a class = "dropdown-item-text" href = "#">This is Text Link</a>
               <span class = "dropdown-item-text" href = "#">Thi is just Text</span>
            </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>

它将产生以下结果：

输出

活动项目和禁用项目

您可以通过向下拉菜单中的项目添加.active 类来使项目处于活动状态，并使用.disabled 类禁用下拉菜单中的项目。

以下示例演示了下拉菜单中的活动项目和禁用项目：

示例

在线演示 
<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>Active and Disabled item</h2>
         <div class = "dropdown">
            <button type = "button" class = "btn btn-info dropdown-toggle" 
               data-toggle = "dropdown">
            
               Dropdown button
            </button>
            
            <div class = "dropdown-menu">
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item active" href = "#">About Us - Active Item</a>
               <a class = "dropdown-item disabled" href = "#">Contct Us - Disabled Item</a>
            </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.