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

Js 获取当前日期时间及其它操作实现代码

Mar 04 Javascript

jquery自定义下拉列表示例

Apr 25 Javascript

JavaScript遍历table表格中的某行某列并打印其值

Jul 08 Javascript

jQuery中ajax错误调试分析

Dec 01 Javascript

canvas实现简易的圆环进度条效果

Feb 28 Javascript

JavaScript实现微信号随机切换代码

Mar 09 Javascript

使用Vue组件实现一个简单弹窗效果

Apr 23 Javascript

详解vue-loader在项目中是如何配置的

Jun 04 Javascript

JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值

Oct 29 Javascript

浅谈react-router@4.0 使用方法和源码分析

Jun 04 Javascript

Vue+Element-UI实现上传图片并压缩

Nov 26 Javascript

原生js拖拽功能制作滑动条实例代码

Feb 05 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中的替代语法简介

2014/08/22 PHP

PHP自定义函数实现格式化秒的方法

2016/09/14 PHP

thinkPHP5实现数据库添加内容的方法

2017/10/25 PHP

PHP+百度AI OCR文字识别实现了图片的文字识别功能

2019/05/08 PHP

PHP项目多语言配置平台实现过程解析

2020/05/18 PHP

js中将多个语句写成一个语句的两种方法小结

2007/12/08 Javascript

JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)

2014/10/17 Javascript

js实现微信分享代码

2020/10/11 Javascript

探讨JavaScript语句的执行过程

2016/01/28 Javascript

老司机带你解读jQuery插件开发流程

2016/05/16 Javascript

js实现无缝循环滚动

2020/06/23 Javascript

AngularJS 表达式详解及实例代码

2016/09/14 Javascript

jQuery学习之DOM节点的插入方法总结

2017/01/22 Javascript

Angular实现较为复杂的表格过滤，删除功能示例

2017/12/23 Javascript

ajax请求+vue.js渲染+页面加载的示例

2018/02/11 Javascript

在vue中更换字体,本地存储字体非引用在线字体库的方法

2018/09/28 Javascript

Node.js API详解之 net模块实例分析

2020/05/18 Javascript

基于element-ui对话框el-dialog初始化的校验问题解决

2020/09/11 Javascript

js对象属性名驼峰式转下划线的实例代码

2020/09/17 Javascript

在Python的Flask框架中使用日期和时间的教程

2015/04/21 Python

Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例

2018/01/29 Python

点球小游戏python脚本

2018/05/22 Python

python实现爬取图书封面

2018/07/05 Python

linux查找当前python解释器的位置方法

2019/02/20 Python

Python玩转加密的技巧【推荐】

2019/05/13 Python

Django3.0 异步通信初体验(小结)

2019/12/04 Python

pytorch 模拟关系拟合——回归实例

2020/01/14 Python

详细分析Python可变对象和不可变对象

2020/07/09 Python

详解matplotlib中pyplot和面向对象两种绘图模式之间的关系

2021/01/22 Python

45个非常奇妙的CSS3 特性应用示例

2012/01/01 HTML / CSS

巴西男士个人护理产品商店：SHOP4MEN

2017/08/07 全球购物

英国婴儿及儿童产品商店：TigerParrot

2019/03/04 全球购物

电子商务专业实习生自我鉴定

2013/09/24 职场文书

2015年小学师德师风建设工作总结

2015/10/23 职场文书

spring cloud 配置中心客户端启动遇到的问题

2021/09/25 Java/Android

总结高并发下Nginx性能如何优化

2021/11/01 Servers