语义 UI 段变化

Semantic UI是一个现代框架，用于为网站开发无缝设计。它为用户提供了轻量级的组件体验。它使用预定义的 CSS 和 jQuery 来整合不同的框架。

Semantic UI Segment是一个segment，是一个容器，用来放置相同类型或相同类别的内容。它用于对相关项目进行分组。

语义 UI 段变化：

• 反转：这用于反转段的颜色以创建对比度。
• 附加：这用于将段附加到任何页面上的其他内容。
• Padded ：这用于为段提供填充。
• 紧凑：这用于生成覆盖所需空间的段。
• Colored ：这用于为段着色。
• 强调：这用于使片段或多或少地被强调。
• Circular ：用于制作圆形线段。
• 清除：用于清除段的浮动。
• 浮动：这用于将段对齐到段的左侧或右侧。
• 文本对齐：这用于在任一侧或中心对齐段的文本。
• Basic ：这用于创建除了填充之外没有特殊格式的段。

句法：

   .......

示例 1：下面是演示使用 Segment Variation倒置类的代码。

HTML

  

  
  

  

  
    

      GeeksforGeeks
    
  
    

        Semantic-UI Segment Variation
    
  
  
  

      
GeeksforGeeks is a computer science portal.
  
  

  

输出：

语义 UI 段变化

示例 2：下面是演示使用 Segment Variation附加类的代码。

HTML

  

  
  

  

  
    

        GeeksforGeeks
    
  
    

        Semantic-UI Segment Variation
    
  
  

    
Topmost attached segment
  
  

    
Both sides attached segment
  
  
  

    
Bottommost attached segment
  

  

输出：

语义 UI 段变化

示例 3：下面是演示使用 Segment Variation填充类的代码。

HTML

  
  

  

  
    

      GeeksforGeeks
    
  
    

        Semantic-UI Segment Variation
    
  
  

    
GeeksforGeeks is a Computer Science portal!
  
  
  

    
GeeksforGeeks is a Computer Science portal!
  

输出：

语义 UI 段变化

示例 4：下面是演示 Segment Variation紧凑类的使用的代码。

HTML

  

  
  

  

  
    

      GeeksforGeeks
    
  
    

        Semantic-UI Segment Variation
    
  
  

    

      
GeeksforGeeks
    
    

      
It is a Computer Science Portal!
    
  

输出：

语义 UI 段变化

示例 5：下面是演示使用 Segment Variation彩色类的代码。

HTML

  

    Semantic-UI Segment Variations  
    
    
    
    
    

  

    
        Geeksforgeeks
        
            Semantic-UI Segment Color Variations
        
        
        
        
            
              Violet
            
            
              Purple
            
            
              Pink
            
            
              Brown
            
            
              Black
            
        
    
  

  

输出：

语义 UI 段变化

示例 6：下面是演示使用 Segment Variation强调类的代码。

HTML

  

  
  
  

  

  
    

      GeeksforGeeks
    
  
    

      Semantic-UI Segment Variation
    
  
  

    
GeeksforGeeks.
  
    
  

    
It is a Computer Science Portal
  
    
  

    
For all Geeks and professionals!
  

  

输出：

语义 UI 段变化

示例 7：下面是演示使用 Segment Variation循环类的代码。

HTML

  

  
  
  
  

  

  
    

      GeeksforGeeks
    
  
    

      Semantic-UI Segment Variation
    
  
  
  

      

        Complete Interview Preparation
      
Rs 5000/-
    
  
    
  

    

      DSA-Self Paced
    
Rs 3000/-
  


  

输出：

语义 UI 段变化

示例 8：下面是演示使用 Segment Variation清除类的代码。

HTML

  

  
  
  


  
    

      GeeksforGeeks
    
    

      Semantic-UI Segment Variation
    
  
  

    

      Floated
    
  

  

输出：

语义 UI 段变化

示例 9：下面是演示使用 Segment Variation浮动类的代码。

HTML

  

  
  

  

  
    

      GeeksforGeeks
    
  
    

        Semantic-UI Segment Variation
    
  
  

    

      Left Segment
    
  
  
  

    Right Segment
  

输出：

语义 UI 段变化

示例 10：下面是演示使用 Segment Variation文本对齐类的代码。

HTML

  

  
  

  

  
    

      GeeksforGeeks
    
  
    

        Semantic-UI Segment Variation
    
  
  

    Left-GeeksforGeeks
  
  
  

    Center-GeeksforGeeks
  
  
  

    Right-GeeksforGeeks
  

  

输出：

语义 UI 段变化

示例 11：下面是演示 Segment Variation基本类的使用的代码。

HTML

    
    
    
    
    

  

    
        
            
                
                    GeeksforGeeks
                
            
            
                Semantic UI Segment Basic Variation
            
            
            
            
                Toggle Basic Variation
            
        
  
        
            Data Structures
            
                Stack
                Heap
                Array
            
        
        
            Algorithms
            
                Searching
                Sorting
                Graph
            
        
        
            Programming Languages
            
                Java
                C++
                Python
            
        
    
    
        const toggleBasicVariation = () => {
            $('.ui.segment').toggleClass('basic')
        }
    

  

输出：

语义 UI 段变化

参考链接： https ://semantic-ui.com/elements/segment.html#inverted