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参考网址
|