执行该命令

npm install bootstrap@3

你Angular.json

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

如果你刚刚开始使用angular和bootstrap，那么简单的答案将如下步骤: 1. 添加节点包引导作为开发依赖

npm install --save bootstrap

在angular中导入引导样式表。json文件。 “风格”:( “项目/ app / src / styles.scss”, ”。/ node_modules /引导/ dist / css / bootstrap.min.css” ), 你已经准备好使用bootstrap进行样式化、网格化等。 >我的第一个bootstrap div</div>

我发现最好的部分是我们使用引导，没有任何第三方模块依赖。只要更新npm install——save bootstrap@4.4等命令，我们就可以随时升级引导程序。

做以下几点:

npm i bootstrap@next --save

这将为您的项目添加引导4。

接下来进入src/style。SCSS或src/style.css文件(选择你正在使用的任何一个)并导入bootstrap:

对于style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

对于style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

对于脚本，你仍然需要在angular-cli中添加文件。在Angular版本6中，这个编辑需要在Angular .json文件中完成:

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
],

好消息!基本上，Bootstrap 5现在可以很容易地实现，甚至不需要jQuery。 从您的终端运行

npm install bootstrap@next --save

因此，Angular在你的app.module中使用webpack。Ts，只要加上:

import "bootstrap";

或者如果你想分别导入它们，可以这样做:

import { ModuleToBeImported } from 'bootstrap';

然后是你的风格。scss,添加:

@import '~bootstrap/scss/bootstrap';

基本上就是这样，但是要注意一些组件需要popper.js。 需要bootstrap js的组件 在这里你也会看到依赖于popper.js的组件，在编写本文时，它们是用于显示和定位的下拉菜单，以及用于显示和定位的工具提示和弹出窗口。

因此，要安装popper.js，只需运行:

npm install @popperjs/core

参考

重要更新:ng2-bootstrap现在被ngx-bootstrap取代

ngx-bootstrap同时支持Angular 3和Angular 4。

更新:1.0.0-beta。11-webpack或以上版本

首先，在终端中使用以下命令检查你的angular-cli版本:

ng -v

如果你的angular-cli版本大于1.0.0-beta。11-webpack，那么你应该按照这些步骤:

安装ngx-bootstrap和bootstrap: NPM安装ngx-bootstrap——保存

这一行现在安装Bootstrap 3，但是将来可以安装Bootstrap 4。请记住，ngx-bootstrap支持这两个版本。

src / app / app.module开放。Ts和添加: import {AlertModule} from 'ngx-bootstrap'; .．. @NgModule ({ .．. import: [AlertModule.forRoot()，…), .．. }) angular-cli开放。Json(对于angar6及以后的文件名称更改为angular. Json。Json)，然后在styles数组中插入一个新条目: “风格”:( “styles”css, “. . / node_modules /引导/ dist / css / bootstrap.min.css” ), 打开src/app/ app.ponent .html，添加: <警报类型=“成功”> < /警报>你好

1.0.0-beta。10个或以下版本:

如果你的angular-cli版本是1.0.0-beta。10或以下，则可以使用以下步骤。

首先，进入项目目录并键入:

npm install ngx-bootstrap --save

然后，打开angular-cli-build.js并添加这一行:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

现在，打开src/system-config。然后写:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

,:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

安装助推器

NPM install -save bootstrap

然后我们需要导入Bootstrap Sass到我们的应用程序中。在风格。SCSS添加这一行:

@ import“. . / node_modules /引导/ scss / bootstrap.scss”;

欲了解更多信息…