Bootstrap本身不提供消息通知下拉列表组件，但可用dropdown容器+自定义结构实现：外层.dropdown控制展开/收起，.dropdown-menu设固定高+滚动，.dropdown-item内自由嵌套内容并用.unread类管理未读状态，点击后仅移除类名、手动调用hide()确保收起，需注意移动端事件穿透与状态同步。
Bootstrap 本身不提供「消息通知下拉列表」的现成组件，但可以用 dropdown 容器 + 自定义结构快速实现一个轻量、可交互的通知面板——关键不是套插件，而是控制好状态同步、滚动行为和点击标记逻辑。
用 dropdown 容器包裹通知列表，别用 select 或 multiple
很多人第一反应是给 select 加 multiple，这完全走偏：通知列表不是表单控件，它需要自定义项结构（头像、时间、未读角标）、支持点击收起、还要能标记已读。正确做法是用 Bootstrap 原生的 dropdown 结构：
-
dropdown外层容器负责定位和展开/收起逻辑 -
dropdown-menu作为内容区，设固定高度 +overflow-y-auto实现内部滚动（避免整个页面被撑开） - 每个通知项用
dropdown-item，但内部可自由嵌套div、img、small等，不受表单限制 - 绝对不要在通知区域里放
form或input，否则dropdown的 click 关闭逻辑会意外中断
标记「未读」状态要靠 class 控制，别依赖 JS 动态增删 DOM
通知角标、加粗、背景色变化等视觉反馈，应该通过添加 unread 类 + CSS 规则完成，而不是每次点击都用 JS 插入新元素或删掉旧节点。这样既稳定又利于性能：
- 初始加载时，后端返回每条通知带
is_read: false字段，前端渲染时直接加class="dropdown-item unread" - CSS 中定义：
.dropdown-item.unread { font-weight: 600; position: relative; }，再用::after画红点角标 - 点击某条通知后，只执行
element.classList.remove('unread')，不重绘整块列表 - 清空全部未读？批量操作 DOM 类名比重新渲染 HTML 快得多
点击通知后自动收起 dropdown，但得防住「点击内部链接不关闭」的坑
默认情况下，点击 dropdown-item 里的 a 标签会触发跳转，但也会让 dropdown 收起——这没问题；但如果链接是 href="#" 或用 event.preventDefault() 拦截了，默认收起逻辑就失效了。解决方法很直接：
- 确保所有通知项的可点击区域是
<a href="..."></a>或带role="button"的div，别用裸span+ click 监听 - 如果必须用 JS 处理点击（比如标记已读 + 弹窗），手动调用
bootstrap.Dropdown.getInstance(el).hide()，其中el是外层dropdown容器 - 千万别在
dropdown-menu内部监听click后再stopPropagation()—— 这会彻底禁掉 Bootstrap 的关闭机制
移动端点击空白处不关闭？检查 data-bs-auto-close 和 backdrop
在 iOS 或部分 Android WebView 中，点 dropdown 外区域有时不收起，常见原因是：
- Bootstrap 5 默认
data-bs-auto-close="true"，但如果父容器有position: fixed或用了第三方弹窗库，事件冒泡可能被截断 - 没引入
bootstrap.bundle.min.js（缺 Popper），导致 dropdown 的定位和关闭逻辑不完整 - 页面上有其他
pointer-events: none层覆盖在 dropdown 下方，比如全屏 loading 遮罩没正确移除 - 临时验证方法：在控制台执行
document.querySelector('.dropdown').click()，看是否能触发收起——如果能，说明是事件穿透问题；如果不能，大概率是 JS 加载不全
真正难的不是结构搭建，而是通知状态与 UI 的一致性维护：比如用户在另一个标签页已读某条，当前页如何感知？这类问题没法靠 Bootstrap 解决，得结合 WebSocket 或定时轮询做状态对齐。
