列表组

基础的列表组

最基本的列表组是包含列表项的无序列表：

如需创建基础列表组，请使用类为 .list-group 的

元素和类为 .list-group-item 的
• 元素：

  实例

  
    
  第一项
    
  第二项
    
  第三项
  
  

  活动状态

  请使用 .active 类突出显示当前项目：

  实例

  
    
  活动项目
    
  第二项
    
  第三项
  
  

  包含链接项的列表组

  如需创建带有链接项目的列表组，请使用

  代替

  ，用 代替
  • 。可选地，如果您想要悬停时的灰色背景色，请添加 .list-group-item-action 类：

    实例

    
      第一项
      第二项
      第三项
    
    

    禁用项目

    .disabled 类为禁用的项目添加了较浅的文本颜色。当在链接上使用时，将去除悬停效果：

    实例

    
      被禁用的项目
      被禁用的项目
      第三项
    
    

    删除边框

    使用 .list-group-flush 类删除边框和圆角：

    实例

    
      
    第一项
      
    第二项
      
    第三项
      
    第四项
    
    

    带编号的列表组

    使用 .list-group-numbered 类创建前面带有数字的列表项：

    实例

    
      
    第一项
      
    第二项
      
    第三项
    
    

    水平列表组

    如果您希望列表项水平显示而不是垂直显示（并排而不是堆叠），请将 .list-group-horizontal 类添加到 .list-group：

    实例

    
      
    第一项
      
    第二项
      
    第三项
      
    第四项
    
    

    上下文类

    上下文类可用于为列表项添加颜色：

    为列表项着色的类是：

    • .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

    实例

    
      
    Success item
      
    Secondary item
      
    Info item
      
    Warning item
      
    Danger item
      
    Primary item
      
    Dark item
      
    Light item
    
    

    带有上下文类的链接项目

    实例

    
      Action item
      Success item
      Secondary item
      Info item
      Warning item
      Danger item
      Primary item
      Dark item
      Light item
    
    

    带徽章的列表组

    将 .badge 类与 utility/helper 类结合起来，可在列表组中添加徽章：

    实例

    
      
    
        收件箱
        12
      
      
    
        广告邮件
        50
      
      
    
        垃圾箱
        99
      
    
    

  

  分页

  卡片