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

发布于：2025-06-16 ⋅ 阅读:(18) ⋅ 点赞:(0)

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>

六、关键点总结

  1. 基础结构：使用list-group作为容器，list-group-item作为列表项
  2. 状态控制：active和disabled类控制项状态
  3. 颜色变体：通过list-group-item-*类设置不同颜色
  4. 交互增强：添加list-group-item-action使列表项可点击
  5. 内容扩展：可以在列表项中放置任意HTML内容
  6. 布局选项：list-group-horizontal实现水平布局，list-group-flush移除边框

列表组是Bootstrap中非常灵活的组件，可以用于构建导航菜单、通知列表、设置面板等各种界面元素。通过组合不同的类和结构，可以实现丰富的视觉效果和交互体验。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布