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

excel操作之Add Data to a Spreadsheet Cell

Jun 12 Javascript

mailto的使用技巧分享

Dec 21 Javascript

JQuery中关于jquery.js与jquery.min.js的比较探讨

May 15 Javascript

jquery预加载图片的方法

May 27 Javascript

JS实现仿QQ效果的三级竖向菜单

Sep 25 Javascript

javascript HTML5 canvas实现打砖块游戏

Jun 18 Javascript

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

May 12 Javascript

js调用屏幕宽度的简单方法

Nov 14 Javascript

knockoutjs模板实现树形结构列表

Jul 31 Javascript

weebox弹出窗口不居中显示的解决方法

Nov 27 Javascript

vue自定义全局共用函数详解

Sep 18 Javascript

create-react-app使用antd按需加载的样式无效问题的解决

Feb 26 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

为了这两部电子管收音机，买了6套全新电子管和10粒刻度盘灯泡

2021/03/02 无线电

Php中文件下载功能实现超详细流程分析

2012/06/13 PHP

PHP闭包(Closure)使用详解

2013/05/02 PHP

深入php中var_dump方法的使用详解

2013/06/24 PHP

php中数据库连接方式pdo和mysqli对比分析

2015/02/25 PHP

兼容Mozilla必须知道的知识。

2007/01/09 Javascript

jQuery中end()方法用法实例

2015/01/08 Javascript

理解Angular数据双向绑定

2016/01/10 Javascript

JavaScript 浏览器兼容性总结及常用浏览器兼容性分析

2016/03/30 Javascript

利用原生js和jQuery实现单选框的勾选和取消操作的方法

2016/09/04 Javascript

仿iframe效果Aajx文件上传实例

2016/11/18 Javascript

Angualrjs和bootstrap相结合实现数据表格table

2017/03/30 Javascript

React组件之间的通信的实例代码

2017/06/27 Javascript

javascript系统时间设置操作示例

2019/06/17 Javascript

vue悬浮可拖拽悬浮按钮的实例代码

2019/08/20 Javascript

深入解读VUE中的异步渲染的实现

2020/06/19 Javascript

解决vue bus.$emit触发第一次$on监听不到问题

2020/07/28 Javascript

python以环状形式组合排列图片并输出的方法

2015/03/17 Python

利用python为运维人员写一个监控脚本

2018/03/25 Python

Python把csv数据写入list和字典类型的变量脚本方法

2018/06/15 Python

python中ImageTk.PhotoImage()不显示图片却不报错问题解决

2018/12/06 Python

python快速编写单行注释多行注释的方法

2019/07/31 Python

Python for i in range ()用法详解

2020/09/18 Python

html5与css3小应用

2013/04/03 HTML / CSS

如何查看浏览器对html5的支持情况

2020/12/15 HTML / CSS

行政助理岗位职责范文

2013/12/03 职场文书

九年级英语教学反思

2014/01/31 职场文书

大学生创业策划书

2014/02/02 职场文书

给市场的环保建议书

2014/05/14 职场文书

公司员工安全协议书

2014/11/21 职场文书

三八妇女节寄语

2015/02/27 职场文书

2015年高三教学工作总结

2015/07/21 职场文书

《语言的突破》读后感3篇

2019/12/12 职场文书

Python基于Tkinter开发一个爬取B站直播弹幕的工具

2021/05/06 Python

Elasticsearch Recovery 详细介绍

2022/04/19 Java/Android

二维码条形码生成的JavaScript脚本库

2022/07/07 Javascript