第十篇BootStrap轮播插件使用详解


Posted in Javascript onJune 21, 2016

Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js.

先给大家展示下效果图,如果大家感觉还不错,请参考实现代码。

效果图如下所示:

第十篇BootStrap轮播插件使用详解

关键代码如下:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!—轮播导航 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!—轮播项目 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/images/Chrysanthemum.jpg" />
<div class="carousel-caption">
ffffffff
</div>
</div>
<div class="item">
<img src="~/images/Desert.jpg" />
<div class="carousel-caption">
xxxxxxxxxxxxxxxx
</div>
</div>
<div class="item">
<img src="~/images/Lighthouse.jpg" />
<div class="carousel-caption">
mmmmmmmmmmmm
</div>
</div>
</div>
<!—轮播导航 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

以上所述是小编给大家介绍的第十篇BootStrap轮播插件使用详解的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 #Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 #Javascript
js简单判断flash是否加载完成的方法
Jun 21 #Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 #Javascript
JS实现获取剪贴板内容的方法
Jun 21 #Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 #Javascript
Javascript打印局部页面实例
Jun 21 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
node.js通过url读取文件
2020/10/16 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
详解Python中的条件判断语句
2015/05/14 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
flask 实现token机制的示例代码
2019/11/07 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
Django配置跨域并开发测试接口
2020/11/04 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
报到证丢失证明
2014/01/11 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
《故乡》教学反思
2014/04/10 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python