在bash中运行npm install ng2-bootstrap bootstrap——save 在angular-cli.json中添加/更改以下内容 “风格”:( “. . / node_modules /引导/ dist / css / bootstrap.min.css” ), “脚本”:( “. . / node_modules / jquery / dist / jquery.min.js”, “. . / node_modules /引导/ dist / js / bootstrap.min.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;

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

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

欲了解更多信息…

在bash中运行npm install ng2-bootstrap bootstrap——save 在angular-cli.json中添加/更改以下内容 “风格”:( “. . / node_modules /引导/ dist / css / bootstrap.min.css” ), “脚本”:( “. . / node_modules / jquery / dist / jquery.min.js”, “. . / node_modules /引导/ dist / js / bootstrap.min.js” ),

安装引导程序，popper.js

NPM install -save bootstrap 保存popper.js

在src/styles.css中导入bootstrap的样式

@import '~bootstrap/dist/css/bootstrap.min.css';