列表组 List group
列表组用于展示一系列内容项，支持激活 / 禁用状态、链接与按钮式可点项、编号、徽章以及横向排列，并能嵌入任意自定义内容。
基础列表
最基本的列表组是一个带 list-group 类的无序列表，每项使用 list-group-item。
- 收件箱（12 封未读）
- 已发送邮件
- 草稿箱
- 垃圾邮件
- 已删除邮件
HTML 示例
active / disabled 项
给某一项加 active 表示当前选中；加 disabled 使其看起来被禁用。
- 当前选中的项：系统设置
- 账号资料
- 通知偏好
- 已禁用的项：危险操作
HTML 示例
链接按钮式
用 <a> 或 <button> 配合 list-group-item-action 得到可点击项；点击下方任意项会切换高亮并更新右侧说明。
消息通知
管理与账号相关的系统通知、营销推送与互动提醒。
HTML 示例
齐平（Flush）
添加 list-group-flush 移除部分边框与圆角，让列表项从容器边缘到边缘展示，常放在卡片里。
- 个人资料
- 账号安全
- 隐私设置
- 绑定账号
HTML 示例
编号
使用 <ol> 并加 list-group-numbered，序号由 CSS 计数器自动生成，适合排行榜、步骤列表。
- 完成注册并验证邮箱
- 补全个人资料与头像
- 绑定手机号与支付方式
- 发布第一条动态
HTML 示例
自定义内容
借助 Flexbox 工具类，列表项里可以放标题、段落、小字说明与徽章，做成消息 / 邮件列表。
HTML 示例
横向排列
在 <ul> 上加 list-group-horizontal（或响应式变体），列表项由纵向变为横向排列。
- 概览
- 数据
- 设置
- 近 7 天
- 近 30 天
- 近 90 天
- 全部
- 待处理
- 已完成
HTML 示例