问题

我已经使用以下命令在Angular中设置了Bootstrap，基于[ng-bootstrap.github.io文档][1]：
```shell
ng new my-ng-bootstrap-app # 创建Angular应用。选择路由和SCSS选项
ng add @ng-bootstrap/ng-bootstrap # 添加Bootstrap（请参阅本答案底部有关如何将Bootstrap添加到应用程序的说明）
ng generate component my-flex # 创建一个新组件以测试Bootstrap的弹性样式
ng serve # 运行Angular服务器

（我在这里详细说明了完整的设置方法 https://stackoverflow.com/a/75039099/11664580）

这使我可以使用Bootstrap小部件，但当我尝试以传统方式使用Bootstrap时，什么也不会发生 - 例如：

      <button type="button" class="btn btn-primary">
        我的按钮
      </button>

上面的代码不会应用任何样式，尽管我已按照ng-bootstrap的说明进行了设置。

将Bootstrap样式应用于我的Angular应用的最佳方法是什么？我通过简单地在app.component.html中添加一个带有href的link元素来使其工作：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

或者我应该遵循其他建议，通过npm install bootstrap进行安装？

<details>
<summary>英文:</summary>

I&#39;ve set up Bootstrap with Angular using the following commands, based on the [ng-bootstrap.github.io docs][1]:
```shell
ng new my-ng-bootstrap-app # Create angular app. Choose routing and SCSS options
ng add @ng-bootstrap/ng-bootstrap # add bootstrap (see notes at bottom of this answer for how bootstrap is added to app)
ng generate component my-flex # Create a new component to test bootstrap&#39;s flex styles
ng serve # Run the Angular server

(I've detailed the full set-up method here https://stackoverflow.com/a/75039099/11664580)

This allows me to use bootstrap widgets, but when I try to use Bootstrap conventionally, nothing happens - eg:

      <button type="button" class="btn btn-primary">
        My Button
      </button>

The above doesn't apply any styles, even though I have set up as per the ng-bootstrap instructions.

What's the best way to apply bootstrap styles to my Angular app? I've got it working by simply adding a link element with the href to my app.component.html:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Or should I follow other guidance and install with npm install bootstrap?

答案1

得分: 1

如果你正在使用```npm install bootstrap```进行安装，
然后在```angular.json```文件中搜索

styles 并添加路径，如下所示...

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

你可以从```node_module > bootstrap > dist > css > bootstrap.min.css```复制相关路径，或者你可以复制```node_module > bootstrap > dist > css > bootstrap.css```。

在```angular.json```中有2个styles，在两个styles中都添加路径。

然后应该可以正常工作，我猜。

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