当前位置：首页 > web >正文

Bootstrap 5学习教程，从入门到精通， Bootstrap 5 列表组(List Group)语法知识点及案例（14）

web 2025/6/17 23:16:50

Bootstrap 5 列表组(List Group)语法知识点及案例

一、列表组基础语法

列表组是Bootstrap中用于显示一系列内容的灵活组件，常用于显示菜单、导航或任何项目列表。

基本列表组结构

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

二、列表组样式选项

1. 激活和禁用状态

<ul class="list-group"><li class="list-group-item active" aria-current="true">激活项</li><li class="list-group-item disabled" aria-disabled="true">禁用项</li><li class="list-group-item">普通项</li>
</ul>

2. 颜色变体

Bootstrap 5提供了多种上下文颜色：

<ul class="list-group"><li class="list-group-item list-group-item-primary">主要项</li><li class="list-group-item list-group-item-secondary">次要项</li><li class="list-group-item list-group-item-success">成功项</li><li class="list-group-item list-group-item-danger">危险项</li><li class="list-group-item list-group-item-warning">警告项</li><li class="list-group-item list-group-item-info">信息项</li><li class="list-group-item list-group-item-light">浅色项</li><li class="list-group-item list-group-item-dark">深色项</li>
</ul>

3. 无边框列表组

<ul class="list-group list-group-flush"><li class="list-group-item">无边框项1</li><li class="list-group-item">无边框项2</li>
</ul>

三、列表组内容类型

1. 带徽章的列表组

<ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center">收件箱<span class="badge bg-primary 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">99+</span></li>
</ul>

2. 自定义内容

<div class="list-group"><a href="#" class="list-group-item list-group-item-action active"><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">昨天</small></div><p class="mb-1">另一个列表项的内容描述。</p><small class="text-muted">更多小文字</small></a>
</div>

3. 复选框和单选按钮列表组

<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>
</ul>

四、列表组交互行为

1. 可点击的列表组

<div class="list-group"><a href="#" class="list-group-item list-group-item-action">可点击项1</a><a href="#" class="list-group-item list-group-item-action">可点击项2</a><a href="#" class="list-group-item list-group-item-action">可点击项3</a>
</div>

2. 水平列表组

<ul class="list-group list-group-horizontal"><li class="list-group-item">水平项1</li><li class="list-group-item">水平项2</li><li class="list-group-item">水平项3</li>
</ul>

五、综合案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap 5 列表组示例</title><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container py-5"><h1 class="mb-4">Bootstrap 5 列表组示例</h1><!-- 示例1：基本列表组 --><div class="row mb-5"><div class="col-md-6"><h3>1. 基本列表组</h3><ul class="list-group"><li class="list-group-item">默认列表项</li><li class="list-group-item active">激活状态项</li><li class="list-group-item disabled">禁用状态项</li></ul></div><div class="col-md-6"><h3>2. 带徽章的列表组</h3><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-warning text-dark rounded-pill">5</span></li></ul></div></div><!-- 示例2：颜色变体和自定义内容 --><div class="row mb-5"><div class="col-md-6"><h3>3. 颜色变体列表组</h3><div class="list-group"><a href="#" class="list-group-item list-group-item-action list-group-item-primary">主要操作项</a><a href="#" class="list-group-item list-group-item-action list-group-item-success">成功操作项</a><a href="#" class="list-group-item list-group-item-action list-group-item-danger">危险操作项</a></div></div><div class="col-md-6"><h3>4. 自定义内容列表组</h3><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>今天</small></div><p class="mb-1">系统将于今晚12点进行维护升级，预计耗时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">3天前</small></div><p class="mb-1">我们发布了新版本v2.0，包含多项功能改进。</p><small class="text-muted">点击查看更新日志</small></a></div></div></div><!-- 示例3：交互式列表组 --><div class="row mb-5"><div class="col-md-6"><h3>5. 复选框列表组</h3><ul class="list-group"><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="" id="option1" checked><label class="form-check-label" for="option1">电子邮件通知</label></li><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="" id="option2"><label class="form-check-label" for="option2">短信通知</label></li><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="" id="option3"><label class="form-check-label" for="option3">推送通知</label></li></ul></div><div class="col-md-6"><h3>6. 水平列表组</h3><ul class="list-group list-group-horizontal-md mb-3"><li class="list-group-item">首页</li><li class="list-group-item active">产品</li><li class="list-group-item">服务</li><li class="list-group-item">关于我们</li></ul><h3 class="mt-4">7. 无边框列表组</h3><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></ul></div></div></div><!-- Bootstrap 5 JS Bundle with Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>