Bootstrap 列表组

概述

Bootstrap 列表组是一个灵活且强大的组件，用于显示一系列内容。它不仅可以显示简单的项目列表，还支持徽章、按钮、自定义内容等。

基本列表组

<ul class="list-group">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
    <li class="list-group-item">第四项</li>
    <li class="list-group-item">第五项</li>
</ul>

活动项

<ul class="list-group">
    <li class="list-group-item active" aria-current="true">活动项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
    <li class="list-group-item">第四项</li>
    <li class="list-group-item">第五项</li>
</ul>

禁用项

<ul class="list-group">
    <li class="list-group-item disabled" aria-disabled="true">禁用项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
    <li class="list-group-item">第四项</li>
    <li class="list-group-item">第五项</li>
</ul>

链接和按钮

<!-- 链接 -->
<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        活动链接项
    </a>
    <a href="#" class="list-group-item list-group-item-action">链接项</a>
    <a href="#" class="list-group-item list-group-item-action">另一个链接项</a>
    <a href="#" class="list-group-item list-group-item-action">第三个链接项</a>
    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">禁用链接项</a>
</div>

<!-- 按钮 -->
<div class="list-group">
    <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
        活动按钮项
    </button>
    <button type="button" class="list-group-item list-group-item-action">按钮项</button>
    <button type="button" class="list-group-item list-group-item-action">另一个按钮项</button>
    <button type="button" class="list-group-item list-group-item-action">第三个按钮项</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>禁用按钮项</button>
</div>

清除边框

<ul class="list-group list-group-flush">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
    <li class="list-group-item">第四项</li>
    <li class="list-group-item">第五项</li>
</ul>

编号列表组

<ol class="list-group list-group-numbered">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
</ol>

<!-- 带自定义内容 -->
<ol class="list-group list-group-numbered">
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
            <div class="fw-bold">子标题</div>
            内容描述
        </div>
        <span class="badge bg-primary rounded-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
            <div class="fw-bold">子标题</div>
            内容描述
        </div>
        <span class="badge bg-primary rounded-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
            <div class="fw-bold">子标题</div>
            内容描述
        </div>
        <span class="badge bg-primary rounded-pill">14</span>
    </li>
</ol>

水平列表组

<ul class="list-group list-group-horizontal">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
</ul>

<!-- 响应式水平列表 -->
<ul class="list-group list-group-horizontal-sm">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
</ul>

<ul class="list-group list-group-horizontal-md">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
</ul>

上下文类

<ul class="list-group">
    <li class="list-group-item">默认列表项</li>
    <li class="list-group-item list-group-item-primary">Primary 列表项</li>
    <li class="list-group-item list-group-item-secondary">Secondary 列表项</li>
    <li class="list-group-item list-group-item-success">Success 列表项</li>
    <li class="list-group-item list-group-item-danger">Danger 列表项</li>
    <li class="list-group-item list-group-item-warning">Warning 列表项</li>
    <li class="list-group-item list-group-item-info">Info 列表项</li>
    <li class="list-group-item list-group-item-light">Light 列表项</li>
    <li class="list-group-item list-group-item-dark">Dark 列表项</li>
</ul>

<!-- 带链接的上下文类 -->
<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">默认链接项</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary 链接项</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary 链接项</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success 链接项</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger 链接项</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning 链接项</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info 链接项</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light 链接项</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark 链接项</a>
</div>

带徽章

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        收件箱
        <span class="badge bg-primary rounded-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        草稿
        <span class="badge bg-primary rounded-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        已发送
        <span class="badge bg-primary rounded-pill">1</span>
    </li>
</ul>

自定义内容

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">列表组项标题</h5>
            <small>3 天前</small>
        </div>
        <p class="mb-1">这是列表组项的一些内容。</p>
        <small>还有一些小字。</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">列表组项标题</h5>
            <small class="text-muted">3 天前</small>
        </div>
        <p class="mb-1">这是列表组项的一些内容。</p>
        <small class="text-muted">还有一些小字。</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">列表组项标题</h5>
            <small class="text-muted">3 天前</small>
        </div>
        <p class="mb-1">这是列表组项的一些内容。</p>
        <small class="text-muted">还有一些小字。</small>
    </a>
