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启动工程,浏览器中查看结果
003Angular2中使用ng-bootstrap的更多相关文章
- 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- box-shadow中的理解(bootstrap)
刚研究了bootstrap中css里面的源码,找到了表单(form)中关于输入框的一些设置,根据要求,label标签和input标签需要一起使用,(屏幕阅读器中不能单独辨认input),如需隐藏lab ...
- 在 IE 浏览器中,使用 bootstrap 使得页面滚动条浮动显示,自动隐藏,自动消失
貌似是从 IE10 开始?为了触屏操作优化浏览器的内容显示,IE 浏览器提供了一种可以浮动显示,自动隐藏的滚动条样式,但是这个样式会在某些情况下造成一些困扰,比如下图... 其实默认情况下,桌面版的 ...
- vue中全局引入bootstrap.css
1.首先在官网上下载bootstrap的压缩包(必须是官网上下载的) 将压缩包解压后引入在项目文件夹下面.如下图所示: 2.在main.js中引入 import './assets/bootstrap ...
- netty中的引导Bootstrap服务端
引导一个应用程序是指对它进行配置,并使它运行起来的过程. 一.Bootstrap 类 引导类的层次结构包括一个抽象的父类和两个具体的引导子类,如图 8-1 所示 服务器致力于使用一个父 Channel ...
- netty中的引导Bootstrap客户端
一.Bootstrap Bootstrap 是 Netty 提供的一个便利的工厂类, 我们可以通过它来完成 Netty 的客户端或服务器端的 Netty 初始化.下面我以 Netty 源码例子中的 E ...
- 【码在江湖】前端少侠的json故事(中)ng的json
ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...
- CI中如何配置BootStrap
- Angular 中引入BootStrap
由于Bootstrap官方目前并没有发布Angular的相关类库进行支持,当前Angular只能引用使用Bootstrap相关的样式.无法使用Bootstrap自带的脚本逻辑.以下以Angular7和 ...
随机推荐
- payload指安全测试数据
payload,翻译过来是有效载荷 通常在传输数据时,为了使数据传输更可靠,要把原始数据分批传输,并且在每一批数据的头和尾都加上一定的辅助信息,比如数据量的大小.校验位等,这样就相当于给已经分批的原始 ...
- rest-assured的对象映射(序列化和反序列化)
rest-assured支持映射Java对象到Json和XML以及从Json和XML中映射到Java对象.Json映射需要在classpath 中有Jackson.Jackson 2或者是Gson,X ...
- 洛谷 P2542 [AHOI2005]航线规划(Link-cut-tree)
题面 洛谷 bzoj 题解 离线处理+LCT 有点像星球大战 我们可以倒着做,断边变成连边 我们可以把边变成一个点 连边时,如果两个点本身不联通,就\(val\)赋为\(1\),并连接这条边 如果,两 ...
- 洛谷 P3616 富金森林公园题解(树状数组)
P3616 富金森林公园 题目描述 博艾的富金森林公园里有一个长长的富金山脉,山脉是由一块块巨石并列构成的,编号从1到N.每一个巨石有一个海拔高度.而这个山脉又在一个盆地中,盆地里可能会积水,积水也有 ...
- codeforces 1101G (Zero XOR Subset)-less 前缀异或+线性基
题目传送门 题意:给出一个序列,试将其划分为尽可能多的非空子段,满足每一个元素出现且仅出现在其中一个子段中,且在这些子段中任取若干子段,它们包含的所有数的异或和不能为0. 思路:先处理出前缀异或,这样 ...
- HDU 6357.Hills And Valleys-动态规划(区间翻转l,r找最长非递减子序列)
题意:给一串由n个数字组成的字符串,选择其中一个区间进行翻转,要求翻转后该字符串的最长非降子序列长度最长,输出这个最长非降子序列的长度以及翻转的区间的左右端点 #include<bits/std ...
- UVA - 10780 唯一分解定理
白书P171 对m,n!分解,质因子指数取min #include<iostream> #include<algorithm> #include<cstdio> # ...
- 1140 Look-and-say Sequence (20 分)
Look-and-say sequence is a sequence of integers as the following: D, D1, D111, D113, D11231, D112213 ...
- php session_id() session_name()
1.Session.use_cookies:默认值为"1",代表SessionID使用Cookie来传递,反之就是用Query_String来传递 2.Session.name:这 ...
- 【记录】drozer与adb工具的安装与使用
drozer:链接:https://pan.baidu.com/s/1o8QOIF4 密码:a7yv adb:链接:https://pan.baidu.com/s/1o865VSm 密码:zq9t d ...