在Angular应用中使用Bootstrap 5

Question

自从版本5起，Bootstrap框架已经将jQuery移除为必要组件。

我想知道这个变更对Angular应用有什么影响？

我们能在Angular中使用提供的所有Bootstrap功能吗（例如下拉菜单）？

我知道Angular不应与JQuery组合 - 在较早的Bootstrap版本中，如果要使用所有bootstrap功能，建议导入JQuery是不好的。

但是Bootstrap 5不再依赖于JQuery，所以在我的Angular应用程序中使用它是否安全？

目前我不想使用类似ng-bootstrap的bootstrap替代品，因此我想问是否可以在Angular中使用Bootstrap 5并且是安全的？

- Rocky3582

Answer 1

要安装 Bootstrap，只需使用

npm install bootstrap

并编辑 angular.json 文件

        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css", //<--add this line
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" //<--and this line
        ]

- Eliseo

---

这个方法起作用了！重要提示：你需要重新启动编译器（ng serve），这样才能让对 Angular.js 的更改生效。 - MikhailRatner

请注意，使用 bootstrap.bundle.min.js 您无需安装 poppers，但如果您使用 bootstrap.min.js，则需要安装。 - Cristian Sepulveda

对于所有想知道为什么这里没有“popper”js的人，它已经包含在捆绑包中了。因此，您不需要将popper添加到开发依赖项中，也不必在此处添加popper.js脚本。 - Welcor

Answer 2

步骤1： npm install bootstrap --save 步骤2：打开 src/style.css 将以下代码行添加到 style.css 中。

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

- Ufuk

Answer 3

是的，现在你可以使用它。你可以通过npm安装它，也可以在项目中包含CDN链接来使用它。

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

你还可以在这里查看将Bootstrap 5实现到Angular 11的过程。 - https://www.c-sharpcorner.com/article/add-bootstrap-5-in-angular-11/

- thelovekesh

---

ng-bootstrap是一种在没有JQuery依赖的情况下实现Bootstrap的方法。现在，Bootstrap已经移除了JQuery。这是否意味着ng-bootstrap现在没有意义了？ - Rocky3582

实际上，ng-bootstrap 的设计是不需要 jquery 就可以工作，这样用户就可以在没有 jquery 的情况下使用它。但现在 bootstrap 本身也可以不依赖于 jquery。所以完全取决于您自己选择哪种方法。 - thelovekesh

@LovekeshKumar，建议您安装Bootstrap并更改angular.json文件。 - Eliseo

Answer 4

首先需要安装Node Package Manager

然后在您的IDE终端中使用以下命令将Bootstrap安装到项目中。在Visual Studio Code中，可以通过点击CTRL + `或转到"View"菜单来打开终端。

使用以下命令将Bootstrap 5安装到您的项目中。

npm install bootstrap@next

然后必须导入该软件包以使Angular了解它。您可以通过在Angular.json文件中添加必要的指令来实现此目的。

然后将以下路径添加到CSS中。

"./node_modules/bootstrap/dist/css/bootstrap.min.css",

并在JS中添加以下内容

"./node_modules/bootstrap/dist/js/bootstrap.min.js"

您还可以添加popper JS。

使用以下NPM命令即可将popper.js添加到项目中。

npm install @popperjs/core

然后将指令添加到您的angular.json文件中

"./node_modules/@popperjs/core/dist/umd/popper.min.js"

这样您的angular.json文件就会像这样。

- Neil Meyer

Answer 5

在angular应用程序中安装bootstrap，请使用以下命令在终端中：

npm install bootstrap --save

现在打开 angular.json 文件，在 styles 部分中添加以下行。

 "../node_modules/bootstrap/dist/css/bootstrap.min.css",

就这些了。

- R15