引导程序列表组

引导程序列表组用于创建包含列表项的列表组。最基本的列表组是包含列表项的无序列表。

类“.LIST群”的

元素和类“.LIST基团的项目”的
• 元素中内被用来创建一个基本列表组。

  引导程序列表组示例

   
  
  
    
    
    
    
    
  
  
  
  
    
  Basic List Group Example
    
  
      
  First item
      
  Second item
      
  Third item
    
  
  
  
  
  
  

  带徽章的引导程序列表组

  徽章也可以添加到列表组。它们将自动定位在右侧。

  您必须在列表项中创建一个类别为“ .badge”的元素，以创建徽章。

   
  
  
    
    
    
    
    
  
  
  
  
    
  List Group With Badges
    
  
      
  12 New
      
  5 Deleted
    
      
  3 Warnings
    
    
  
  
  
  
  
  

  具有超链接的引导程序列表组

  您还可以将项目链接到列表组。这将在悬停时提供灰色背景色。您必须使用

  代替

  和代替
  • 元素来创建具有链接项的列表组。

     
    
    
      
      
      
      
      
    
    
    
    
      
    List Group With Linked Items
      
    
        First item
        Second item
        Third item
      
    
    
    
    
    
    

    引导程序列表组：显示活动项目

    类“ .active”用于突出显示当前项目。它指定特定项目处于活动状态。

     
    
    
      
      
      
      
      
    
    
    
    
      
    Active Item in a List Group
      
    
        First item (This is active item)
        Second item
        Third item
      
    
    
    
    
    
    
    

    引导程序列表组：显示禁用项

    类“ .disabled”用于禁用列表组中的特定项目。

     
    
    
      
      
      
      
      
    
    
    
    
      
    List Group With a Disabled Item
      
    
        First item
        Second item
        Third item
      
    
    
    
    
    
    

    引导程序列表组：上下文类

    您可以使用上下文类将颜色添加到列表项。

    以下类用于为列表项着色：

    • .list-group-item-成功
    • .list-group-item-info
    • .list-group-item-warning
    • .list-group-item-danger

     
    
    
      
      
      
      
      
    
    
    
    
      
    List Group With Contextual Classes
      
    
        
    First item
        
    Second item
        
    Third item
        
    Fourth item
      
      
      
    Linked Items With Contextual Classes
        First item
        Second item
        Third item
        Fourth item
      
    

  使用上下文类别链接项目

  在Bootstrap 4中，您还可以将项目与上下文类链接。

  例：

  
  
  
    
    
    
    
    
    
    
  
  
  
  
    
  Linked Items With Contextual Classes
    
  Move the mouse over the linked items to see the hover effect:
    
  
      Action item
      Success item
      Secondary item
      Info item
      Warning item
      Danger item
      Primary item
      Dark item
      Light item