首页 > 代码库 > 003Angular2中使用ng-bootstrap
003Angular2中使用ng-bootstrap
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