语义 UI 项

Semantic UI 是一个现代框架，用于为网站开发无缝设计，它为用户提供了轻量级的组件体验。它使用预定义的 CSS 和 jQuery 来整合不同的框架。

Semantic UI Item 为我们提供了项目类型、项目内容和项目变体。项目是用于创建更具交互性的网页的组件。语义 UI 项目视图呈现大量网站内容以供显示。

语义 UI 项：

• 语义 UI 项目类型：只有一种项目类型，即项目本身，要创建多个项目，我们需要在父元素中添加项目类。
• Semantic UI Item Content：有 8 种类型的内容可以用作 Semantic UI 中的项目，如图像、内容、标题、元数据、链接、描述、额外内容和评级。对于每种类型的内容，我们都有不同的文章。
• 语义 UI 项变体：有 6 种类型的变体可用作语义 UI 中的项，如堆叠、划分、松弛、链接项、垂直对齐、浮动内容。

语义 UI 项目类：

• item：该类必须与 Semantic-UI Item 中的项目一起使用。

句法：

    

        

            ....
        
    

下面的示例说明了语义 UI 项：

示例 1：在此示例中，我们将创建一个包含图像、标题和描述内容的简单项目。

HTML

  

   
   

  

   
      
GeeksforGeeks
      Semantic-UI Item
   
   


  
    

       

          

             
          
  
          

             Geeksforgeeks
             

                A Computer Science Portal for Geeks
             
  
             

                This is where GeeksforGeeks comes into picture
                - A computer science portal for geeks, by geeks. ...
                GeeksforGeeks.org was created with a goal in mind to
                provide well written, well thought and well explained
                solutions for selected questions.
             
          
       
    

  

输出：

语义 UI 项

示例 2：在此示例中，我们将创建包含不同内容的项目的三个部分。

HTML

  

   
   

  

   
      
GeeksforGeeks
      Semantic-UI Item
   
   


  
   

      

         

            
         
  
         

            This is where GeeksforGeeks comes into picture
            - A computer science portal for geeks, by geeks. ...
            GeeksforGeeks.org was created with a goal in mind to
            provide well written, well thought and well explained
            solutions for selected questions.
         
      
  
      

         

            
         
  
         

            This is where GeeksforGeeks comes into picture
            - A computer science portal for geeks, by geeks. ...
            GeeksforGeeks.org was created with a goal in mind to
            provide well written, well thought and well explained
            solutions for selected questions.
         
      
  
      

         

            
         
  
         

            This is where GeeksforGeeks comes into picture
            - A computer science portal for geeks, by geeks. ...
            GeeksforGeeks.org was created with a goal in mind to
            provide well written, well thought and well explained
            solutions for selected questions.
         
      
   

  

输出：

语义 UI 项

示例 3：在此示例中，我们将使用浮动内容的项目变体。

HTML

  

   
   

  

   
      
GeeksforGeeks
      Semantic-UI Item
   
   


  
   

      

         

            
         
  
         

            This is where GeeksforGeeks comes into picture
            - A computer science portal for geeks, by geeks. ...
            GeeksforGeeks.org was created with a goal in mind to
            provide well written, well thought and well explained
            solutions for selected questions.
         
  
         

            

               Explore
            
         
      
   

  

输出：

语义 UI 项

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