Bootstrap 在 Angular 中不起作用 - Javascript

最近你发现你在 Angular 应用程序中使用的 Bootstrap CSS 框架不起作用了？这可能是因为 Bootstrap 样式在 Angular 中会与自定义样式发生冲突，导致样式丢失或覆盖。这篇文章将介绍如何解决这个问题。

解决方案

使用 ng-bootstrap

nb-bootstrap 是由 Angular 团队开发的一个基于 Bootstrap 的 UI 库，它可以在 Angular 应用程序中提供原生 Bootstrap 样式和组件，并且具有更好的对 Angular 生态系统的支持。使用 ng-bootstrap 可以解决许多常见的 Bootstrap 样式问题。下面是如何在 Angular 应用程序中使用 ng-bootstrap 的简单步骤：

1. 安装 ng-bootstrap

   npm install --save @ng-bootstrap/ng-bootstrap
   

2. 在 app.module.ts 文件中导入 NgbModule

   import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
     imports: [NgbModule],
     // ...
   })
   export class AppModule {}
   

3. 在需要的组件上使用 ng-bootstrap 组件

   <ngb-alert>Alert!</ngb-alert>
   

解决样式冲突

如果你决定使用原生的 Bootstrap 样式而不是 ng-bootstrap，你需要使用以下方法解决样式冲突问题：

1. 在 angular.json 文件中修改样式文件加载顺序

   "styles": [
     "src/styles.css",
     "node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
   

   确保 Bootstrap 样式在自定义样式之后加载。

2. 使用 ::ng-deep

   在你的组件 CSS 文件中使用 ::ng-deep 来覆盖 Bootstrap 样式。

   ::ng-deep .btn {
     font-weight: bold;
   }
   

   注意：::ng-deep 已被标记为废弃方法，请使用 /deep/ 或 >>> 代替。

3. 安装 bootstrap-sass

   如果你希望使用 Sass 来编写自定义样式，可以安装 bootstrap-sass 命令行工具，这个工具可以让你重新编译 Bootstrap 样式表，以便使用自定义变量。

   npm install -g bootstrap-sass
   

   $bootstrap-sass assets/stylesheets/custom.scss assets/stylesheets/bootstrap.css
   

   自定义样式应该在 Bootstrap 样式之后加载。

结论

以上是两种解决 Bootstrap 在 Angular 中不起作用的方法。如果你使用 ng-bootstrap，你可以更好地利用 Angular 和 Bootstrap 的强大功能。如果你喜欢原生 Bootstrap 样式，你需要注意样式冲突问题并使用重新编译的 Bootstrap 样式表。