📜  如何使用 Bootstrap 将徽章放在表格单元格中?

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

如何使用 Bootstrap 将徽章放在表格单元格中?

在本文中,我们将学习如何使用 Bootstrap 在表格单元格中使用徽章。我们将首先学习如何使用 Bootstrap 徽章,然后将它们添加到表格的单元格中。

Bootstrap 徽章:响应式徽章包含在最新的 Bootstrap 版本中。徽章为任何内容添加额外的信息,如计数或标签。徽章的样式提供了其用途的可见线索。这些标记可以出现在句子、链接或按钮的尖端。下面的示例演示了 Bootstrap 徽章。

示例:这里我们将使用 noramll 形式的 bafges,在下一个示例中,我们将在表格单元格中使用它。

HTML


  

    
    
    
    

  

    
Button
            

           
Headings
    

GFG Classic                      Krishna K              

    

GFG Classic                      Krishna K              

    

GFG Classic                      Krishna K              

    
    
Pill Badges
             GFG S                   GFG D                   GFG W          

    
Links
             GFG P                   GFG I                   GFG L        


HTML


  

    
    
    
    

  

    
        

Badge inside cell Example 1

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
BadgeContent
                            Success                                              This is the success content
                            Warning                                              This is the warning content
                            Danger                                              This is the danger content
                            Dark                                              This is the dark content
    
  


HTML


  

    
    
    
    

  

    
        

Badge inside cell Example 2

                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
S.NoPolicy Name
1Spring Sale                         new                                              
2Summer Special 21                         new                                              
3Winter Wardrobe 19                         expired                                              
4All Day Bonanza                         expired                                              
    
  


输出:

单元格中的徽章:只需将包含徽章的分区包含在一个表格单元格中,就可以将徽章放置在表格单元格中。这可用于突出显示表格中的某些文本。下面的示例演示了在表格单元格中使用徽章。

示例 1:在此示例中,我们将在第一列中显示徽章,在第二列中显示其他文本。

HTML



  

    
    
    
    

  

    
        

Badge inside cell Example 1

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
BadgeContent
                            Success                                              This is the success content
                            Warning                                              This is the warning content
                            Danger                                              This is the danger content
                            Dark                                              This is the dark content
    
  

输出:

示例 2:在此示例中,我们将在表格单元格的内容旁边显示徽章。

HTML



  

    
    
    
    

  

    
        

Badge inside cell Example 2

                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
S.NoPolicy Name
1Spring Sale                         new                                              
2Summer Special 21                         new                                              
3Winter Wardrobe 19                         expired                                              
4All Day Bonanza                         expired                                              
    
  

输出: