📌  相关文章
📜  引导程序中的列表组以及示例

📅  最后修改于: 2021-05-25 17:16:03             🧑  作者: Mango

列表组用于显示一系列内容。我们可以根据需要修改它们以支持任何内容。列表组的使用只是为了以有组织的方式显示一系列内容或列表。

以下是使用HTML中的unordered_lists和相应的Bootstrap类创建的基本列表组： 

 
 
    List Groups example 
      
    
    
    
     
 
  
 
    
To do list

      
    
    
        
  • study
    • 
        
  • pay bills
    • 
        
  • call mom
    • 
        
  • drop an email
    • 
    

 
                    

输出：
列出组基本输出

活动清单项目

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

 
 
    List Groups example
      
    
    
    
     
 
  
 
    
To do list

      
    
    
        
  • study
    • 
        
  • pay bills
    • 
        
  • call mom
    • 
        
  • drop an email
    • 
    

 
                    

输出：
列出群组活动项目

残疾人清单项目

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

 
    
  
 
    List Groups example
      
    
    
    
     
 
  
 
    
To do list

      
    
    
  
                    
        
  • study
    • 
  
        
  • pay bills
    • 
        
  • call mom
    • 
        
  • drop an email
    • 
    

 
                    

输出：
列表组禁用的项目

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

 

      
 
    List Groups example
      
    
    
    
     
 
  
 
    
Social Networks

      
    
 
                    

输出：
列表组按钮

冲洗：使用冲洗类删除一些边框和圆角，以便在父容器中看起来不错。 

 

          
 
    List Groups Example
      
    
    
    
     
 
 
    
To do lists

      
    
    
        
  • study
    • 
        
  • pay bills
    • 
        
  • call mom
    • 
        
  • drop an email
    • 
    

 
                    

输出：
列表组刷新

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

 

          
 
    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
        
    • 
    

 
                    

输出：
列出组上下文类

徽章：我们可以将徽章添加到列表组项目中，如下所示： 

 

          
 
    Badge Example 
  
    
    
    
     
 
  
 
    
 
        
          
        
          
        
          
        
    

 
                    

输出：
列出组徽章

参考：

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