</div>

复选框和单选框

<ul class="list-group">
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
        <label class="form-check-label" for="firstCheckbox">第一个复选框</label>
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
        <label class="form-check-label" for="secondCheckbox">第二个复选框</label>
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
        <label class="form-check-label" for="thirdCheckbox">第三个复选框</label>
    </li>
</ul>

实际示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 列表组示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap 列表组示例</h1>
        
        <!-- 邮件列表 -->
        <h2>邮件列表</h2>
        <div class="list-group mb-4">
            <a href="#" class="list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">会议通知</h5>
                    <small>3 分钟前</small>
                </div>
                <p class="mb-1">明天下午 2 点在会议室召开项目讨论会。</p>
                <small>来自：张三</small>
            </a>
            <a href="#" class="list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">周报提醒</h5>
                    <small class="text-muted">1 小时前</small>
                </div>
                <p class="mb-1">请在今天下班前提交本周工作周报。</p>
                <small class="text-muted">来自：李四</small>
            </a>
        </div>
        
        <!-- 任务列表 -->
        <h2>任务列表</h2>
        <ul class="list-group mb-4">
            <li class="list-group-item">
                <input class="form-check-input me-1" type="checkbox" value="" id="task1" checked>
                <label class="form-check-label text-decoration-line-through" for="task1">完成项目文档</label>
            </li>
            <li class="list-group-item">
                <input class="form-check-input me-1" type="checkbox" value="" id="task2">
                <label class="form-check-label" for="task2">代码审查</label>
            </li>
            <li class="list-group-item">
                <input class="form-check-input me-1" type="checkbox" value="" id="task3">
                <label class="form-check-label" for="task3">准备演示文稿</label>
            </li>
        </ul>
        
        <!-- 通知列表 -->
        <h2>通知列表</h2>
        <div class="list-group mb-4">
            <a href="#" class="list-group-item list-group-item-action list-group-item-success">
                <div class="d-flex w-100 justify-content-between">
                    <h6 class="mb-1">✓ 操作成功</h6>
                    <small>刚刚</small>
                </div>
                <small>您的更改已成功保存。</small>
            </a>
            <a href="#" class="list-group-item list-group-item-action list-group-item-warning">
                <div class="d-flex w-100 justify-content-between">
                    <h6 class="mb-1">⚠ 警告</h6>
                    <small>5 分钟前</small>
                </div>
                <small>磁盘空间不足，请及时清理。</small>
            </a>
            <a href="#" class="list-group-item list-group-item-action list-group-item-danger">
                <div class="d-flex w-100 justify-content-between">
                    <h6 class="mb-1">✗ 错误</h6>
                    <small>10 分钟前</small>
                </div>
                <small>连接服务器失败，请检查网络。</small>
            </a>
        </div>
        
        <!-- 统计列表 -->
        <h2>统计列表</h2>
        <ul class="list-group mb-4">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                今日访问量
                <span class="badge bg-primary rounded-pill">1,234</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                新增用户
                <span class="badge bg-success rounded-pill">56</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                待处理订单
                <span class="badge bg-warning rounded-pill">12</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                异常报告
                <span class="badge bg-danger rounded-pill">3</span>
            </li>
        </ul>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

最佳实践

1. 语义化标签

<!-- 使用 ul/li 表示无序列表 -->
<ul class="list-group">
    <li class="list-group-item">项目</li>
</ul>

<!-- 使用 ol/li 表示有序列表 -->
<ol class="list-group list-group-numbered">
    <li class="list-group-item">项目</li>
</ol>

<!-- 使用 div/a 表示可点击列表 -->
<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">链接</a>
</div>

2. 可访问性

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        当前项
    </a>
    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">
        禁用项
    </a>
</div>

下一步

下一章：Bootstrap 下拉菜单 →