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

ExtJS Grid使用SimpleStore、多选框的方法

Nov 20 Javascript

input输入框的自动匹配(原生代码)

Mar 19 Javascript

eclipse导入jquery包后报错的解决方法

Feb 17 Javascript

JQuery下拉框应用示例介绍

Apr 23 Javascript

jQuery对象的selector属性用法实例

Dec 27 Javascript

jQuery中使用each处理json数据

Apr 23 Javascript

js如何改变文章的字体大小

Jan 08 Javascript

Select2.js下拉框使用小结

Oct 24 Javascript

JS中的Replace()传入函数时的用法详解

Sep 11 Javascript

JS实现网站吸顶条

Jan 08 Javascript

基于javascript实现碰撞检测

Mar 12 Javascript

ES6 async、await的基本使用方法示例

Jun 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重新实现PHP脚本引擎内置函数

2007/03/06 PHP

php中函数的形参与实参的问题说明

2010/09/01 PHP

ThinkPHP3.1新特性之动态设置自动完成和自动验证示例

2014/06/19 PHP

php使用ob_start()实现图片存入变量的方法

2014/11/14 PHP

php比较两个字符串长度的方法

2015/07/13 PHP

PHP中静态变量的使用方法实例分析

2016/12/01 PHP

thinkPHP显示不出验证码的原因与解决方法分析

2017/05/20 PHP

cloudgamer出品ImageZoom 图片放大效果

2010/04/01 Javascript

使用闭包对setTimeout进行简单封装避免出错

2013/07/10 Javascript

JavaScript 学习笔记之操作符（续）

2015/01/14 Javascript

jQuery选择id属性带有点符号元素的方法

2015/03/17 Javascript

详解javascript传统方法实现异步校验

2016/01/22 Javascript

详解angularjs 学习之 scope作用域

2018/01/15 Javascript

记一次webpack3升级webpack4的踩坑经历

2018/06/12 Javascript

jQuery属性选择器用法实例分析

2019/06/28 jQuery

浅谈Vue SSR中的Bundle的具有使用

2019/11/21 Javascript

如何手写简易的 Vue Router

2020/10/10 Javascript

python基础教程之元组操作使用详解

2014/03/25 Python

初步解析Python中的yield函数的用法

2015/04/03 Python

Python的MongoDB模块PyMongo操作方法集锦

2016/01/05 Python

python if not in 多条件判断代码

2016/09/21 Python

python好玩的项目—色情图片识别代码分享

2017/11/07 Python

python进阶之多线程对同一个全局变量的处理方法

2018/11/09 Python

Python 将json序列化后的字符串转换成字典(推荐)

2020/01/06 Python

Django修改app名称和数据表迁移方案实现

2020/09/17 Python

Canvas中设置width与height的问题浅析

2018/11/01 HTML / CSS

AP澳洲中文网：澳洲正品直邮，包税收件无忧

2019/07/12 全球购物

毕业生个人求职自荐信

2014/02/26 职场文书

《美丽的田园》教学反思

2014/03/01 职场文书

初一学生期末评语

2014/04/24 职场文书

2014年纪检工作总结

2014/11/12 职场文书

幼儿园教师工作总结2015

2015/04/02 职场文书

教师节大会主持词

2015/07/06 职场文书

《鸟的天堂》教学反思

2016/02/19 职场文书

Nginx安装完成没有生成sbin目录的解决方法

2021/03/31 Servers

python 利用 PIL 将数组值转成图片的实现

2021/04/12 Python