Bootstrap 轮播(Carousel)插件
轮播插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是非常灵活的。可是图像，内嵌框架，视频或者其它您想的放置任何内容的类型。
下面是一个简单的幻灯片，使用轮播(carousel)插件显示一个循环播放元素的通用组件，为了现实轮播，您只需要添加带有标签的代码即可。
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding:20px">
<div class="carousel slide"id="myCarousel">
<!--轮播(carousel)指针-->
<ol class="carousel-indicators">
<li data-target="#myCarousel"data-slide-to="0"class="active"></li>
<li data-target="#myCarousel"data-slide-to="1"></li>
<li data-target="#myCarousel"data-slide-to="2"></li>
</ol>
<!--轮播(carousel)项目-->
<div class="carousel-inner">
<div class="item active">
<img src="Images/slide1.png"alt="First slide" />
</div>
<div class="item">
<img src="Images/slide2.png"alt="Second slide" />
</div>
<div class="item">
<img src="Images/slide3.png" />
</div>
</div>
<!--轮播(Carousel)导航-->
<a href="#myCarousel"class="carousel-control left"data-slide="prev">‹</a>
<a href="#myCarousel"class="carousel-control right"data-slide="next">›</a>
</div>
</div>
</body>
</html>
Bootstrap 轮播(Carousel)插件的更多相关文章
- Bootstrap 历练实例-轮播(carousel)插件的事件
事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...
- Bootstrap 历练实例-轮播(carousel)插件方法
方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...
- 第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- BootStrap 轮播 Carousel
参考 http://wrongwaycn.github.io/bootstrap/docs/javascript.html#collapse 同样 启动方式有2种 一种是在div的class中加 另 ...
- Bootstrap 轮播（Carousel）插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
- Bootstrap 轮播（Carousel）详解
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容.如果您想要单独引用 ...
- 第二百四十八节，Bootstrap轮播插件
Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一．轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
- Bootstrap历练实例：轮播(carousel)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- bootstrap轮播图 两侧半透明阴影
用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...
随机推荐
- NSOperation的使用
<iOS多线程编程之NSThread的使用> 介绍三种多线程编程和NSThread的使用,这篇介绍NSOperation的使用. 使用 NSOperation的方式有两种, 一种是用定义好 ...
- C.0689-The 2019 ICPC China Shaanxi Provincial Programming Contest
We call a string as a 0689-string if this string only consists of digits '0', '6', '8' and '9'. Give ...
- uoj455 【UER #8】雪灾与外卖
http://uoj.ac/problem/455 题解: https://blog.csdn.net/litble/article/details/88410435 https://www.mina ...
- Unity Destroy和DestroyImmediate
Destroy(Object obj, float t = 0.0F); 删除一个游戏对象,组件或者资源. 物体obj现在被销毁或在指定了t时间过后销毁.如果obj是组件,它将从GameObject销 ...
- 模拟虚拟的文件系统initrd/initramfs
请看initramfs文件的以下解析: [root@ant-colonies boot]# ls config--.el6.x86_64 lost+found efi symvers--.el6.x8 ...
- 利用Python进行数据分析 2017 第二版 项目代码
最近在学习<利用Python进行数据分析>,找到了github项目的地址, 英文版本,中文版本 (非常感谢翻译中文的作者). mark一下,方便后边学习查找.
- JQuery使用正则表达式验证手机号，邮箱，身份证（含有港澳台），网址
自己对正则验证也没系统用过,这次自己做个demo,一下子把这些全都用上了,下次有需要直接来拿了. 以下代码是在页面使用JQuery进行验证的,也有在后台进行验证的,可以试试,都一样的原理. 直接上代码 ...
- JVM虚拟机 - Class类文件结构
概述 Class文件是一组以8位字节为基础单位的二进制流,各个数据项目严格按照顺序紧凑地排列在Class文件之中,中间没有添加任何分隔符,这使得整个Class文件中存储的内容几乎都是程序运行的必要数据 ...
- Hibernate笔记7--JPA CRUD
1.环境搭建,注意包结构的问题,src下建立名为META-INF的文件夹,放persistence.xml,位置放错,读不到会报错. <?xml version="1.0" ...
- Oracle Hyperion Planning 11.1 .1:创建与管理应用程序 第1课：Planning概述
第1课:Planning概述 1.说明 Oracle Enterprise Performance Management system Oracle Enterprise Performance Ma ...