如何在Angular 2项目中使用Bootstrap css Library?

我开始我的第一个Angular2应用程序,我的基本设置完成。

我如何添加引导CSS库到我的Angular2项目?

如果你可以提供一个例子,那么这将是一个很大的帮助。

如果您使用Angular-CLI生成新项目,还有另一种方法可以在Angular 2/4中使用引导程序。

  1. 通过命令行界面导航到项目文件夹。 然后使用npm安装bootstrap:
    $ npm install --save bootstrap--save选项将使引导出现在依赖关系中。
  2. 编辑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)服务

  1. npm install –save bootstrap
  2. 转到 – > angular-cli.json文件,find样式属性,然后添加下一个sting:“../node_modules/bootstrap/dist/css/bootstrap.min.css”,它可能看起来像这样:

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