📜  语义 UI 项

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

语义 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


  

   Semantic UI
   

  

   
      

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.              
          
       
    
  


HTML


  

   Semantic UI
   

  

   
      

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.          
      
   
  


HTML


  

   Semantic UI
   

  

   
      

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 项

语义 UI 项

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

HTML



  

   Semantic UI
   

  

   
      

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 项

语义 UI 项

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

HTML



  

   Semantic UI
   

  

   
      

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 项

语义 UI 项

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