Bootstrap 在 angular 中未正确应用

Question

我正在尝试一些非常简单的方法来理解发生了什么：

我用 ng new
设置好项目的配置后，我用npm i bootstrap
我知道有很多方法可以将 bootstrap 添加到项目中。我正在使用将以下代码添加到 styles.scss 文件的方法： @import '~bootstrap/scss/bootstrap'; （我也尝试将依赖项添加到 angular.json 文件）

我正在尝试创建带有深色 header (thead-dark) 的 table，并且正在创建 table，但未应用主题。

预期结果

实际结果

Answer 1

npm i bootstrap 将为您安装最新版本的 Bootstrap，即 5。Bootstrap 5 不包括 thead-dark class，这就是为什么您的header 没有变暗。

因为你使用的是 Bootstrap 5 你应该使用 table-dark class 而不是 thead-dark.

<table class="table">
  <thead class="table-dark"> <!-- change this -->
    <!-- -->
  </thead>
  <tbody>
    <!-- -->
  </tbody>
</table>

如果您需要 Bootstrap 4，请查看此博客教程以获取安装指南 Angular 10 with Bootstrap 4

Bootstrap not being applied properly in angular