首页 > 代码库 > 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