Bootstrap轮播插件使用代码


Posted in Javascript onOctober 11, 2016

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">‹</a>

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

</div>

 

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

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

 

 </body>

</html>

效果图:

Bootstrap轮播插件使用代码

Bootstrap轮播插件使用代码

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 #Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 #Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 #Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 #Javascript
javascript 动态样式添加的简单实现
Oct 11 #Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 #Javascript
javascript 动态脚本添加的简单方法
Oct 11 #Javascript
You might like
图象函数中的中文显示
2006/10/09 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
微信支付开发订单查询实例
2016/07/12 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript中window.event事件用法详解
2012/12/11 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
JS中的phototype详解
2017/02/04 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
使用python计算三角形的斜边例子
2020/04/15 Python
python用700行代码实现http客户端
2021/01/14 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
Css3圆角边框制作代码
2015/11/18 HTML / CSS
如何处理简单的PHP错误
2015/10/14 面试题
车辆安全检查制度
2014/01/12 职场文书
文化活动实施方案
2014/03/28 职场文书
大学专科求职信
2014/07/02 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers