Bootstrap轮播插件使用代码

更新时间：2016年10月11日 11:28:17 作者：圣叹&北京

这篇文章主要为大家详细介绍了Bootstrap轮播插件使用代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Bootstrap不仅提供了整套的样式，还提供了一系列插件，帮助开发者构建更受欢迎的网站。

Bootstrap的轮播插件用起来很简单，代码如下。

<!DOCTYPE html>

<html lang="en">

 <head>

 <meta charset="utf-8">

 <title>Bootstrap, from Twitter</title>

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <meta name="description" content="">

 <meta name="author" content="">

 

 <link href="bootstrap/css/bootstrap.css" rel="stylesheet">

 <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

 </head>

 <body>

 

<div id="myCarousel" class="carousel slide">

 <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 items -->

 <div class="carousel-inner">

 <div class="item active">

   <img src="Demo_lunbo1.jpg" alt="">

   <div class="carousel-caption">

   <h4>八月十五回家拍摄</h4>

   <p>八月十五回家时正赶上下雨，雨后的天空挂上了彩虹</p>

   </div>

   </div>

   <div class="item">

   <img src="Demo_lunbo2.jpg" alt="">

   <div class="carousel-caption">

   <h4>眼睛里的景色更迷人</h4>

   <p>照片中的彩虹总不如眼睛看到的美。</p>

   </div>

   </div>

   <div class="item">

   <img src="Demo_lunbo3.jpg" alt="">

   <div class="carousel-caption">

   <h4>雨后的黄昏</h4>

   <p>美好的东西总是短暂的，一会天就黑了。</p>

   </div>

   </div>

 </div>

 <!-- Carousel nav -->

 <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>

 <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div>

 

 <script src="bootstrap/js/jquery.js"></script>

 <script src="bootstrap/js/bootstrap.js"></script>

 

 </body>

</html>

效果图：

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

javascript实现的右下角弹窗实例
这篇文章主要介绍了javascript实现的右下角弹窗,实例分析了javascript实现右下角弹窗的完整实现步骤与技巧,需要的朋友可以参考下
2015-04-04
javascript 动态添加事件代码
往往我们需要在 JS 中动态添加事件，这就涉及到浏览器兼容性问题了，以下谈及的几种方法，我们也常常混合使用。
2008-11-11
JS实现带有抽屉效果的产品类网站多级导航菜单代码
这篇文章主要介绍了JS实现带有抽屉效果的产品类网站多级导航菜单代码,涉及JavaScript动态操作页面元素属性的技巧,整体界面效果美观大方,具有极强的立体感,需要的朋友可以参考下
2015-09-09
js实现网页定位导航功能
这篇文章主要为大家详细介绍了js实现网页定位导航功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
原生Js实现的画廊功能
这篇文章主要介绍了原生Js实现的画廊功能，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下
2021-05-05
echarts饼图自定义设置颜色的3种实现方式
ECharts饼图的颜色可以通过多种方式进行设置,下面这篇文章主要给大家介绍了关于echarts饼图自定义设置颜色的3种实现方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-02-02
js高精度计算decimal.js库用法demo
这篇文章主要给大家介绍了关于js高精度计算decimal.js库用法的相关资料,decimal.js是使用的二进制来计算的,所以能解决js的精度问题,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-11-11
JS格式化时间的几种方法总结
这篇文章介绍了JS格式化时间的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-04-04
深入理解JavaScript中的宏任务和微任务机制
JavaScript中的任务分为宏任务和微任务，它们的执行顺序会影响代码的执行结果。了解它们的机制可以帮助我们更好地理解事件循环和异步编程，避免出现一些意想不到的错误
2023-05-05
javascript数组中的findIndex方法
这篇文章主要介绍了javascript数组中的findIndex方法，findIndex() 方法返回传入一个测试条件函数符合条件的数组第一个元素位置，下面更多相关资料，需要的小伙伴可以参考一下
2022-03-03

Bootstrap轮播插件使用代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具