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是否可以并且安全？

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
        ]

Answer 2

步骤1：npm install bootstrap --save

第 2 步：打开src/style.css

将以下代码行添加到 style.css

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

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>

您还可以在此处检查 Angular 11 中 Bootstrap 5 的实现。- https://www.c-sharpcorner.com/article/add-bootstrap-5-in-angular-11/