应使用 @ng-bootstrap/ng-bootstrap 替代原生 Bootstrap JS，它兼容 Angular 变更检测与生命周期，需手动安装、引入 Bootstrap CSS 和 bootstrap-icons 字体文件，并避免 jQuery 冲突。
别直接用 Bootstrap 原生 JS 插件 —— 它和 Angular 的变更检测、组件生命周期、DOM 管理机制天然冲突，95% 的“样式有了但下拉/模态框不响应”问题都源于此。
用 @ng-bootstrap/ng-bootstrap 替代原生 Bootstrap JS
这是现代 Angular 项目（v14+）唯一推荐的集成路径。它不依赖 jQuery，所有组件（NgbModal、NgbDropdown、NgbTooltip）都通过 @Input/@Output 和 Angular 生态原生对接。
- 先装依赖：
npm install @ng-bootstrap/ng-bootstrap（ng add @ng-bootstrap/ng-bootstrap在 v17+ 经常失败，手动装更稳） - 确保已安装
@angular/localize：ng add @angular/localize（哪怕不用多语言，它也是 ng-bootstrap 的 peer 依赖） - 在根模块（
AppModule）中导入：NgBootstrapModule.forRoot()；若用 Standalone Components，则改用provideNgbModal()等函数注入 - 别在模板里写
<div data-toggle="modal"> —— 这是原生 Bootstrap 写法，Angular 里必须用 <code>this.modalService.open(MyComponent)Bootstrap CSS 必须单独引入，且只引
bootstrap.min.css@ng-bootstrap只提供逻辑，不带样式。你得自己把 Bootstrap 的 CSS 加进构建流程，否则按钮没圆角、下拉菜单无背景。- 在
angular.json的projects.<your-name>.architect.build.options.styles</your-name>数组里加一行："node_modules/bootstrap/dist/css/bootstrap.min.css" - 绝对不要引入
bootstrap.bundle.min.js或任何含 jQuery 的 JS 文件 —— 它会和@ng-bootstrap报冲突，控制台出现Cannot read property 'top' of undefined就是典型症状 - 检查是否被其他 CSS 框架（如 Tailwind）重置规则覆盖：比如
.btn类被all: unset干掉了，这时要调高 Bootstrap CSS 的加载顺序或加!important（临时调试用）
bootstrap-icons要配对引入字体文件路径只运行
npm install bootstrap-icons不会生效 —— Angular 构建系统根本不知道该加载哪个 CSS 文件。- 安装命令：
npm install bootstrap-icons --save - 在
angular.json的同个styles数组里，再加一行："node_modules/bootstrap-icons/font/bootstrap-icons.css" - 图标使用示例：
<i class="bi bi-search"></i>，注意类名前缀是bi，不是glyphicon或fa - 如果图标显示为方块，大概率是字体文件没加载成功，检查浏览器 Network 面板里有没有 404 的
bootstrap-icons.woff2
最容易被忽略的一点：Angular 的
ViewEncapsulation默认是Emulated，而 Bootstrap CSS 是全局作用域的。如果你在某个组件里写了.btn { color: red }，它不会覆盖bootstrap.min.css里的.btn，因为后者优先级更高 —— 这不是 bug，是设计使然，需要靠 CSS specificity 或::ng-deep（不推荐）来处理定制样式。 - 在
