请登录后发表评论
登录
全部评论
首页 > 应用开发 > IT综合 > Bootstrap学习笔记（五）
一、工具提示
工具提示有两种形式，分别是 tooltip 和 popover 。实例如下：
rel="popover" href="#">Popover
如果想要触发提示信息，必须要写JS代码：
二、进度条
进度条使用 .progress 类定义，默认样式是带有垂直渐变的进度条。例如：
如果想使用渐变创建的一个条纹效果的进度条（不支持IE7-8）可以在
如果想创建堆叠样式可将多个进度条放入同一个 .progress 中即可，如:
备注：进度条依赖于CSS3的渐变、过度和动画特性，这些都是不被IE7-9 或较老版本的Firefox所支持的。IE10和Opera 12之前的版本均不支持动画特性。
三、轮播
bootstrap为轮播组件定义了一套轮播的css样式，其中有三个最基本的样式 .carousel 、.carousel-inner 、.item 。
.carousel 是整个轮播的样式。 .carousel-inner 是幻灯片组的样式，所有的幻灯片都定义在其内。 .item 是每张幻灯片的样式(其内是轮播的元素，比如单张图片)，这三个样式定义了整个轮播组件的架构。另外还有俩个 .carousel-indicators .carousel-control是可选的，这俩个是用于控制幻灯片。.carousel-indicators 是指示器，控制直接切换到哪张，.carousel-control是控制器，用于切换上一张、下一张。
在控制器和指示器中使用data属性可以很容易的控制轮播的位置。data-slide内可以包含prev （切换到上一张）或 next（切换到下一张），他们可以改变当前帧，一般用作控制器。另外，使用data-slide-to可以传递某个帧的下标，例如data-slide-to="2"，这样就可以直接跳转到这个指定的帧 （一般用作指示器，下标从0开始计算）。例如：
<!-- slide是设置轮播的动画效果（平缓过渡）默认是5秒切换一次-->
<!--用作指示器-->
<!--每一个整体都用一个.item定义一下active表示默认显示-->
<!--定义文字的样式（半透明黑色的背景）-->
Bootstrap提供了几种可以帮你快速上手的方式，每种方式针对具有不同技能等级的开发者和不同的使用场景。
Bootstrap提供了几种可以帮你快速上手的方式，每种方式针对具有不同技能等级的开发者和不同的使用场景.
Bootstrap提供了几种可以帮你快速上手的方式，每种方式针对具有不同技能等级的开发者和不同的使用场景。
<!--用作控制器-->
当然你也可以使用JS的方式来启动轮播：
//将带有"carousel"类样式的元素作为轮播组件启动
$('.carousel').carousel()
//id="myCarousel"的元素作为轮播组件启动
$('#myCarousel').carousel()
备注：如果要控制轮播必须要结合bootstrap提供的属性方法。另外，如果你不用JS方式来启动的话，在页面的第一次刷新的时候，轮播并不会启动（图片不会自己转换），只有当然你点击了页面上的控制事件才后才会启动。
bootstrap提供了俩个参数用于对轮播过程进行控制。
名称 类型 默认值 描述
interval number 5000 在自动轮播过程中，展示每帧所停留的时间。如果是false，轮播不会自动启动。
pause string "hover" 当鼠标在轮播区域内时暂停循环，在区域外时则继续循环。
例如初始化一个带有可选参数object的轮播，并且自动开始循环播放。
$('.carousel').carousel({
interval: 2000
})
另外还提供了几个用于对轮播控制的方法，如下：
.carousel('cycle'):从左向右循环播放。
.carousel('pause'):停止循环播放。
.carousel(number):循环到指定帧（下标从0开始，类似数组）。
.carousel('prev'):返回到上一帧。
.carousel('next'):下一帧。
Bootstrap的轮播插件对外暴露了两个可被监听的事件。
事件名 描述
slide 当slide实例方法被调用时，此事件会被立即触发。
slid 当切换完一帧后触发。
slide事件是在幻灯片每次切换时触发。slid事件是在每次切换完成时触发（如果存在过度效果则在过度效果完成后触发）。使用方式如下：
$('#myCarousel').on('事件名', function () {
....
})
作者：软酷网李鹏
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/30047842/viewspace-1400059/ ，如需转载，请注明出处，否则将追究法律责任。
北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区
广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员
违法和不良信息举报电话:18101376593
