📜  引导程序4 |下拉菜单

📅  最后修改于: 2021-05-25 18:03:08             🧑  作者: Mango

下拉菜单是交互式网站最重要的部分之一。下拉菜单是菜单项的集合,允许用户从列表中选择一个值。 .dropdown类用于设计下拉菜单。

例子:

 
 
 
    Dropdowns 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
      
    
                   

            GeeksforGeeks         

                     

Dropdown List

                    
                         

输出:

下拉分隔线:.dropdown-divider类用于通过使用细水平线划分下拉菜单列表。

例子:

 
 
 
    Dropdowns 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
      
    
                   

            GeeksforGeeks         

                     

Dropdown Divider List

                    
                         

输出:

下拉标题: .dropdown-header类用于在下拉列表中添加标题部分。

例子:

 
 
 
    Dropdowns List 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
      
    
                   

            GeeksforGeeks         

                     

Dropdown Header List

                    
                         

输出:

禁用和活动项目: .active类用于添加突出显示列表项。 .disableed类用于禁用项目列表。

例子:

 
 
 
    Dropdowns List 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
      
    
                   

            GeeksforGeeks         

                     

Dropdown Disable and Active items List

                    
                         

输出:

下拉位置: .dropright.dropleft类用于设置下拉列表在左侧和右侧的位置。

范例1:

 
 
 
    Dropdowns List 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
      
    
                   

            GeeksforGeeks         

                     

Dropdown Right items List

                    
                         

输出:

范例2:

 
 
 
    Dropdowns List 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
      
    
                   

            GeeksforGeeks         

                     

Dropdown Left items List

                    
                         

输出:

下拉菜单右对齐: .dropdown-menu-right类用于设置下拉菜单的右对齐。

例子:

 
 
 
    Dropdowns List 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
      
    
                   

            GeeksforGeeks         

                     

Dropdown Menu Right Aligned

                    
                         

输出:

Dropup:使用.dropup类而不是.dropdown类来以向上字扩展菜单列表。

例子:

 
 
 
    Dropdowns List 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
      
    



           
                   

            GeeksforGeeks         

                     

Dropup List

               
                                                            
    
                         

输出:

下拉文本: .dropdown-item-text类用于在下拉菜单列表中添加纯文本。

例子:

 
 
 
    Dropdowns List 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
      
    
                   

            GeeksforGeeks         

                     

Dropdown Text

                    
                         

输出:

带下拉菜单的分组按钮: .btn-group类用于创建按钮组,而.dropdown-menu类用于创建下拉列表。

例子:

 
 
 
    Dropdowns List 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
      
    
                   

            GeeksforGeeks         

                     

Grouped Buttons with a Dropdown

                   
                                                                                   
                                                                                
        
    
                         

输出:

拆分按钮下拉菜单:.dropdown-toggle-split类用于拆分下拉按钮。

例子:

 
 
 
    Dropdowns List 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
      
    
                   

            GeeksforGeeks         

                     

Split Button Dropdown List

                   
                                                                             
                       
                                                                             
                   
                                                                             
    
                         

输出:

垂直按钮组下拉列表: .btn-group-vertical类用于创建带有下拉列表的垂直按钮组。

例子:

 
 
 
    Dropdowns List 
      
    
    
  
    
      
    
      
    
      
    
 
  
 
      
    
                   

            GeeksforGeeks         

                     

Vertical Button Group Dropdown List

                   
            
                                                                                                     
                               
                                                                                                     
        
    
                         

输出: