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

 更新时间:2016年06月21日 16:06:32   作者:-夏昊-  
Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式。本文给大家介绍BootStrap轮播插件使用详解,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧

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

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

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

效果图如下所示:

关键代码如下:

<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轮播插件使用详解的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 前端百度地图添加点并跳转到百度地图进行导航完整代码

    前端百度地图添加点并跳转到百度地图进行导航完整代码

    web开发过程中经常碰到需要调用百度地图来视线定位导航的过程,许多技术博客上介绍的都是调用百度地图的api,这篇文章主要给大家介绍了关于前端百度地图添加点并跳转到百度地图进行导航的相关资料,需要的朋友可以参考下
    2024-07-07
  • 我的javascript 函数链之演变

    我的javascript 函数链之演变

    我的javascript 函数链之演变,需要的朋友可以参考下。
    2011-04-04
  • electron中preload.js文件的用法小结

    electron中preload.js文件的用法小结

    preload.js文件在Electron应用中起着桥梁的作用,使得在保持安全的同时,渲染进程可以访问主进程的功能,保持渲染进程与主进程隔离的同时,又能使渲染进程具有访问特定Electron API的能力的方法,本文给大家分享electron中preload.js文件的用法,感兴趣的朋友一起看看吧
    2024-04-04
  • 浅谈layui 数据表格前后台传值的问题

    浅谈layui 数据表格前后台传值的问题

    今天小编就为大家分享一篇浅谈layui 数据表格前后台传值的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript正则表达式和级联效果

    JavaScript正则表达式和级联效果

    正则表达式(regular expression)是一种字符串匹配的模式,用来检查一个字符串中是否包含指定模式的字符串。下面通过本文给大家分享JavaScript_正则表达式和级联效果,感兴趣的朋友一起看看吧
    2017-09-09
  • JavaScript请求后台数据的常用方法汇总

    JavaScript请求后台数据的常用方法汇总

    这篇文章主要介绍了JavaScript请求后台数据的几种常用方式,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • javascript动态添加样式(行内式/嵌入式/外链式等规则)

    javascript动态添加样式(行内式/嵌入式/外链式等规则)

    添加CSS的方式有行内式、嵌入式、外链式、导入式,下面为大家详细介绍下javascript动态添加以上样式规则的方法,感兴趣的朋友可以参考下哈
    2013-06-06
  • 使用JavaScript实现简单图像放大镜效果

    使用JavaScript实现简单图像放大镜效果

    图像放大镜在很多网站中都扮演着重要的角色,大多数开发人员使用 jquery 来创建图像放大镜。在本教程中,我将向大家展示如何使用 HTML、CSS 和 JavaScript 制作一个简单的图像放大镜,需要的可以参考一下
    2022-08-08
  • raphael.js绘制中国地图 地图绘制方法

    raphael.js绘制中国地图 地图绘制方法

    在本文中给大家分享如何使用raphael.js来完成地图交互,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能,需要的朋友可以参考下
    2014-02-02
  • 200行HTML+JavaScript实现年会抽奖程序

    200行HTML+JavaScript实现年会抽奖程序

    这篇文章主要为大家详细介绍了HTML+JavaScript实现年会抽奖程序的200行代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01

最新评论