编程 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 相关文章推荐

input+select(multiple) 实现下拉框输入值

May 21 Javascript

十个优秀的Ajax/Javascript实例网站收集

Mar 31 Javascript

在Javascript中处理数组之toSource()方法的使用

Jun 09 Javascript

详解Webwork中Action 调用的方法

Feb 02 Javascript

详解jQuery插件开发方式

Nov 22 Javascript

js实现多行文本框统计剩余字数功能

Mar 28 Javascript

你有必要知道的10个JavaScript难点

Jul 25 Javascript

浅谈react前后端同构渲染

Sep 20 Javascript

mac上配置Android环境变量的方法

Jul 08 Javascript

JS中DOM元素的attribute与property属性示例详解

Sep 04 Javascript

使用vue2实现带地区编号和名称的省市县三级联动效果

Nov 05 Javascript

图文讲解vue的v-if使用方法

Feb 11 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入门学习知识点二 PHP简单的分页过程与原理

2011/07/14 PHP

PHP __autoload()方法真的影响性能吗?

2012/03/30 PHP

非常实用的PHP常用函数汇总

2014/12/17 PHP

ecshop后台编辑器替换成ueditor编辑器

2015/03/03 PHP

php实现微信扫码支付

2017/03/26 PHP

基于jQuery的简单的列表导航菜单

2011/03/02 Javascript

一个简单的jquery的多选下拉框(自写)

2014/05/05 Javascript

JS中如何判断传过来的JSON数据中是否存在某字段

2014/08/18 Javascript

jQuery使用post方法提交数据实例

2015/03/25 Javascript

如何用jQuery实现ASP.NET GridView折叠伸展效果

2015/09/26 Javascript

详解javascript实现瀑布流绝对式布局

2016/01/29 Javascript

使用vue.js制作分页组件

2016/06/27 Javascript

javascript比较语义化版本号的实现代码

2016/09/09 Javascript

使用Javascript监控前端相关数据的代码

2016/10/27 Javascript

JS中append字符串包含onclick无效传递参数失败的解决方案

2016/12/26 Javascript

利用node.js实现反向代理的方法详解

2017/07/24 Javascript

Vue组件化开发思考

2018/02/02 Javascript

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

2018/05/22 Javascript

Vue运用transition实现过渡动画

2019/05/06 Javascript

python笔记（2）

2012/10/24 Python

在Python的列表中利用remove()方法删除元素的教程

2015/05/21 Python

python 实时得到cpu和内存的使用情况方法

2018/06/11 Python

python实现关闭第三方窗口的方法

2019/06/28 Python

Python 元组操作总结

2019/09/18 Python

python3.7 openpyxl 删除指定一列或者一行的代码

2019/10/08 Python

python定时任务 sched模块用法实例

2019/11/04 Python

详解Selenium-webdriver绕开反爬虫机制的4种方法

2020/10/28 Python

世界领先的艺术图书出版社：TASCHEN

2018/07/23 全球购物

电子商务专业个人的自我评价

2013/11/19 职场文书

大学生文员专业个人求职信范文

2014/01/05 职场文书

植树节口号

2014/06/21 职场文书

舞蹈兴趣小组活动总结

2014/07/07 职场文书

离婚协议书该怎么写

2014/10/04 职场文书

公民授权委托书

2014/10/15 职场文书

小学中等生评语

2014/12/29 职场文书

导游词欢迎词

2015/02/02 职场文书