使用示例在引导程序中列出组

列表组用于显示一系列内容。我们可以根据需要修改它们以支持任何内容。 List-Groups 的用途只是以有组织的方式显示一系列或内容列表。
下面是使用 HTML 中的 unordered_lists 和适当的Bootstrap 类创建的基本列表组：

输出：

活动列表项
将.active类添加到列表项以指示它是当前活动项。

html

    List Groups example
     
    
    
    
    

 

     
 
To do list
 
 
     
    
        study
        pay bills
        call mom
        drop an email
    

                   

输出：

禁用列表项
将.disabled类添加到列表项以指示它已禁用。当要禁用的内容是链接/按钮时，我们可能需要添加自定义 javascript 代码来完全禁用项目。

html

   
 

    List Groups example
     
    
    
    
    

 

     
 
To do list
 
 
     
    
 
                   
        study
 
        pay bills
        call mom
        drop an email
    

                   

输出：

超链接和按钮：使用.list-group-item-action类创建具有悬停、禁用和活动状态的可操作列表项。

html

     

    List Groups example
     
    
    
    
    

 

     
 
Social Networks
 
 
     
    
        Google
        Facebook
        Twitter
        LinkedIn
    

                   

输出：

Flush : 使用 Flush 类去除一些边框和圆角，使其在父容器中看起来不错。

html

         

    List Groups Example
     
    
    
    
    


     
 
To do lists
 
 
     
    
        study
        pay bills
        call mom
        drop an email
    

                   

输出：

上下文类：使用上下文类来设置具有合适背景和颜色的列表项的样式。

html

         

    List Groups example
     
    
    
    
    

 

    
        
                Basic list group item
        
        
                Primary list group item
        
        
                Secondary list group item
        
        
                Success list group item
        
        
                Danger list group item
        
        
                Warning list group item
        
        
                Info list group item
        
        
                Light list group item
        
        
                Dark list group item
        
    

                   

输出：

徽章：我们可以添加徽章以列出组项目，如下所示：

html

         

    Badge Example
 
    
    
    
    

 

    
        
            NOTIFICATIONS
            2
        
         
        
            MESSAGES
            2
        
         
        
            UPDATES
            2
        
         
        
            NEWS
            2
        
    

                   

输出：

支持的浏览器：

• 谷歌浏览器
• 微软边缘
• 火狐
• 歌剧
• 苹果浏览器

参考：

• 徽章和面包屑。
• 列出组 Bootstrap。