Bootstrap列表组提供结构化、样式统一的垂直项目列表，支持活动项、禁用项、扁平化、水平排列及徽章嵌入，具备开箱即用、无障碍友好等优点，但深度定制难、水平布局旧版支持弱、复杂嵌套易错位。
如果您希望在网页中以结构化、样式统一的方式展示一组相关项目，Bootstrap列表组（List Group）提供了一种简洁高效的实现方式。以下是关于其具体使用方法及优缺点的说明：
一、基本用法
Bootstrap列表组通过预定义的CSS类快速构建语义清晰、视觉一致的垂直项目列表，适用于导航菜单、通知项、用户列表等场景。其核心依赖于容器元素与列表项的特定类名组合。
1、使用<ul>或<ol>作为外层容器，并添加.list-group类。
2、为每个列表项（<li>）添加.list-group-item类。
3、确保引入了Bootstrap 5的CSS文件（如bootstrap.min.css），否则样式无法生效。
二、设置活动项与禁用项
通过添加状态类可直观标识当前选中项或不可交互项，提升用户操作反馈的明确性。
1、为当前激活的列表项添加.active类，该元素将呈现高亮背景色与白色文字。
2、为不可点击或不可用的列表项添加.disabled类，该元素将变为灰色并失去鼠标悬停效果与焦点响应。
三、移除边框与圆角
默认列表组带有外边框和圆角，若需嵌入卡片、模态框等容器内实现无缝衔接，可启用扁平化样式。
1、在外层<ul>或<ol>上同时添加.list-group和.list-group-flush类。
2、此时所有列表项将取消左右边框、顶部/底部边框及圆角，仅保留上下间距分隔。
四、水平排列列表项
当需要将列表项横向排布（如工具栏、标签页导航），可借助栅格系统或内联类实现布局转向。
1、为<ul>添加.list-group-horizontal类（Bootstrap 5.3+支持）。
2、或配合栅格类：将每个<li>包裹在<div class="col">中，并将<ul>置于<div class="row">内。
五、添加徽章与自定义内容
列表项支持嵌套任意HTML结构，便于附加状态标识、图标或交互控件。
1、在.list-group-item内部插入<span class="badge bg-primary rounded-pill">新</span>，实现右对齐徽章。
2、可嵌入按钮、链接、小图标（如Bootstrap Icons）、甚至表单控件，但需注意内边距与垂直对齐。
六、优点分析
Bootstrap列表组具备开箱即用的样式一致性，无需额外编写CSS即可获得跨浏览器兼容的视觉表现；支持无障碍属性自动注入（如role="list"与role="listitem"）；所有状态类（active/disabled）均适配深色模式；组件轻量，仅依赖CSS，无JavaScript强制要求；与Bootstrap其他组件（如卡片、模态框）天然协同。
七、缺点分析
默认样式灵活性受限，深度定制需覆盖大量CSS变量或重写选择器；水平列表在旧版Bootstrap中缺乏原生支持，需手动处理换行与对齐；列表项内嵌复杂结构时，垂直居中与行高控制易出现偏差；不提供内置键盘导航逻辑（如方向键切换焦点），需开发者自行增强；徽章与图标未预设尺寸缩放规则，多层级嵌套时可能出现溢出或截断。
