布尔玛下拉内容

Bulma 是一个基于 flexbox 的组件丰富、现代且轻量级的 CSS 框架。它有助于更轻松、更快地构建美观且响应迅速的 Web 界面。在本文中，我们将了解在 Bulma 的下拉组件中可以使用哪些类型的内容。

因此， 标签可以直接用作下拉项，但我们也可以使用

元素作为下拉项，并用我们喜欢的任何内容填充 div 元素。例如段落、链接、按钮等。

布尔玛下拉内容类：

• dropdown-item：此类表示下拉列表中的单个项目。它可以是标记或
  元素。
• dropdown-divider：这个类用于制作一条称为分隔线的水平线，以根据需要分隔下拉项目。

句法：

    

        ...
    
    

    ...

示例：下面的示例显示了我们如何使用 和

元素作为下拉项。

HTML

  

    Bulma Dropdown Content
    
    
  
    
        .container{
            margin-top: 30px;
        }
    

  

    GeeksforGeeks
    Bulma Dropdown Content
    
        
            
                
                    Dropdown
                    
                        
                    
                
            
            
                
                    
                    
                        This is a paragraph inside a 
                              div element.
                          
                    
                    
                    
                    
                    
                        
                          GeeksforGeeks
                        
                    
                    
                    
                    
                        
                          Go to Home Page.
                       
                
            
        
    
  
  
    
    
        var triggers = 
            document.querySelectorAll(".dropdown .dropdown-trigger");
  
        triggers.forEach(function (trigger) {
            var isopen = false;
            trigger.addEventListener('click', function(){
                if(isopen){
                    trigger.parentElement.classList.remove("is-active");
                    isopen = false;
                }else{
                    trigger.parentElement.classList.add("is-active");
                    isopen = true;
                }
            })
        });
    

  

---

输出：

参考： https://bulma.io/documentation/components/dropdown/#dropdown-content