1、通過(guò)angular-cli創(chuàng)建項(xiàng)目

ng new my-app

2、加入bootstrap,ng2-bootstrap包

npm install ng2-bootstrap bootstrap@next --save

這里使用@next引用bootstrap4

3、引入bootstrap樣式文件

打開(kāi)src下的styles.css在其中加入以下代碼，樣式導(dǎo)入語(yǔ)法請(qǐng)看這里：

@import url('../node_modules/bootstrap/dist/css/bootstrap.css');

在官方文檔里說(shuō)是在angular-cli.json下加入以下代碼：

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

但是經(jīng)過(guò)我測(cè)試，始終沒(méi)有效果，原文請(qǐng)看這里

我這里是angular-cli版本如下：

angular-cli: 1.0.0-beta.24

node: 6.9.1

os: darwin x64

@angular/common: 2.4.2

@angular/compiler: 2.4.2

@angular/core: 2.4.2

@angular/forms: 2.4.2

@angular/http: 2.4.2

@angular/platform-browser: 2.4.2

@angular/platform-browser-dynamic: 2.4.2

@angular/router: 3.4.2

@angular/compiler-cli: 2.4.2

4、編碼

打開(kāi)src/app/app.module.ts加入以下代碼：

import{AlertModule}from'ng2-bootstrap';

...

@NgModule({

...

imports: [AlertModule.forRoot(),...],

...

})

打開(kāi)src/app/app.component.html加入以下代碼：

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

5、運(yùn)行

ng serve

在瀏覽器里運(yùn)行http://localhost:4200查看效果

總結(jié)：

1、當(dāng)時(shí)看著官方文檔，只想著在angular-cli.json中加入styles數(shù)組，但是一直都沒(méi)有效果，這是個(gè)坑啊，具體為何，不知。

2、在這里雖然能查看出效果，但是在safari中會(huì)報(bào)找不到bootstrap.css.map文件（404），通過(guò)ng build --prod，然后使用http-server運(yùn)行，問(wèn)題解決。

http-server用法，請(qǐng)看這里。