bootstrap 的 list-group 是纯 css 实现的轻量灵活列表组件，支持垂直/水平排列、多种内容类型及交互状态，需按语义选用 、 或 结构，并配合各类工具类增强样式与功能。
Bootstrap 的 list-group 是一个轻量、灵活的列表组件，适合展示垂直排列的项目（如导航菜单、评论列表、通知项等）。它不依赖 JavaScript，纯 CSS 实现，配合 HTML 结构即可快速构建语义清晰、样式统一的列表组。
基础结构：用 ul + list-group 类
最简方式是用无序列表 <ul></ul> 包裹多个 <li>，并为 <ul></ul> 添加 list-group 类：
- 每个
<li>必须加list-group-item类才能正确渲染样式 - 支持文本、链接、按钮等多种内容类型（
@#@#@#@#@#@#@#@#@#@0—— 链接式，带可点击反馈 -
<button type="button" class="list-group-item list-group-item-action">刷新</button>—— 按钮式，适合 JS 绑定事件 - 注意：此时不用
<ul></ul>，直接用<div class="list-group"> 包裹 <h3>增强样式：添加状态类与辅助元素</h3> <p>可通过附加类快速突出重点或补充信息：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code>active：高亮当前项（自动适配背景色和文字色） -
disabled：禁用某一项（变灰+禁用指针） -
list-group-item-primary等主题色类（如-success、-danger）改变背景色调 - 在
list-group-item内嵌套<div class="d-flex justify-content-between"> 实现左右对齐（如标题+徽章） <li>配合 <code>badge（徽章）、small（小号文字）、text-muted等工具类丰富信息层级 - 加
list-group-horizontal类让列表横向排布（响应式可用list-group-horizontal-sm等断点类） - 每个
list-group-item内可自由嵌套图文、表单控件、图标（如 Font Awesome） - 如需分隔线，用
<hr class="dropdown-divider">（虽属下拉菜单类，但常被借用）或自定义 border - 避免过度嵌套；复杂结构建议改用
card或自定义 CSS，保持语义清晰
进阶布局：水平排列与自定义内容
默认是垂直列表，但可通过工具类或 Flex 调整方向：
不复杂但容易忽略的是语义匹配——链接选 <a></a>，操作选 <button></button>，静态内容用 <li>。样式靠类驱动，结构靠语义支撑，这样既符合 Bootstrap 设计逻辑，也利于可访问性和维护性。
