📜  语义 UI 图像状态

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

语义 UI 图像状态

Semantic-UI 是一个开源框架,它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同,并且具有各种不同的元素可用于使您的网站看起来更神奇。 Semantic-UI 为我们提供了一种非常简单的方式来设置图像样式,而不是使用冗长的 CSS 代码。它提供不同状态的图像,如隐藏和禁用。它还为我们提供了不同的类型,如普通图像和图像链接,以及不同的变体。

在本文中,我们将使用示例代码了解 Semantic-UI 图像状态及其实现。

Semantic-UI 图像状态:语义-UI 图像中有两种状态,包括隐藏状态和禁用状态。现在让我们了解它们中的每一个。

1. 隐藏状态:虽然图片包含在代码中,但是我们在网页上看不到图片,因为当我们对图片使用.hidden类时,图片是隐藏的。

句法:

例子:

HTML


  

    Semantic-UI Image Hidden State
    
    
    

  

    
        
            

Geeksforgeeks

            Semantic-UI Image Hidden State             

                            
               

We will not be able to see image

        
    
  


HTML


  

    Semantic-UI Image Disabled State
    
    
    

  

    
        
            

Geeksforgeeks

            Semantic-UI Image Disabled State             

                         
               

                We will be able to see image                  but in disabled state             

        

    
  


输出:我们可以观察到图像在输出中不可见。

2.禁用状态:在语义UI禁用状态下,图像是可见的,但我们可以观察到图像不能被选中,虽然它是可见的,但它会被禁用

句法:

例子:

HTML



  

    Semantic-UI Image Disabled State
    
    
    

  

    
        
            

Geeksforgeeks

            Semantic-UI Image Disabled State             

                         
               

                We will be able to see image                  but in disabled state             

        

    
  

输出:我们可以观察到图像处于禁用状态

参考: https ://semantic-ui.com/elements/image.html#states