zoukankan      html  css  js  c++  java
  • 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参考网址

      

  • 相关阅读:
    weblogic的ssrf漏洞
    web服务器、Web中间件和Web容器的区别
    linux C判断文件是否存在
    Linux 文件锁flock 实现两个进程相互监听存活状态
    Linux 进程间通信之管道(pipe),(fifo)
    Linux 进程间通信系列之 信号
    android Binder机制(一)架构设计
    Linux 系统 文件锁 fcntl函数详解
    execlp启动android进程命令
    Linux环境编程--waitpid与fork与execlp
  • 原文地址:https://www.cnblogs.com/geniushuangxiao/p/7067533.html
Copyright © 2011-2022 走看看