Angular-cli现在有一个专门的wiki页面，在那里你可以找到你需要的一切。TLDR，通过npm安装bootstrap，并添加样式链接到你的。angular-cli中的“styles”部分。json文件

请执行以下步骤:

NPM install -save bootstrap 在你的。angular-cli中。添加到样式部分:

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

之后，必须重新启动ng服务

享受

重要更新: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'
  }
};

因为还没有人参考官方(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;

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

2个简单步骤

---

安装引导程序(正在安装最新版本)

---

npm install bootstrap@next

导入到你的项目中，在你的styles.scss中添加下面这行

---

@import '~bootstrap';

---

请注意您的导入顺序可能会有影响，如果您有其他库使用bootstrap，请将此import语句放在顶部

最后。：）

---

注:以下是我的版本

---

Angular: 9

节点:v10.16.0

NPM: 6.9.1

---

只需在index.html的Head标签中添加这三行

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>