📜  入门 CSS 时间线 TimelineItem-Badge

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

入门 CSS 时间线 TimelineItem-Badge

Primer CSS是使用 GitHub 的设计系统创建的 Github 上的开源项目。我们可以通过 npm 安装 Primer CSS 或在我们的 HTML 文件中包含 CDN 链接来使用它。它具有不同类型的样式,例如间距、颜色和排版。

Primer CSS Timeline用于在垂直方向显示项目。 Primer CSS TimelineItem-badge用于创建时间线徽章。徽章的默认颜色是深色文本浅灰色背景。我们可以使用颜色实用程序类为徽章赋予颜色。

在本文中,我们将讨论 Primer CSS TimelineItem-badge。

入门 CSS TimelineItem-badge 类:

  • TimelineItem:该类用于创建时间线项。
  • TimelineItem-badge:该类用于创建时间线项目徽章。
  • TimelineItem-body:该类用于在时间线主体内放置一些内容。

句法:

...
...

示例 1:以下示例演示了 Primer CSS TimelineItem-badge。

HTML


  

     Primer CSS TimelineItem-badge 
     

  
    
    
        

GeeksforGeeks

        

Primer CSS TimelineItem-badge

    

       
        
            
                                                                                                         
                             
                GeeksforGeeks default             
        
    


HTML


  

     Primer CSS TimelineItem-badge 
    

  
    
    
        

GeeksforGeeks

        

Primer CSS TimelineItem-badge

    

       
        
          
                                                                                   
                       
            GeeksforGeeks Colorful           
        
    
  


输出:

入门 CSS TimelineItem-badge

示例 2:以下示例演示了 Primer CSS TimelineItem-badge。

HTML



  

     Primer CSS TimelineItem-badge 
    

  
    
    
        

GeeksforGeeks

        

Primer CSS TimelineItem-badge

    

       
        
          
                                                                                   
                       
            GeeksforGeeks Colorful           
        
    
  

输出:

入门 CSS TimelineItem-badge

参考: https://primer.style/css/components/timeline#timelineitem-badge