布尔玛 |落下

Bulma是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度敏感的。它使用类来实现其设计。

下拉组件是下拉按钮和下拉菜单的容器。使用下拉菜单及其子类，可以实现交互式下拉菜单。下拉组件包括几个可以添加来设计内容的其他组件。下面列出了这些组件：

• dropdown-trigger：它是下拉按钮的容器。
• dropdown-menu：它是可切换菜单的容器。默认情况下它是隐藏的。
  • dropdown-content：是下拉框。它有带阴影的白色背景。
    • dropdown-item：代表下拉菜单的每一项。
    • dropdown-divider：它是两个项目之间的水平线分隔符。

示例 1：此示例显示了使用 Bulma 创建一个简单的下拉列表。

html

  

  Bulma Dropdown
  
  
  
  
  
  
    div.columns {
      margin-top: 80px;
    }
  

  

  
  
  
  
  
    
      
        
          
            
              Todos
              
                
              
            
          
  
          
            
              
                Design a custom database to
                store your daily activity
              
  
              
                Take pictures of beautiful flowers
              
  
              
                Ride to a horse and 
                write your experience
              
  
              
                Go for a trip with bike
              
  
              
                Design a custom database to 
                store your daily activity
              
  
              
                Buy a sumsung headset
              
  
              
                Listen music for one hour
              
  
              
                Go for a morning walk
              
            
          
        
      
    
  
  
  
    const dropdown =
          document.querySelector('.dropdown');
    const active =
          document.querySelector('.is-active')
    document.body.addEventListener('click', function () {
      if (active) {
        dropdown.classList.remove('is-active')
      }
    })
    dropdown.addEventListener('click', function (event) {
      event.stopPropagation();
      this.classList.toggle('is-active');
    });
  

输出：

示例 2：此示例显示了使用 Bulma 创建可悬停的下拉列表。

html

  

  Bulma Dropdown
  
  
  
  
  
  
  
  
  
  
    div.columns {
      margin-top: 80px;
    }
  

  

  
    
      
        
          
            
              Todos
              
                
              
            
          
  
          
            
              
                Design a custom database to store 
                your daily activity
              
  
              
                Take pictures of beautiful
                flowers
              
  
              
                Ride to a horse and write
                your experience
              
  
              
                Go for a trip with bike
              
  
              
                Design a custom database 
                to store your daily activity
              
  
              
                Buy a sumsung headset
              
  
              
                Listen music for one hour
              
  
              
                Go for a morning walk
              
            
          
        
      
    
  

输出：

示例 3：此示例显示使用 Bulma 创建不同的对齐下拉列表。

html

  

  Bulma Dropdown
  
  
  
  
  
  
  
  
  
  
    div.columns {
      margin-top: 80px;
    }
  

  

  
    
      
        
          
            
              Left Aligned Todos
              
                
              
            
          
  
          
            
              
                Design a custom database
                to store your daily activity
              
  
              
                Take pictures of beautiful
                flowers
              
  
              
                Ride to a horse and write
                your experience
              
  
              
                Go for a trip with bike
              
  
              
                Design a custom database 
                to store your daily activity
              
  
              
                Buy a sumsung headset
              
  
              
                Listen music for one hour
              
  
              
                Go for a morning walk
              
            
          
        
      
  
      
        
          
            
              Right Aligned Todos
              
                
              
            
          
  
          
            
              
                Design a custom database 
                to store your daily activity
              
  
              
                Take pictures of beautiful
                flowers
              
  
              
                Ride to a horse and write
                your experience
              
  
              
                Go for a trip with bike
              
  
              
                Design a custom database 
                to store your daily activity
              
  
              
                Buy a sumsung headset
              
  
              
                Listen music for one hour
              
  
              
                Go for a morning walk
              
            
          
        
      
    
  

输出：

示例 4：此示例显示了使用 Bulma 创建“dropup”。

html

  

  Bulma Dropdown
  
  
  
  
  
  
  
  
  
  
    div.columns {
      margin-top: 330px;
    }
  

  

  
    
      
        
          
            
              Left Aligned Todos
              
                
              
            
          
  
          
            
              
                Design a custom database
                to store your daily activity
              
  
              
                Take pictures of beautiful 
                flowers
              
  
              
                Ride to a horse and write
                your experience
              
  
              
                Go for a trip with bike
              
  
              
                Design a custom database 
                to store your daily activity
              
  
              
                Buy a sumsung headset
              
  
              
                Listen music for one hour
              
  
              
                Go for a morning walk
              
            
          
        
      
    
  

输出：