1、通過angular-cli創(chuàng)建項目
ng new my-app
2、加入bootstrap,ng2-bootstrap包
npm install ng2-bootstrap bootstrap@next --save
這里使用@next引用bootstrap4
3供搀、引入bootstrap樣式文件
打開src下的styles.css在其中加入以下代碼，樣式導入語法請看這里：
@import url('../node_modules/bootstrap/dist/css/bootstrap.css');
在官方文檔里說是在angular-cli.json下加入以下代碼：
"styles": ["styles.css","../node_modules/bootstrap/dist/css/bootstrap.min.css"],
但是經(jī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、編碼
打開src/app/app.module.ts加入以下代碼：
import{AlertModule}from'ng2-bootstrap';
...
@NgModule({
...
imports: [AlertModule.forRoot(),...],
...
})
打開src/app/app.component.html加入以下代碼：
<alert type="success">hello</alert>
5姑躲、運行
ng serve
在瀏覽器里運行http://localhost:4200查看效果
總結：
1睡扬、當時看著官方文檔，只想著在angular-cli.json中加入styles數(shù)組黍析，但是一直都沒有效果威蕉，這是個坑啊，具體為何橄仍，不知韧涨。
2牍戚、在這里雖然能查看出效果，但是在safari中會報找不到bootstrap.css.map文件（404）虑粥，通過ng build --prod如孝，然后使用http-server運行，問題解決娩贷。
http-server用法第晰，請看這里。
