语义 UI 步骤变化

Semantic UI 是一个开源框架，用于使用 CSS 和 jQuery 创建出色的用户界面。它的工作方式与引导程序相同，并提供了许多不同的部分，您可以利用这些部分使您的网站看起来更好。它使用类将 CSS 添加到元素中。

Semantic-UI 步骤类为我们提供了显示流程的单个步骤。我们可以根据我们的要求创建具有各种类型变化的步骤。在语义 UI 中，有不同类型的步进变化，例如可堆叠、不可堆叠、流动、附加、均分等。有时当屏幕尺寸不同时，我们希望看到不同的变化。

语义 UI 步骤类型：

• step：用于构建单步。我们可以使用多步来生成步，但我们必须先将步添加到父元素。

语义 - UI 变体类：

• stackable：当我们想要可堆叠的步骤时添加此类。当屏幕尺寸减小时，步骤垂直堆叠在另一个下方。
• 流体：当我们希望步长取整个容器的宽度时，我们使用这个类
• unstackable：当屏幕尺寸发生变化时我们不需要步骤相互堆叠时使用此类
• 顶部附加：当我们希望步骤顶部附加时添加此类。
• 底部附加：当我们希望步骤底部附加时添加此类。

在本文中，让我们看看各种步骤变化。

可堆叠：仅在较小的显示器上可以垂直堆叠阶梯。当我们尝试更改屏幕大小时，步骤会堆叠在一起。

句法：

    

        ...
      

输出：

流体：流体步骤占据其容器的整个宽度。在示例中，我们可以将其可视化。

句法：

     

           ...
     

HTML

  
    
    
  
  
    
      
Geeksforgeeks
       Semantic-UI Step Variations 
      


    
    

      

        
        

          
Write in gfg
          
Pick and article and write it.
        
      
      

        
        

          
In review
          

            The article is reviewed once submitted
          
        
      
      

        
        

          
Make changes if asked
          

            If any changes are suggested, correct them
          
        
      
      

        

          
Published
          
Your article is published!
        
      
    
  

输出：

unstackable：在移动设备上，一个步骤可以防止自己堆叠。当屏幕尺寸最小化时，步骤不要堆叠在另一个上。

句法：

     

           ...
     

HTML

  
    
    
  
  
    
      
Geeksforgeeks
       Semantic-UI Step Variations 
      


    
    

      

        
        

          
Write in gfg
          
Pick and article and write it.
        
      
      

        
        

          
In review
          

            The article is reviewed once submitted
          
        
      
      

        
        

          
Make changes if asked
          

            If any changes are suggested, correct them
          
        
      
      

        

          
Published
          
Your article is published!
        
      
    
  

输出：

附加：其他项目可以附加到步骤。我们可以将步骤附加到附加内容的顶部或底部。

句法：

     

           ...
     



      

        ...
      

HTML

  
    
    
  
  
    
      
Geeksforgeeks
       Semantic-UI Step Variations 
      


    
    

      

        
        

          
Write in gfg
          
Pick and article and write it.
        
      
      

        
        

          
In review
          

            The article is reviewed once submitted
          
        
      
    
      
This might take a week's time
  
    

      

        
        

          
Make changes if asked
          

            If any changes are suggested, correct them
          
        
      
      

        

          
Published
          
Your article is published!
        
      
    
  

输出：

均匀划分：步骤可以在其父级内均匀分布。当类中提供步数时，步数均分。

句法：

    

          ...
    

HTML

  
    
    
  
  
    
      
Geeksforgeeks
       Semantic-UI Step Variations 
      


    
    

      

        
        

          
Write in gfg
          

            Pick and article and write it.
          
        
      
      

        
        

          
In review
          

            The article is reviewed once submitted
          
        
      
      

        
        

          
Make changes if asked
          

            If any changes are suggested, correct them
          
        
      
      

        

          
Published
          

            Your article is published!
          
        
      
    
  

输出：

尺寸：台阶有各种尺寸，例如迷你、小、小、大、大、巨大和巨大。它们可以通过下面给出的示例清楚地显示出来。

句法：

    

         ...
    

// In the place of size in the above syntax we 
// can use mini, tiny, small, large, big, huge
// and massive.

HTML

  
    
    
  
  
    
      
Geeksforgeeks
       Semantic-UI Step Variations 
      


    
    
Mini:
    

      

        
        

          
Write in gfg
          

            Pick and article and write it.
          
        
      
      

        
        

          
In review
          

            The article is reviewed once submitted
          
        
      
    
    

    
Tiny:
    

      

        
        

          
Write in gfg
          

            Pick and article and write it.
          
        
      
      

        
        

          
In review
          

            The article is reviewed once submitted
          
        
      
    
    

    
Small:
    

      

        
        

          
Write in gfg
          

            Pick and article and write it.
          
        
      
      

        
        

          
In review
          

            The article is reviewed once submitted
          
        
      
    
    

    
Large:
    

      

        
        

          
Write in gfg
          

            Pick and article and write it.
          
        
      
      

        
        

          
In review
          

            The article is reviewed once submitted
          
        
      
    
    

    
Big:
    

      

        
        

          
Write in gfg
          

            Pick and article and write it.
          
        
      
      

        
        

          
In review
          

            The article is reviewed once submitted
          
        
      
    
    

    
Huge:
    

      

        
        

          
Write in gfg
          

            Pick and article and write it.
          
        
      
      

        
        

          
In review
          

            The article is reviewed once submitted
          
        
      
    
    

    
Massive:
    

      

        
        

          
Write in gfg
          

            Pick and article and write it.
          
        
      
      

        
        

          
In review
          

            The article is reviewed once submitted
          
        
      
    
  

输出：

参考： https://semantic-ui.com/elements/step.html