如何使用下拉插件？

在本文中，我们将了解 Bootstrap 的下拉插件。这些是可切换的上下文覆盖，用于附加一些链接、选项等列表。 bootstrap Javascript 插件使其具有响应性和交互性，并且这些下拉菜单通过单击而不是悬停在其上进行切换。需要包含第三方popper.js库，使视口检测和动态定位成为可能。下面给出了下拉菜单必不可少的 CSS 和 Javascript 插件。

方法：

• 将子元素包装在 .dropdown 类中。
• 我们可以使用按钮或锚标记进行切换。对于切换，我们需要使用 .dropdown-toggle 类并将 data-bs-toggle=”dropdown” 元素添加到父类。
• 要制作下拉菜单项，请使用 .dropdown-menu 类。对每个项目名称使用 .dropdown-item 类。

第 1 步：在 HTML 部分中包含 Bootstrap CSS 以加载样式表。

添加 Bootstrap JavaScript 插件和依赖项。

第2步：我们可以直接复制官方Bootstrap文档中给出的Bootstrap starter模板。

第 3 步：在这一步中，我们将使用 bootstrap下拉类，如下所述：

• 将子元素包装在.dropdown类中。
• 我们可以使用按钮或锚标记进行切换。对于切换，我们需要使用.dropdown-toggle类并将data-bs-toggle=”dropdown”元素添加到父类。
• 为了制作下拉菜单，菜单项使用.dropdown-menu类。对每个项目名称使用.dropdown-item类。我们将利用上述方法并使用不同的案例制作下拉菜单。让我们一一讨论。

通过按钮的下拉菜单：我们可以从带有任何.btn类的按钮创建下拉菜单，并在标记中进行一些更改，例如添加data-bs-toggle=”dropdown”和aria-expanded=”false” ，如下所示。对于切换，我们需要使用.dropdown-toggle 。

示例 1：此示例说明了在 Bootstrap 中使用下拉类，其中使用了data-bs-toggle类，其值设置为下拉。

HTML

  

    
    
    
    
    
    
     

  

    GeeksforGeeks
    
        Course List
         Dropdown button 
       
        
            
                Algo
            
            
                DS
            
            
                HTML
            
            
                CSS
            
            
                JS
            
        
    
    

输出：

通过锚点 标记的下拉菜单：我们可以从具有任何.btn类的锚点 标记创建下拉菜单，并在标记中进行一些更改，例如添加data-bs-toggle=”dropdown ”和aria-expanded=”false”如下所示。对于切换，我们需要使用 .下拉切换。

示例 2：本示例说明了在 Bootstrap 中使用锚标记制作下拉菜单。

HTML

    
    
    
    
     

  

    GeeksforGeeks
    
        Dropdown using Anchor tag 
        
        Dropdown Link
      
        
            
                Algo
            
            
                DS
            
            
                HTML
            
            
                CSS
            
            
                JS
            
        
    
    
    

输出：

下拉菜单中的颜色变体：我们可以通过使用可用于按钮的 Bootstrap 类来制作各种颜色的下拉按钮，例如蓝色的.btn-primary 、红色的 .btn-danger 、 .btn-secondary 对于灰色， 等等。

示例 3：我们使用 Bootstrap 中的按钮类来制作具有颜色变体的按钮。在这里，这个例子说明了 Bootstrap 的主要和成功类。我们可以以类似的方式使用剩余的类。

HTML

      
    
    
    
                     
    
     

  

    GeeksforGeeks
    
        Dropdown Color Variant
         GFG Primary
       
        
            
                Algo 
            
            
                DS 
            
            
                HTML 
            
            
                CSS 
            
            
                JS 
            
        
         GFG Success
        
        
            
                Algo 
            
            
                DS 
            
            
                HTML 
            
            
                CSS 
            
            
                JS 
            
        
    
    
    

输出：

带有按钮的拆分下拉菜单：我们可以通过添加一个带有 . dropdown-toggle-split类，用于在下拉插入符号周围放置适当的空间。

示例 4：此示例说明了 Bootstrap 中的拆分下拉按钮。

HTML

      
    
    
    
                     
    
     

  

    GeeksforGeeks
    Split Dropdown
    
        Split Dropdown
        
        
        
        
            
                Algo
            
            
                DS
            
            
                HTML
            
            
                CSS
            
            
                JS
            
        
    
    
    

输出：

下拉菜单中的表单：在以下示例中，我们通过将表单包装在.下拉菜单类。要了解有关引导表单的更多信息，请阅读引导表单文章。同样，我们可以在.dropdown-menu类中放入任何内容，使其出现在下拉菜单中。

示例 5：此示例显示了 Bootstrap 下拉菜单中的表单。

HTML

      
    
    
    
                     
    
    

  

    GeeksforGeeks
    Form in the Dropdown menu
    
         GFG Primary
        
        
            
                
                     Username 
                    
                
                
                     Password 
                    
                
                 Sign in
                
            
        
    
    
    

输出：

带有深色主题的导航栏中的下拉菜单：我们绝对可以更改下拉菜单的主题以使其与导航栏背景相匹配。为此，我们将.dropdown-menu-dark类添加到现有的 .下拉菜单。除此之外，不需要对下拉项进行其他更改。

示例 6：在此示例中，我们在 Bootstrap 的导航栏中制作了深色主题下拉菜单。

HTML

      
    
    
    
  
    
    
    GeeksforGeeks

  

    
         
            GeeksforGeeks
             
              
            
            
                
                    
                        
                Dropdown
              
                
                    Food 
                    
                     Swimming 
                    
                     Flight 
                    
                        
                    
                
            
        
    
    
    

输出：