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

国外的为初学者写的JavaScript教程

Jun 09 Javascript

ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)

Jan 13 Javascript

JS清除选择内容的方法

Jan 29 Javascript

JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例

Aug 03 Javascript

AngularJS应用开发思维之依赖注入3

Aug 19 Javascript

JS中判断null的方法分析

Nov 21 Javascript

基于JavaScript实现全选、不选和反选效果

Feb 15 Javascript

正则验证小数点后面只能有两位数的方法

Feb 28 Javascript

angularjs实现搜索的关键字在正文中高亮出来

Jun 13 Javascript

详解vue 计算属性与方法跟侦听器区别(面试考点)

Apr 23 Javascript

微信小程序缓存支持二次开发封装实现解析

Dec 16 Javascript

vue请求数据的三种方式

Mar 04 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

DC动漫人物排行

2020/03/03 欧美动漫

PHP教程变量定义

2009/10/23 PHP

javascript 读取XML数据，在页面中展现、编辑、保存的实现

2009/10/27 Javascript

Javascript控制页面链接在新窗口打开具体方法

2013/08/16 Javascript

js、jquery图片动画、动态切换示例代码

2014/06/03 Javascript

给应用部分的js代码设定一个统一的入口

2014/06/15 Javascript

JavaScript基础知识学习笔记

2014/12/02 Javascript

Bootstrap Table使用方法详解

2016/08/01 Javascript

在javascript中，null＞=0 为真，null==0却为假，null的值详解

2017/02/22 Javascript

基于Node的React图片上传组件实现实例代码

2017/05/10 Javascript

angularjs之$timeout指令详解

2017/06/13 Javascript

jquery DataTable实现前后台动态分页

2017/06/17 jQuery

node.js实现微信JS-API封装接口的示例代码

2017/09/06 Javascript

详解VUE-地区选择器(V-Distpicker)组件使用心得

2018/05/07 Javascript

JavaScript错误处理操作实例详解

2019/01/04 Javascript

vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】

2019/03/15 Javascript

在centos7中分布式部署pyspider

2017/05/03 Python

解决Python plt.savefig 保存图片时一片空白的问题

2019/01/10 Python

Python类的继承、多态及获取对象信息操作详解

2019/02/28 Python

Python 正则表达式 re.match/re.search/re.sub的使用解析

2019/07/22 Python

python retrying模块的使用方法详解

2019/09/25 Python

关于Theano和Tensorflow多GPU使用问题

2020/06/19 Python

python字典按照value排序方法

2020/12/28 Python

Appium+Python实现简单的自动化登录测试的实现

2021/01/26 Python

美国Randolph太阳镜官网：美国制造的飞行员太阳镜和射击眼镜

2018/06/15 全球购物

办公室前台岗位职责范本

2013/12/10 职场文书

班会关于环保演讲稿

2013/12/29 职场文书

工程造价专业大学生职业生涯规划书

2014/01/18 职场文书

2014年医院十一国庆节活动方案

2014/09/15 职场文书

办理房产证委托书

2014/09/18 职场文书

交通事故和解协议书

2014/09/25 职场文书

2014年底工作总结

2014/12/15 职场文书

模范班主任事迹材料

2014/12/17 职场文书

农民工工资保障承诺书

2015/05/04 职场文书

最新农村养殖致富：资金投入较低的创业项目有哪些？

2019/09/26 职场文书

golang 实现两个结构体复制字段

2021/04/28 Golang