bootstrap js插件篇——手风琴、图片轮播
2015-07-15 15:38
627 查看
八、手风琴、图片轮播
8.1 手风琴基本结构
注:1、面板包括两个部分,第一个是面板标题 panel-heading,并且在这里面添加标题 panel-title。第二个部分是面板内容,也就是折叠区,使用 panel-collapse 样式。
2、通过锚链接的方法把标题区域和面板区捆绑在一起
3、在 panel-collapse 样式上添加 collapse,控制面板内容区是否可视
4、使用 panel 的 panel-title 做为触元素,使用panel-body的父元素作为折叠区;
8.2 data-触发
data-toggle值设置为 collapse,data-target="#折叠区标识符"8.3.图片轮播基本结构
8.4 data-的自定义属性
=》data-ride 属性:取值 carousel,并且将其定义在 carousel 上(图片自动轮播)=》data-target 属性:取值 carousel 定义的 ID 名或者其他样式识别符,如上图所示,取值为“#myCarousel”,并且将其定义在轮播图计数器的每个 li 上。
=》data-slide 属性:取值包括 prev,next,(prev表示向后滚动,next 表示向前滚动)。该属性值定义在轮播图控制器的 a 链接上,同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。
=》data-slide-to 属性:用来传递某个帧的下标,比如 data-slide-to="2",可以直接跳转到这个指定的帧(下标从0开始计),定义在轮播图计数器的每个 li 上。
8.5 js触发
没有定义 data-ride 属性,可以通过 JavaScript 方法来触发轮播图片切换$("容器ID名或类名").carousel();
参数设置:
调用方法:
.carousel("cycle"):从左向右循环播放;
.carousel("pause"):停止循环播放;
.carousel("number"):循环到指定的帧,下标从0开始,类似数组;
.carousel("prev"):返回到上一帧;
.carousel("next"):下一帧
Eg
相关文章推荐
- bootstrap js插件篇——按钮、固定定位
- 【BootStrap】初步教程
- Bootstrap 模态框、轮播 结合使用
- 什么是Bootstrap
- 一张图让你看懂Bootstrap的栅格系统
- laravel5.0 服务器上被坑的 bootstrap
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- bootstrapSwitch switchChange 事件
- bootstrap组件
- Bootstrap
- Bootstrap select多选下拉框赋值
- 关于Bootstrap的理解
- 使用Bootstrap框架制作响应式移动网页
- bootstrap js插件篇——提示框、弹出框、警告框
- bootstrap table 服务端
- bootstrap js插件篇——下拉菜单、滚动监测、选项卡
- bootstrap js插件篇——动画过渡、模态弹窗
- 20分钟打造你的Bootstrap站点
- bootstrap 基础知识学习(列表+表格)
- bootstrap 基础知识(表单)