语义 UI 统计变化

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

语义 UI 有一堆用于用户界面设计的组件。其中之一是“统计”。统计信息用于网页上的各种目的。它用于放大您网站的特定数据。用户可能需要根据自己的要求以不同的变化形式显示不同的统计数据。为了描述统计数据的重要性，它的变化可能会有所不同。

语义 UI 统计变化：

• 水平：此变体用于在水平维度上显示统计信息。
• 彩色：此变体用于显示不同颜色的统计数据，如红色、橙色等。
• Inverted ：此变体用于使统计信息反转（颜色方面）。
• 均分：此变体用于决定要连续显示多少统计信息。
• 浮动：此变体用于使统计信息在内容的左侧或右侧浮动。
• 大小：此变体用于使统计数据的大小发生变化。使用的类是迷你的、微小的、小型的统计数据。

句法：

    

     .....
    

示例 1：此示例演示了一些 Semantic-UI Statistics 类。请参阅输出以更好地理解。

HTML

  

    
    

  

    

        


        
GeeksforGeeks
        
            
Semantic UI Statistics Variations
        
        


        Horizontal Statistic :   
        

            

                1
            
            

                Label 1
            
        
        Colored Statistic :   
        

            

                2
            
            

                Label 2
            
        
        

            

                3
            
            

                Label 3
            
        
        

            

                4
            
            

                Label 4
            
        
        

        

            
Inverted Statistic :  
            

                

                    5
                
                

                    Label 5
                
            
            

                

                    6
                
                

                    Label 6
                
            
            

                

                    7
                
                

                    Label 7
                
            
        
        

        
Evenly Divided Statistic :   
        

            

                

                    8
                
                

                    Label 8
                
            
            

                

                    9
                
                

                    Label 9
                
            
            

                

                    10
                
                

                    Label 10
                
            
            

                

                    11
                
                

                    Label 11
                
            
        
        

        Floated Statistic :   
        

            

                

                    12
                
                

                    Floated
                
            
            
As the placement season is back,
                GeeksforGeeks is here to help you
                crack the interview. We have selected
                some most commonly asked and MUST DO
                practice problems to crack Product-based
                Company Interviews.You can also take part 
                in our mock placement contests which will 
                help you learn different topics and 
                practice at the same time, simulating the
                feeling of a real placement test 
                environment.
            
        
        

        Size Statistic :   
        

            

                13
            
            

                Mini
            
        
        

            

                14
            
            

                Small
            
        
        

            

                15
            
            

                Large
            
        
    

输出：

语义 UI 统计变化

示例 2：此示例还演示了一些 语义 UI 统计类。

HTML

  

    

  

    

        


        
GeeksforGeeks
        
            
Semantic UI Statistics Variations
        
        


        Horizontal Statistic :   
        

            

                1
            
            

                One
            
        
        Colored Statistic :   
        

            

                2
            
            

                Teal
            
        
        

            

                3
            
            

                Blue
            
        
        

            

                4
            
            

                Violet
            
        
        

        

            
Inverted Statistic :  
            

                

                    5
                
                

                    Five
                
            
            

                

                    6
                
                

                    Six
                
            
            

                

                    7
                
                

                    Seven
                
            
        
        

        
Evenly Divided Statistic :   
        

            

                

                    8
                
                

                    Eight
                
            
            

                

                    9
                
                

                    Nine
                
            
            

                

                    10
                
                

                    Ten
                
            
            

                

                    11
                
                

                    Eleven
                
            
        
        

        Floated Statistic :   
        

            

                

                    12
                
                

                    Floated
                
            
            
As the placement season is back,
                GeeksforGeeks is here to help you
                crack the interview. We have selected
                some most commonly asked and MUST DO
                practice problems to crack Product-based
                Company Interviews.You can also take part 
                in our mock placement
                contests which will help you learn different
                topics and practice at the same time, simulating
                the feeling of a real placement test environment.
            
        
        

        Size Statistic :   
        

            

                13
            
            

                large
            
        
        

            

                14
            
            

                Huge
            
        
    

输出：

语义 UI 统计变化

参考： https://semantic-ui.com/views/statistic.html