1、检查@angular/cli版本
命令行 ng -v ，版本号必须大于1.0.0-beta.24
2、新建工程
工程所在目录，命令行 ng new my-app --style=scss 带style参数原因：ng-bootstrap要求使用scss
3、安装bootstrap
cd my-app 进入工程目录
cnpm install @ng-bootstrap/ng-bootstrap bootstrap@next --save 安装ng-bootstrap和bootstrap
4、添加bootstrap.min.css引用
工程目录下，打开.angular-cli.json文件，在styles中添加bootstrap.min.css引用
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css", 此行为新添加
"styles.scss"
]
5、src目录下，新建 _variables.scss 文件
6、在styles.scss文件中添加如下内容
@import 'variables';
@import 'node_modules/bootstrap/scss/bootstrap';
7、/src/index.html文件中添加使用BS4标记
<body>
<!-- Enable bootstrap 4 theme -->
<script>window.__theme = 'bs4';</script>
<app-root> </app-root>
</body>
8、AppModule类中引用NgbModule
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [
NgbModule.forRoot()
],
})
export class AppModule { }
9、添加模板
在app.component.html中添加如下内容
<p>
<ngb-alert type="success" [dismissible]="false">
<strong>Success!</strong> Good work.
</ngb-alert>
</p>
10、验证
工程目录下，命令行 cnpm start 启动工程，浏览器中查看结果
11、 ng-bootstrap API参考网址
查看更多关于003Angular2中使用ng-bootstrap的详细内容...