📜  语义 UI 统计变化

📅  最后修改于: 2022-05-13 01:56:16.291000             🧑  作者: Mango

语义 UI 统计变化

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

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

语义 UI 统计变化:

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

句法:

.....

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

HTML


  

    Semantic-UI Statistics Variations
    

  

    
        

        

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             
        
    


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 统计变化

语义 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 统计变化

语义 UI 统计变化

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