Bootstrap无原生通知中心，需用.list-group等组件组合实现；须自定义.is-read类替代.active，用<button>和ARIA属性保障可访问性；徽章应置于入口按钮内并同步数据源；展开收起需补全键盘与触屏交互逻辑。
Bootstrap 本身没有“通知中心”组件，所谓精美通知中心必须自己组合 .list-group、.toast、图标、状态标记和 JavaScript 状态管理——原生只提供零件，不提供装配图。
用 .list-group 做通知列表结构，但别直接套 .active
通知列表本质是“可读、可操作、可标记已读”的消息集合，不是导航或当前页高亮。直接复用 .list-group-item.active 会误导语义（.active 在 Bootstrap 中表示“当前项”，比如当前标签页），且视觉上和“已读/未读”无区分。
- 改用自定义类名，例如
.notification-read或.is-read，配合 CSS 控制透明度、字体粗细或左侧边框颜色 - 每条通知项内部建议嵌套
<button type="button">而非<a>，避免跳转干扰；必须加role="alert"或aria-live="polite"支持屏幕阅读器 - 如果通知带时间戳，用
<small class="text-muted">包裹，并确保其font-size不随父级缩放异常（Bootstrap 5 默认 small 是 0.875em，够用） - 动态加载时，别对每个新
.list-group-item单独绑定 click 事件——用事件委托监听.list-group容器，否则内存泄漏风险高
未读数徽章（.badge）位置与更新逻辑容易错
右上角红点徽章看着简单，但实际常出问题：位置偏移、数量不同步、隐藏后残留 DOM。
- 徽章必须放在通知入口按钮内（如顶部导航栏的铃铛图标旁），不要挂到
.list-group容器上——否则点击展开列表后，徽章位置会随滚动错乱 - 更新未读数不能只靠 JS 变量累加，要从真实数据源出发：比如后端返回的
unread_count字段，或前端遍历所有.list-group-item:not(.is-read)的数量 - 清空全部通知时，别只删 DOM 元素——要同步移除
.is-read类、重置徽章文本、并调用aria-live区域播报“已清除全部通知” - 徽章使用
.bg-danger+.rounded-pill即可，无需额外写 border-radius；但若需小尺寸（如 14px 高），得手动设font-size: 0.625rem; padding: 0.125rem 0.375rem;
通知收起/展开交互必须补 JS，且要考虑键盘与触屏
Bootstrap 的 .collapse 可以做展开收起，但默认不处理“点击通知项后自动收起面板”或“ESC 键关闭”这类细节。
- 用
data-bs-toggle="collapse"搭配.collapse容器是基础，但需额外监听click事件：点击任意通知项后，调用bootstrap.Collapse.getInstance(el).hide()主动收起 - 必须支持键盘：给通知入口按钮加
tabindex="0"，按 Space/Enter 触发展开；面板内用tabindex="-1"确保首次聚焦在第一个通知项 - 移动端点击穿透问题常见：如果通知项里有
<button>，又在外层<div class="list-group">上绑了展开逻辑，一次点击可能同时触发两个事件——用e.stopPropagation()在通知项 handler 里拦截 - 不要依赖
:hover显示操作按钮（如“标记为已读”）：触屏设备无 hover，应默认显示或用长按触发
真正难的不是样式是否“精美”，而是未读状态在多端（网页、PWA、后台同步）之间如何保持一致；一个没被 fetch() 标记为已读的通知，在另一个标签页里点开后，本页的徽章却没变——这种场景下，CSS 再漂亮也没用。
