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

jQuery EasyUI API 中文文档 - Documentation 文档

Sep 29 Javascript

jQuery.extend()的实现方式详解及实例

Jun 29 Javascript

js数组转json并在后台对其解析具体实现

Nov 20 Javascript

jQuery添加/改变/移除CSS类及判断是否已经存在CSS

Aug 20 Javascript

JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码

Sep 15 Javascript

js实现select二级联动下拉菜单

Apr 17 Javascript

JS传递对象数组为参数给后端,后端获取的实例代码

Jun 28 Javascript

jQuery实现遍历复选框的方法示例

Mar 06 Javascript

js实现一个页面多个倒计时的3种方法

Feb 25 Javascript

小程序实现左滑删除效果

Jul 25 Javascript

three.js利用gpu选取物体并计算交点位置的方法示例

Nov 25 Javascript

JavaScript中作用域链的概念及用途讲解

Aug 06 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 的 __FILE__ 常量

2007/01/15 PHP

PHP的构造方法,析构方法和this关键字详细介绍

2013/10/22 PHP

php中json_encode UTF-8中文乱码的更好解决方法

2014/09/28 PHP

ecshop实现smtp发送邮件

2015/02/03 PHP

php防止sql注入的方法详解

2017/02/20 PHP

作为PHP程序员你要知道的另外一种日志

2018/07/30 PHP

PHP简单实现图片格式转换(jpg转png，gif转png等)

2019/10/30 PHP

如何在Laravel5.8中正确地应用Repository设计模式

2019/11/26 PHP

分享十五个最佳jQuery 幻灯插件和教程

2010/03/27 Javascript

利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

2014/01/02 Javascript

使表格的标题列可左右拉伸jquery插件封装

2014/11/24 Javascript

Javascript中浏览器窗口的基本操作总结

2016/08/18 Javascript

jQuery Validate让普通按钮触发表单验证的方法

2016/12/15 Javascript

js处理层级数据结构的方法小结

2017/01/17 Javascript

JavaScript获取select中text值的方法

2017/02/13 Javascript

Vuejs 组件——props数据传递的实例代码

2017/03/07 Javascript

vue组件间通信六种方式（总结篇）

2019/05/15 Javascript

浅谈Vue项目骨架屏注入实践

2019/08/05 Javascript

python中循环语句while用法实例

2015/05/16 Python

python Django框架实现自定义表单提交

2016/03/25 Python

python中数组和矩阵乘法及使用总结（推荐）

2019/05/18 Python

对Django外键关系的描述

2019/07/26 Python

Python实现代码块儿折叠

2020/04/15 Python

详解tensorflow2.x版本无法调用gpu的一种解决方法

2020/05/25 Python

Python将字典转换为XML的方法

2020/08/01 Python

浅谈Python 钉钉报警必备知识系统讲解

2020/08/17 Python

详解基于Scrapy的IP代理池搭建

2020/09/29 Python

经管应届生求职信

2013/11/17 职场文书

上班离岗检讨书

2014/01/27 职场文书

小学三年级数学教学反思

2014/01/31 职场文书

大学本科生职业生涯规划书范文

2014/09/14 职场文书

死亡赔偿协议书

2015/01/28 职场文书

2015年企业团支部工作总结

2015/05/21 职场文书

运动会加油稿

2015/07/22 职场文书

婚礼上证婚人致辞

2015/07/28 职场文书

MySQL一些常用高级SQL语句

2021/07/03 MySQL