Bootstrap 5列表组

Bootstrap 5是Bootstrap的最新主要发行版，他们在其中改进了UI并进行了各种更改。列表组是显示一系列内容的灵活而强大的组件。可以对其进行修改和扩展，以支持其中的几乎所有内容。使用.list-group和.list-group-item类创建项目列表。 .list-group类与

元素一起使用， .list-group-item与
• 元素一起使用。

  句法：

   Contents... 
  

  例子：

      
          
          
          
          
      
      
          
              
                  GeeksforGeeks
              
              
                  
                    Data Structure
                  
                    Operating System
                  
                    Algorithm
              
          
      

  输出：

  

  活动列表项： .active类用于突出显示当前项。
  例子：

      
          
          
          
          
      
    
      
          
              
                  GeeksforGeeks
              
              
                  
                    Data Structure
                  
                    Operating System
                  
                    Algorithm
              
          
      

  输出：

  

  列出带有链接项的组：使用

  和标记而不是

  和
  • 创建带有链接项的组的列表。 .list-group-item-action类用于设置悬停效果以将背景色更改为灰色。
    例子：

        
            
            
            
            
        
      
        
            
                
                    GeeksforGeeks
                
                
                    
                        
                            Data Structure
                        
      
                        
                            Operating System
                        
      
                        
                            Algorithm
                        
                    
                
            
        

    输出：

    

    禁用项目： .disabled类用于禁用文本内容。此类将文本颜色设置为浅色。在链接上使用时，它将消除悬停效果。
    例子：

        
            
            
            
            
        
      
        
            
                
                    GeeksforGeeks
                
                
                    
                        
                            Android
                        
      
                        
                            Web
                        
      
                        
                            AI
                        
                    
                
            
        

    输出：

    

    平齐/删除边框： .list-group-flush类用于删除某些边框和圆角。
    例子：

      
    
      
        
        
        
        
    
      
    
        
            
                GeeksforGeeks
            
            
                
                    
                        Android
                    
      
                    
                        Web
                    
      
                    
                        AI
                    
                  
        
      
      

    输出：

    

    水平列表组： .list-group-horizontal类用于水平而非垂直显示项目列表。
    例子：

      
    
      
      
        
        
        
        
    
      
    
        
            
                GeeksforGeeks
            
            
                
                    
                        Android
                    
      
                    
                        Web
                    
      
                    
                        AI
                    
            
        
    
      

    输出：

    

    上下文类：用于将颜色设置为项目列表。为列表项着色的类是： .list-group-item-success ， .list-group-item-secondary ， .list-group-item-info ， .list-group-item-warning ， .list-group -item-danger ， .list-group-item-primary ， .list-group-item-dark和.list-group-item-light 。

    例子：

        
            
            
            
            
        
      
        
            
                
                    GeeksforGeeks
                
                
                    
                        Web
                    
      
                    
                        Android
                    
      
                    
                        AI
                    
      
                    
                        Data Science
                    
      
                    
                        UI/UX
                    
                
            
        

    输出：

    

    使用上下文类链接项目：上下文类可与项目列表一起使用。
    例子：

        
            
            
            
            
        
      
        
            
                
                    GeeksforGeeks
                
                
                    
                        Web
                    
                    
                        Android
                    
                    
                        AI
                    
                    
                        Data Science
                    
                    
                        UI/UX
                    
                
            
        

    输出：

    

    列出带有徽章的组： .badge类可以与实用程序类结合使用，以在组列表中添加徽章。

    例子：

        
            
            
            
            
        
      
        
            
                
                    GeeksforGeeks
                
                
                    
                        CPP
                        
                          X
                    
      
                    
                        Python
                        
                          Y
                    
      
                    
                        JavaScript
                        
                          Z
                    
                
            
        

    输出：