语义 UI 侧边栏类型

Semantic UI是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。它使用一个类将 CSS 添加到元素中。

除非需要，否则边栏是向用户隐藏其他内容的好方法。 Semantic UI 为我们提供了一个样式化的侧边栏。在进入侧边栏类型之前，让我们看一下各种侧边栏类型类。

语义 UI 侧边栏类型：

• 侧边栏：用于创建侧边栏。

句法：

    ...

注意：侧边栏可用于任何类型的内容，但主要用于反向垂直菜单。请按照以下示例进行理解。

示例 1：在下面的示例中，我们使用侧边栏垂直菜单类创建了一个标准菜单侧边栏。

HTML

  

    Semantic UI Sidebar Types
    
  
    
    
    
    

  

    
        Web Development
        Machine Learning
        Data Science
        Blockchain
    
    
        GeeksforGeeks
        Semantic UI Sidebar Types
        
        
        
          Toggle Sidebar
        
    
  
    
        const toggle = () => $('.ui.sidebar').sidebar('toggle');
    

输出：

语义 UI 侧边栏类型

示例 2：在下面的示例中，我们使用侧边栏反向垂直菜单类创建了一个反向侧边栏。

HTML

  

    Semantic UI Sidebar Types
    
    
    
  
    
    

  

    
        Web Development
        Machine Learning
        Data Science
        Blockchain
      
    
        GeeksforGeeks
        Semantic UI Sidebar Types
        
        
        
          Toggle Sidebar
        
    
  
    
        const toggle = () => $('.ui.sidebar').sidebar('toggle');
    

输出：

语义 UI 侧边栏类型

参考资料： https://semantic-ui.com/modules/sidebar.html