ng2学习笔记之bootstrap中的component使用教程
前序:
现在angular2已经除了集成的angular-cli,建议大家可以基于这个来快速开发ng2的项目,不用自己再搭建环境;
相关内容请前往:https://angular.cn/docs/ts/latest/cli-quickstart.html
正文:
以图片轮播组件carousel为例:
首先安装好ng2-bootstrap,bootstrap
npm install ng2-bootstrap bootstrap --save
在需要用到的模块中导入
import { CarouselModule } from 'ng2-bootstrap' @NgModule({ imports: [ CarouselModule.forRoot() ], }) export class HeaderModule { }
然后,有很重要一点,不要忘记引入了bootstroop.min.css文件;
接着,在组件的html中写入
<carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex"> <slide *ngFor="let slidez of slides;"> <img [src]="slidez" > </slide> </carousel>
以上所述是小编给大家介绍的ng2学习笔记之bootstrap中的component使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
Bootstrap Navbar Component实现响应式导航
目的: 用Bootstrap Navbar component 实现一个响应式导航 理解Bootstrap Navbar component是如何工作的(不包括collepse.js) 清楚自己添加一个规定的类名时是做了些什么 根据自己的需求进行改装 对比自己的实现方法,找出差距. 1.实现: 我想要模仿一个这样的响应式导航: 按照Bootstrap官网上介绍的方法,按照规则创建标签添加类名之后,可以得到一个这样的导航: 代码: <nav class="navbar navbar-defa
-
ng2学习笔记之bootstrap中的component使用教程
前序: 现在angular2已经除了集成的angular-cli,建议大家可以基于这个来快速开发ng2的项目,不用自己再搭建环境: 相关内容请前往:https://angular.cn/docs/ts/latest/cli-quickstart.html 正文: 以图片轮播组件carousel为例: 首先安装好ng2-bootstrap,bootstrap npm install ng2-bootstrap bootstrap --save 在需要用到的模块中导入 import { Carou
-
Bootstrap源码学习笔记之bootstrap进度条
基本样式 要实现进度条效果要使用两个容器,外容器使用"progress"样式,子容器使用"progress-bar"样式.例如: <div class="progress"> <div class="progress-bar" style="width:40%"></div> </div> progress样式主要设置进度条容器的背景色,容器高度.间距等,pr
-
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
本文实例讲述了Python GUI编程学习笔记之tkinter中messagebox.filedialog控件用法.分享给大家供大家参考,具体如下: 相关内容: messagebox 介绍 使用 filedialog 介绍 使用 首发时间:2018-03-04 22:18 messagebox: 介绍:messagebox是tkinter中的消息框.对话框 使用: 导入模块:import tkinter.messagebox 选择消息框的模式: 提示消息框:[返回"ok"] tkint
-
jQuery学习笔记[1] jQuery中的DOM操作
DOM分为3个方面,即DOM Core,HTML-DOM,CSS-DOM. 1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它. JavaScript中的getElementById(),getElementsByTagName()...等方法. 例如:使用DOM Core来获取表单对象的方法: document.getElementsByTagName("form"); 2,HTML-DOM. 在使用JavaScript和DOM为HTML
-
Vue 2.0学习笔记之Vue中的computed属性
Vue中的 computed 属性称为 计算属性 .在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算.也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护.咱们先来看一个示例: <div id="app"> <h1>{{ message.split('').reverse().join('') }}
-
C#.NET学习笔记5 C#中的条件编译
条件编译是C#比Java多出的东西,但我跟前辈请教后,他们都说条件编译在实际的项目开发中不怎么使用.鉴于是新内容,我还是做做笔记,理解一下好了. 条件编译属于编译预处理的范畴,它能让我们通过条件编译的机制,将部分代码包括进来或者排除出去,其作用与if-else类似.条件编译指令有以下四种
-
Spark学习笔记之Spark中的RDD的具体使用
1. Spark中的RDD Resilient Distributed Datasets(弹性分布式数据集) Spark中的最基本的抽象 有了RDD的存在我们就可以像操作本地集合一样操作分布式的数据 包含所有元素的分区的集合 RDD包含了很多的分区 2. RDD中的弹性 RDD中的数据是可大可小的 RDD的数据默认情况下存放在内存中的,但是在内存资源不足时,Spark会自动将RDD数据写入磁盘 RDD有自动容错功能,当其中一个RDD中的分区的数据丢失,或者当前节点故障时,rdd会根据依赖关系重新
-
JavaScript 学习笔记之基础中的基础
概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成 javascript ECMAScript(核心) DOM(文档对象模型) BOM(浏览器对象模型) 1.1ECMAScript ECMAScript是通过ECMA-262标准化的脚本语言,ECMA-262规定语言的:语法.类型.语句.关键字.保留字.操作符.对象 1.2 DOM DOM把整个页面映射为一个多层节点结构,HTML或者XML等页面中的每个组成部分都是某种类型的节点,这些节点又包含不同类型的
-
CSS学习笔记Padding 属性中参数的定义与使用
一直都对CSS中Padding 属性中参数个数的定义颇为困惑,例如: body { padding: 32px;} body { padding: 32px 24px; } body { padding: 32px 24px 18px; } body { padding: 32px 24px 18px 12px; } 今天baidu查看了CSS的标准文档,其中是这样规定的: 如果只提供一个,将用于全部的四条边: 如果提供两个,第一个用于上-下,第二个用于左-右: 如果提供三个,第一个用于上,第二
-
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
花了一晚上的时间解决了一个看似很容易的问题.今晚做的这个东西中由于要获取某列中的一个ID值.如果是用平常的那种JS传值的方式此问题就不存在,但是由于此次用到的都是jquery插件,包括各种弹出框,用JS传值就得用JS那丑陋的弹出框,所以,你懂得. 网上找了很多方法,用起来都不行,后来想到了jquery中的鼠标事件,可以在鼠标经过table时,获得当前行与列的值.页面如下所示: 具体操作就是点击"删除"按钮,然后调用jquery插件页面,这时候需要获得相应行的"ID"
随机推荐
- Mysql运行环境优化(Linux系统)
- Win2003+ASP.NET虚拟主机安全设置图文教程
- PHP操作FTP类 (上传、下载、移动、创建等)
- ASP.NET Page函数调用顺序解析
- PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
- C语言转义字符实例详解
- Android客户端实现注册、登录详解(2)
- mysql中如何去除小数点后面多余的0
- SQL查询语句行转列横向显示实例解析
- 教你如何快捷的使用cmd访问mysql小技巧
- Python实现CET查分的方法
- 微信小程序 devtool隐藏的秘密
- Linux进程控制详解及实例
- ORACLE 常用函数总结(80个)第1/2页
- 总结十条.NET异常处理建议
- javascript验证邮件地址和MX记录的方法
- 自定义jQuery选项卡插件实例
- 实测jquery data()如何存值
- js select 标签选定项的值获取代码
- iscroll碰到Select无法选择下拉刷新的解决办法