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使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap Navbar 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 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中某列值的具体思路

    jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路

    花了一晚上的时间解决了一个看似很容易的问题.今晚做的这个东西中由于要获取某列中的一个ID值.如果是用平常的那种JS传值的方式此问题就不存在,但是由于此次用到的都是jquery插件,包括各种弹出框,用JS传值就得用JS那丑陋的弹出框,所以,你懂得. 网上找了很多方法,用起来都不行,后来想到了jquery中的鼠标事件,可以在鼠标经过table时,获得当前行与列的值.页面如下所示:  具体操作就是点击"删除"按钮,然后调用jquery插件页面,这时候需要获得相应行的"ID"

随机推荐