第十篇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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
Python显示进度条的方法
2014/09/20 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python冒泡排序简单实现方法
2015/07/09 Python
Python文件处理
2016/02/29 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
如何使用Python 打印各种三角形
2019/06/28 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
留学自荐信
2013/10/10 职场文书
大一军训感言
2014/01/09 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
社保转移委托书范本
2014/10/08 职场文书
给老婆的保证书
2015/01/16 职场文书
交通事故案件代理词
2015/05/23 职场文书
公司2015年终工作总结
2015/05/26 职场文书
思想品德课教学反思
2016/02/24 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Django框架中模型的用法
2022/06/10 Python