编程 Javascript

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轮播插件使用代码

- Author -

圣叹&北京

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

IE中jscript/javascript的条件编译

Sep 07 Javascript

Dom操作之兼容技巧分享

Sep 20 Javascript

js实现网页自动刷新可制作节日倒计时效果

May 27 Javascript

JavaScript学习笔记之JS对象

Jan 22 Javascript

jquery实现模拟百分比进度条渐变效果代码

Oct 29 Javascript

基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

Feb 22 Javascript

BootStrap智能表单实战系列(九)表单图片上传的支持

Jun 13 Javascript

JS中mouseup事件丢失的原因与解决办法

Jun 14 Javascript

es7学习教程之fetch解决异步嵌套问题的方法示例

Jul 21 Javascript

angular4自定义组件非input元素实现ngModel双向数据绑定的方法

Dec 28 Javascript

JS拖动选择table里的单元格完整实例【基于jQuery】

May 28 jQuery

JavaScript动态生成表格的示例

Nov 02 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

PHP中显示格式化的用户输入

2006/10/09 PHP

在windows iis5下安装php4.0+mysql之我见

2006/10/09 PHP

学习php设计模式 php实现装饰器模式(decorator)

2015/12/07 PHP

ThinkPHP 3.2.3实现加减乘除图片验证码

2018/12/05 PHP

php求斐波那契数的两种实现方式【递归与递推】

2019/09/09 PHP

javascript模拟枚举的简单实例

2014/03/06 Javascript

javascript中解析四则运算表达式的算法和示例

2014/08/11 Javascript

封装好的一个万能检测表单的方法

2015/01/21 Javascript

JavaScript将一个数组插入到另一个数组的方法

2015/03/19 Javascript

jquery实现从数组移除指定的值

2015/06/24 Javascript

jQuery基于ajax实现星星评论代码

2015/08/07 Javascript

基于javascript实现listbox左右移动

2016/01/29 Javascript

jquery插件之文字间歇自动向上滚动效果代码

2016/02/25 Javascript

js本地图片预览实现代码

2016/10/09 Javascript

JavaScript中 this 指向问题深度解析

2017/02/21 Javascript

原生js更改css样式的两种方式

2017/03/15 Javascript

利用Vue.js+Node.js+MongoDB实现一个博客系统（附源码）

2017/04/24 Javascript

详解vue-router 初始化时做了什么

2018/06/11 Javascript

JavaScript事件冒泡机制原理实例解析

2020/01/14 Javascript

Python程序员鲜为人知但你应该知道的17个问题

2014/06/04 Python

Python中动态创建类实例的方法

2017/03/24 Python

Python的argparse库使用详解

2018/10/09 Python

python用post访问restful服务接口的方法

2018/12/07 Python

Python实现FTP弱口令扫描器的方法示例

2019/01/31 Python

Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析

2019/11/07 Python

pycharm-professional-2020.1下载与激活的教程

2020/09/21 Python

CSS3 box-sizing属性详解

2016/11/15 HTML / CSS

canvas实现俄罗斯方块的方法示例

2018/12/13 HTML / CSS

html5各种页面切换效果和模态对话框用法总结

2014/12/15 HTML / CSS

日本航空官方网站：JAL

2019/06/19 全球购物

饭店工作计划书

2014/01/10 职场文书

2014年党务公开方案

2014/05/08 职场文书

个人查摆剖析材料

2014/10/16 职场文书

综治工作汇报材料

2014/10/27 职场文书

2015试用期转正工作总结

2014/12/12 职场文书

Django分页器的用法你都了解吗

2021/05/26 Python