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

      

  • 相关阅读:
    Linux下fork机制详解(以PHP为例)
    查看Nginx、PHP、Apache和MySQL的编译参数
    MySQL更新
    Map集合的四种遍历方式
    Selenium2工作原理
    Web自动化测试框架-PO模式
    jmeter(十二)处理Cookie与Session
    java 字符串截取的几种方式
    操作JavaScript的Alert弹框
    selenium 延迟等待的三种方式
  • 原文地址:https://www.cnblogs.com/geniushuangxiao/p/7067533.html
Copyright © 2020-2023  润新知