如何在Angular 2项目中使用Bootstrap css Library？
我开始我的第一个Angular2应用程序，我的基本设置完成。
我如何添加引导CSS库到我的Angular2项目？
如果你可以提供一个例子，那么这将是一个很大的帮助。
如果您使用Angular-CLI生成新项目，还有另一种方法可以在Angular 2/4中使用引导程序。
- 通过命令行界面导航到项目文件夹。 然后使用npm安装bootstrap：
$ npm install --save bootstrap。--save选项将使引导出现在依赖关系中。 - 编辑configuration项目的.angular-cli.json文件。 它在项目目录中。 添加对
"styles"数组的引用。 引用必须是与npm一起下载的引导文件的相对path。 在我的情况下是："../node_modules/bootstrap/dist/css/bootstrap.min.css",
我的例子.angular-cli.json：
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "bootstrap-test" }, "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "lint": [ { "project": "src/tsconfig.app.json" }, { "project": "src/tsconfig.spec.json" }, { "project": "e2e/tsconfig.e2e.json" } ], "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "component": {} } }
现在bootstrap应该是你的默认设置的一部分。
通过ng2-bootstrap项目也可以与Angular2集成： https ： //github.com/valor-software/ng2-bootstrap 。
要安装它，只需将这些文件放在主HTML页面中：
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/xxx/ng2-bootstrap.min.js"></script> <link href="ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
那么你可以用这种方式把它用到你的组件中：
import {Component} from 'angular2/core'; import {Alert} from 'ng2-bootstrap/ng2-bootstrap'; @Component({ selector: 'my-app', directives: [Alert], template: `<alert type="info">ng2-bootstrap hello world!</alert>` }) export class AppComponent { }
所有你需要做的是在你的index.html文件中包含boostrap CSS。
<link href="ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
另一个非常好的（更好的）select是使用由angular-ui团队创build的一组小部件： https ： //ng-bootstrap.github.io
如果你打算使用在这个线程中提到的angular-ui团队的ng-bootstrap所需的Bootstrap 4，你将会想使用它（注意：你不需要包含JS文件）：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
你也可以在运行npm install bootstrap@4.0.0-alpha.6 --save之后在本地引用这个npm install bootstrap@4.0.0-alpha.6 --save通过指向你的styles.scss文件中的文件来styles.scss ，假设你正在使用SASS：
@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
最stream行的select是使用一些第三方库作为npm包分发，如ng2-bootstrap项目https://github.com/valor-software/ng2-bootstrap或Angular UI Bootstrap库。
我个人使用ng2-bootstrap。 有很多方法来configuration它，因为configuration取决于你的Angular项目的构build方式。 下面我发布基于Angular 2 QuickStart项目https://github.com/angular/quickstart的示例configuration
首先我们在package.json中添加依赖项
{ ... "dependencies": { "@angular/common": "~2.4.0", "@angular/compiler": "~2.4.0", "@angular/core": "~2.4.0", ... "bootstrap": "^3.3.7", "ng2-bootstrap": "1.1.16-11" }, ... }
然后，我们必须将名称映射到systemjs.config.js中的正确URL
(function (global) { System.config({ ... // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', //bootstrap 'moment': 'npm:moment/bundles/moment.umd.js', 'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' }, ... }); })(this);
我们必须在index.html中导入bootstrap .css文件。 我们可以从我们硬盘上的/ node_modules / bootstrap目录得到它（因为我们添加了bootstrap 3.3.7 dependency）或者从web上获取它。 在那里我们从网上获得它：
<!DOCTYPE html> <html> <head> ... <link href="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> ... </head> <body> <my-app>Loading...</my-app> </body> </html>
我们应该从/ app目录编辑我们的app.module.ts文件
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; //bootstrap alert import part 1 import {AlertModule} from 'ng2-bootstrap'; import { AppComponent } from './app.component'; @NgModule({ //bootstrap alert import part 2 imports: [ BrowserModule, AlertModule.forRoot() ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
最后是/ app目录下的app.component.ts文件
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <alert type="success"> Well done! </alert> ` }) export class AppComponent { constructor() { } }
然后，在运行我们的应用程序之前，我们必须安装bootstrap和ng2-bootstrap依赖项。 我们应该去我们的项目目录并input
npm install
最后我们可以启动我们的应用
npm start
在ng2-bootstrap项目github上有很多代码示例，展示了如何将ng2-bootstrap导入到各种Angular 2项目构build中。 甚至还有plnkr样品。 Valor软件（库的作者）网站也有API文档。
在angular度环境下，我find的最简单的方法是：
1.在scss样式表的环境中的解决scheme
npm install bootstrap-sass —save
在style.scss中：
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'; @import '~bootstrap-sass/assets/stylesheets/bootstrap';
注1： ~字符是对nodes_modules文件夹的引用。
注2：因为我们正在使用scss，所以我们可以自定义所有我们想要的boostrapvariables。
2.在具有CSS样式表的环境中解决问题
npm install bootstrap —save
在style.css中：
@import '~bootstrap/dist/css/bootstrap.css';
我有同样的问题，并find了一个非常干净的解决scheme这篇文章：
http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/
以下是说明，但使用我的简化解决scheme：
安装Bootstrap 4（ 说明 ）：
npm install --save bootstrap@4.0.0-alpha.6
如果需要，将src / styles.css重命名为styles.scss并更新.angular-cli.json以反映更改：
"styles": [ "styles.scss" ],
然后将这一行添加到styles.scss ：
@import '~bootstrap/scss/bootstrap';
只需检查你的package.json文件并添加引导的依赖关系
"dependencies": { "bootstrap": "^3.3.7", }
然后在.angular-cli.json文件中添加下面的代码
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ],
最后你只需使用terminal在本地更新你的npm
$ npm update
我正在寻找相同的答案，最后我find了这个链接。 你可以find解释三种不同的方式如何将引导CSS添加到您的angular2项目。 它帮助了我。
这里是链接： http : //codingthesmartway.com/using-bootstrap-with-angular/
你可以尝试使用Prettyfox UI库http://ng.prettyfox.org
这个库使用引导4种风格，不需要jquery。
在你的html页面中添加下面几行
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/xxx/ng2-bootstrap.min.js"></script> <link href="ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
如果你使用angular度cli，在package.json中joinbootstrap并安装包之后，你只需要将boostrap.min.cssjoin到.angular-cli.json的“styles”部分。
一个重要的事情是“当你修改.angular-cli.json时，你将需要重新启动服务来获取configuration更改。”
参考：
https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
另一个非常好的select是使用骨架Angular 2/4 + Bootstrap 4
1）下载ZIP并解压zip文件夹
2）服务
- npm install –save bootstrap
-
转到 – > angular-cli.json文件，find样式属性，然后添加下一个sting：“../node_modules/bootstrap/dist/css/bootstrap.min.css”，它可能看起来像这样：
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
