第十篇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的caller,callee,call,apply
Apr 28 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
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教程之phpize使用方法
2014/02/12 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
python追加元素到列表的方法
2015/07/28 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
营销专业应届生求职信
2013/11/26 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2014年标准化工作总结
2014/12/17 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
毕业生入职感言
2015/07/31 职场文书