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的更多相关文章

  1. 在进行vue的学习，项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  2. box-shadow中的理解(bootstrap)

    刚研究了bootstrap中css里面的源码,找到了表单(form)中关于输入框的一些设置,根据要求,label标签和input标签需要一起使用,(屏幕阅读器中不能单独辨认input),如需隐藏lab ...

  3. 在 IE 浏览器中，使用 bootstrap 使得页面滚动条浮动显示，自动隐藏，自动消失

    貌似是从 IE10 开始?为了触屏操作优化浏览器的内容显示,IE 浏览器提供了一种可以浮动显示,自动隐藏的滚动条样式,但是这个样式会在某些情况下造成一些困扰,比如下图... 其实默认情况下,桌面版的 ...

  4. vue中全局引入bootstrap.css

    1.首先在官网上下载bootstrap的压缩包(必须是官网上下载的) 将压缩包解压后引入在项目文件夹下面.如下图所示: 2.在main.js中引入 import './assets/bootstrap ...

  5. netty中的引导Bootstrap服务端

    引导一个应用程序是指对它进行配置,并使它运行起来的过程. 一.Bootstrap 类 引导类的层次结构包括一个抽象的父类和两个具体的引导子类,如图 8-1 所示 服务器致力于使用一个父 Channel ...

  6. netty中的引导Bootstrap客户端

    一.Bootstrap Bootstrap 是 Netty 提供的一个便利的工厂类, 我们可以通过它来完成 Netty 的客户端或服务器端的 Netty 初始化.下面我以 Netty 源码例子中的 E ...

  7. 【码在江湖】前端少侠的json故事（中）ng的json

    ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...

  8. CI中如何配置BootStrap

  9. Angular 中引入BootStrap

    由于Bootstrap官方目前并没有发布Angular的相关类库进行支持,当前Angular只能引用使用Bootstrap相关的样式.无法使用Bootstrap自带的脚本逻辑.以下以Angular7和 ...

随机推荐

  1. HTML5 indexedDb 数据库

    indexedDb 数据库   上一节中,我们知道了,HMTL5中内置了两种本地数据库,一种是通过SQL语言来访问的文件型SQL数据库被称为“SQLLite,另一种是是被称为indexedDB 的数据 ...

  2. java 中的Debug eclipse 开发工具使用

    Eclipse的debug模式:代码调试 * Eclipse或MyEclipse就是java的开发工具 * Eclipse开源的.免费的Java开发工具 * MyEclipse基于Eclipse开发出 ...

  3. Android中include标签的使用（打开引用布局，隐藏当前布局）

    在开发app的时候,有时候一个布局会反复用到,可以把反复用到的布局单独写一个xml文件,什么时候用到就用includ标签引入xml 下面是我写的反复用到的一个xml,里面有2个button,一个Tex ...

  4. java.math.BigDecimal cannot be cast to java.lang.String

    从数据库总查询出的count(*) 函数统计的值,类型转换方法: Map<String,Integer> map = new HashMap<String,Integer>() ...

  5. POJ_2480 Longge's problem【积性函数+欧拉函数的理解与应用】

    题目: Longge is good at mathematics and he likes to think about hard mathematical problems which will ...

  6. 1091 N-自守数 （15 分）

    如果某个数 K 的平方乘以 N 以后,结果的末尾几位数等于 K,那么就称这个数为“N-自守数”.例如 3×92​2​​=25392,而 25392 的末尾两位正好是 92,所以 92 是一个 3-自守 ...

  7. 执行AJAX返回HTML片段中的JavaScript脚本

    如果AJAX加载的数据是一个HTML片段,而且这个HTML片段还包含脚本<script>块,那么在你把这数据xmlHttp.responseText用innerHTML方法插入到当前文档一 ...

  8. Q686 重复叠加字符串匹配

    给定两个字符串 A 和 B, 寻找重复叠加字符串A的最小次数,使得字符串B成为叠加后的字符串A的子串,如果不存在则返回 -1. 举个例子,A = "abcd",B = " ...

  9. jenkins集成python脚本

    Jenkins配置获取源码并构建 1. Jenkins系统设置--管理插件,搜索安装“GitLab”和“Git” 2. 新建任务,选择自由风格项目 3. 源码管理 git (1)Repository ...

  10. qs.parse(） 和 qs.stringfy() 之 传输数据秘籍

    qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装. 1. qs.parse()将URL解析成对象的形式 const Qs = require('qs');let url ...