Semantic-UI Rail 大小变化

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

Rails是向用户显示附加内容的绝佳方式，通常它们用于显示广告。它们放置在主视口的左侧或右侧，默认宽度为 300 像素。为了使语义轨起作用，主容器的宽度应在 600 像素到 800 像素之间。我们可以使用各种类（如tiny、small、huge等）来更改 rails 的大小。

Semantic-UI Rails 大小变化类：

• tiny：使导轨的尺寸和形状很小。
• 迷你：使轨道的尺寸和形状迷你。
• 小：使导轨的尺寸和形状变小。
• large：使导轨的尺寸和形状变大。
• big：使导轨的尺寸和形状变大。
• 巨大的：使轨道的大小和形状变得巨大。
• 巨大的：使轨道的大小和形状变得庞大。

句法：

    

        

            ...
        
    
    

        

            ...
        
    
    ...

...

示例 1：以下示例说明了所有较小尺寸的导轨。

HTML

  

    Semantic UI Rail Size Variation
    
    
    
    
    

  

    
        
            GeeksForGeeks
        
          
        Semantic UI Rail Size Variation
        
        
        
            
                
                    
                        This is the mini rail
                    
                
                
                    
                        This is the tiny rail
                    
                
                Main Viewport
                Main Viewport
            
            
                
                    
                        This is the small rail
                    
                
                Main Viewport
                Main Viewport
            
        
    

  

输出：

说明小型导轨

示例 2：以下示例说明了所有较大尺寸的导轨。

HTML

  

    Semantic UI Rail Size Variation
    
    
    
    
    

  

    
        
            GeeksForGeeks
        
          
        Semantic UI Rail Size Variation
        
        
        
            
                
                    
                        This is the large rail
                    
                
                
                    
                        This is the big rail
                    
                
                Main Viewport
                Main Viewport
            
            
                
                    
                        This is the huge rail
                    
                
                
                    
                        This is the massive rail
                    
                
                Main Viewport
                Main Viewport
            
        
    

  

输出：

说明大型导轨

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