使用NPM安装引导程序

npm install boostrap@next --save

然后检查你的node_modules文件夹中的boostrap.css文件(在dist内)，通常路径是

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

在style.css或style.scss中添加此路径| import boostrap

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

就是这样。

好消息!基本上，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

参考

我猜上面的方法在发布后已经改变了，看看这个链接

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

启动项目

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

安装ng-bootstrap和bootstrap

npm install ng2-bootstrap bootstrap --save

src / app / app.module开放。Ts和add

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

angular-cli开放。并在样式数组中插入一个新条目

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

打开src/app/app.component.html并通过添加测试所有工作

<alert type="success">hello</alert>

做以下几点:

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"
],

因为还没有人参考官方(angular-cli团队)关于如何包含Bootstrap的故事:https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

包括引导

Bootstrap是一个流行的CSS框架，可以在Angular项目中使用。 本指南将带你向Angular CLI项目中添加bootstrap，并将其配置为使用bootstrap。

使用CSS

开始

创建一个新项目并导航到该项目

ng new my-app
cd my-app

安装引导

创建好新项目后，接下来需要将bootstrap作为依赖项安装到项目中。 使用——save选项，依赖将被保存在package.json中

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

配置项目

现在项目已经设置好了，必须将其配置为包含引导CSS。

打开.angular-cli文件。Json从你的项目根。 在属性apps下，数组中的第一项是默认应用程序。 有一个属性styles允许外部全局样式应用到你的应用程序。 指定bootstrap.min.css的路径

当你完成时，它看起来应该如下所示:

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

注意:当你对.angular-cli进行更改时。Json，你将需要重新启动ng serve来获取配置更改。

测试项目

打开app.component.html并添加以下标记:

<button class="btn btn-primary">Test Button</button>

配置好应用程序后，运行ng serve以开发模式运行应用程序。 在浏览器中导航到应用程序localhost:4200。 验证是否出现引导样式的按钮。

使用萨斯

开始

创建一个新项目并导航到该项目

ng new my-app --style=scss
cd my-app

安装引导

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

配置项目

创建一个空文件_variables。src/中的SCSS。

如果你正在使用bootstrap-sass，在_variables.scss中添加以下内容:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

在风格。SCSS添加以下内容:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

测试项目

打开app.component.html并添加以下标记:

<button class="btn btn-primary">Test Button</button>

配置好应用程序后，运行ng serve以开发模式运行应用程序。 在浏览器中导航到应用程序localhost:4200。 验证是否出现引导样式的按钮。 为了确保你的变量被使用，打开_variables。并添加以下内容:

$brand-primary: red;

返回浏览器查看字体颜色的更改。

你也可以观看Mike Brocchi的这段视频，其中有关于如何在Angular-Cli生成的项目中添加引导的有用信息。 https://www.youtube.com/watch?v=obbdFFbjLIU(约13:00分)