编程 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 对象成员的可见性说明

Oct 16 Javascript

使用js在页面中绘制表格核心代码

Sep 16 Javascript

JQ获取动态加载的图片大小的正确方法分享

Nov 08 Javascript

jQuery产品间断向下滚动效果核心代码

May 08 Javascript

jquery实现点击label的同时触发文本框点击事件的方法

Jun 05 Javascript

利用jQuery实现漂亮的圆形进度条倒计时插件

Sep 30 Javascript

AngularJS Ajax详解及示例代码

Aug 17 Javascript

jQuery实现的无限级下拉菜单功能示例

Sep 12 Javascript

学习JS中的DOM节点以及操作

Apr 30 Javascript

浅谈对于react-thunk中间件的简单理解

May 01 Javascript

Vue在chrome44偶现点击子元素事件无法冒泡的解决方法

Dec 15 Javascript

在vue中使用inheritAttrs实现组件的扩展性介绍

Dec 07 Vue.js

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 根据IP地址控制访问的代码

2010/04/22 PHP

PHP使用逆波兰式计算工资的方法

2015/07/29 PHP

PHP Filter过滤器全面解析

2016/08/09 PHP

PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】

2018/05/21 PHP

php用wangeditor3实现图片上传功能

2019/08/22 PHP

Prototype Selector对象学习

2009/07/23 Javascript

Microsoft Ajax Minifier 压缩javascript的方法

2010/03/05 Javascript

jQuery UI 应用不同Theme的办法

2010/09/12 Javascript

js变量以及其作用域详解

2020/07/18 Javascript

js克隆对象、数组的常用方法介绍

2013/09/26 Javascript

javascript操作css属性

2013/12/30 Javascript

jquery序列化表单去除指定元素示例代码

2014/04/10 Javascript

JS+CSS实现可以凹陷显示选中单元格的方法

2015/03/02 Javascript

jQuery延迟加载图片插件Lazy Load使用指南

2015/03/25 Javascript

Centos7 中安装 Node.js v4.4.4

2016/11/03 Javascript

angularjs利用directive实现移动端自定义软键盘的示例

2017/09/20 Javascript

JavaScript实现小球沿正弦曲线运动

2020/09/07 Javascript

JS实现判断数组是否包含某个元素示例

2019/05/24 Javascript

vue-router结合vuex实现用户权限控制功能

2019/11/14 Javascript

python中for语句简单遍历数据的方法

2015/05/07 Python

django站点管理详解

2017/12/12 Python

详解python OpenCV学习笔记之直方图均衡化

2018/02/08 Python

python 2.7.14安装图文教程

2018/04/08 Python

python3.9.1环境安装的方法(图文)

2021/02/02 Python

HTML5之SVG 2D入门4—笔画与填充

2013/01/30 HTML / CSS

印尼在线精品店：Berrybenka.com

2016/10/22 全球购物

美国在线精品家居网站：Burke Decor

2017/04/12 全球购物

实习护理工作自我评价

2013/09/25 职场文书

师范生自荐信

2013/10/27 职场文书

校园学雷锋活动月总结

2014/03/09 职场文书

工程建设实施方案

2014/03/14 职场文书

反腐倡廉标语

2014/06/24 职场文书

学校学雷锋活动总结

2014/06/26 职场文书

免职证明样本

2014/10/23 职场文书

社区挂职锻炼个人工作总结

2015/10/23 职场文书

el-table-column 内容不自动换行的解决方法

2022/08/14 Vue.js