如何将Bootstrap 4与Angular 7集成？

Question

如何在使用Angular 7 CLI生成的Angular 7项目中正确集成Bootstrap 4（包括样式和jQuery依赖项）？

Answer 1

您在这里，

第一位：npm install bootstrap --save

然后将其粘贴到angular.json内的"styles"文件内

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

就是这样。运行该应用程序，您应该会看到Bootstrap 4样式已应用于有角度的应用程序

Answer 2

首先安装bootstrap，例如通过npm

npm install bootstrap --save

然后在css文件的styles部分中包含引导angular.json文件。

如果您需要提供某种形式的交互处理（模式，选项卡等）的模态或其他引导程序组件，还请在Javascript部分中包含相应的scripts文件。

angular.json

{
  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.slim.js",
    "node_modules/popper.js/dist/umd/popper.js",
    "node_modules/bootstrap/js/dist/util.js",
    "node_modules/bootstrap/js/dist/alert.js",
    "node_modules/bootstrap/js/dist/button.js",
    "node_modules/bootstrap/js/dist/carousel.js",
    "node_modules/bootstrap/js/dist/collapse.js",
    "node_modules/bootstrap/js/dist/dropdown.js",
    "node_modules/bootstrap/js/dist/modal.js",
    "node_modules/bootstrap/js/dist/scrollspy.js",
    "node_modules/bootstrap/js/dist/tab.js",
    "node_modules/bootstrap/js/dist/tooltip.js",
    "node_modules/bootstrap/js/dist/popover.js"
  ]
}

最后，当您运行ng build --prod时，所有脚本和样式都会在dist文件夹中创建和缩小。

dist文件夹

Answer 3

在将引导程序安装到项目中之后，您可以轻松地在主要样式中导入引导程序。

npm install bootstrap --save

然后将引导程序导入您的styles.scss中：

@import '../../node_modules/bootstrap/scss/bootstrap';

如果您要覆盖引导程序样式或创建新主题，这是最好的方法。

Answer 4

请使用ng-bootstrap，它们提供了与angular良好的自举集成。另外，还有完整的手册介绍如何正确进行操作。

注意：以上手册均无效，不应在生产环境中使用。

这也是演示页面：https://ng-bootstrap.github.io/#/home