编程 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获取QueryString的方法小结

Feb 28 Javascript

B/S模式项目中常用的javascript汇总

Dec 17 Javascript

利用原生JavaScript获取元素样式只是获取而已

Oct 08 Javascript

javascript实现设置、获取和删除Cookie的方法

Jun 01 Javascript

Labelauty?jQuery单选框/复选框美化插件分享

Sep 26 Javascript

网页从弹窗页面单选框传值至父页面代码分享

Sep 29 Javascript

基于jQuery实现滚动刷新效果

Jan 09 Javascript

微信小程序 setData的使用方法详解

Apr 20 Javascript

vue.js语法及常用指令

Oct 29 Javascript

vue项目中mock.js的使用及基本用法

May 22 Javascript

Vue项目中如何封装axios（统一管理http请求）

May 02 Vue.js

使用Canvas绘制一个游戏人物属性图

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

追忆往昔！浅谈收音机的百年发展历史

2021/03/01 无线电

php 各种应用乱码问题的解决方法

2010/05/09 PHP

php数组索引的Key加引号和不加引号的区别

2014/08/19 PHP

PHP类与对象后期静态绑定操作实例详解

2018/12/20 PHP

常见的5个PHP编码小陋习以及优化实例讲解

2021/02/27 PHP

不用MOUSEMOVE也能滑动啊

2007/05/23 Javascript

js wmp操作代码小结(音乐连播功能)

2008/11/08 Javascript

js 返回时间戳所对应的具体时间

2010/07/20 Javascript

浅谈关于JavaScript API设计的一些建议和准则

2015/06/24 Javascript

浅谈关于angularJs中使用$.ajax的注意点

2017/08/12 Javascript

AngularJS实现的输入框字数限制提醒功能示例

2017/10/26 Javascript

解决betterScroll在vue中存在图片时,出现拉不动的问题

2018/09/27 Javascript

简单的React SSR服务器渲染实现

2018/12/11 Javascript

微信小程序实现的绘制table表格功能示例

2019/04/26 Javascript

微信小程序中悬浮窗功能的实现代码

2019/08/02 Javascript

Vue登录主页动态背景短视频制作

2019/09/21 Javascript

JavaScript Reflect Metadata实现详解

2019/12/12 Javascript

阿望教你用vue写扫雷小游戏

2020/01/20 Javascript

Javascript基于OOP实实现探测器功能代码实例

2020/08/26 Javascript

[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17

2020/12/18 DOTA

Django自定义分页效果

2017/06/27 Python

详解Python3 pandas.merge用法

2019/09/05 Python

Python使用matplotlib实现交换式图形显示功能示例

2019/09/06 Python

解决flask接口返回的内容中文乱码的问题

2020/04/03 Python

Python插件机制实现详解

2020/05/04 Python

pandas 数据类型转换的实现

2020/12/29 Python

法务专员岗位职责

2014/01/02 职场文书

单位领导证婚词

2014/01/14 职场文书

百货商场楼层班组长竞聘书

2014/03/31 职场文书

团支书竞选演讲稿

2014/04/28 职场文书

捐助贫困学生倡议书

2014/05/16 职场文书

元旦晚会活动总结

2014/07/09 职场文书

赔偿协议书怎么写

2015/01/28 职场文书

管理人员岗位职责

2015/02/14 职场文书

2016年清明节红领巾广播稿

2015/12/17 职场文书

使用Djongo模块在Django中使用MongoDB数据库

2021/06/20 Python