编程 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 得到变量类型的函数

May 19 Javascript

jquery实现邮箱自动补全功能示例分享

Feb 17 Javascript

json中换行符的处理方法示例介绍

Jun 10 Javascript

深入浅出 jQuery中的事件机制

Aug 23 Javascript

微信小程序加载 app-service.js 错误解决方法

Oct 12 Javascript

JavaScript实现获取用户单击body中所有A标签内容的方法

Jun 05 Javascript

React Native 自定义下拉刷新上拉加载的列表的示例

Mar 01 Javascript

使用vue-router beforEach实现判断用户登录跳转路由筛选功能

Jun 25 Javascript

使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部

Sep 16 Javascript

webpack 最佳配置指北(推荐)

Jan 07 Javascript

如何实现echarts markline标签名显示自己想要的

Jul 20 Javascript

vue-cli3项目配置eslint代码规范的完整步骤

Sep 10 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 session 检测和注销

2009/03/16 PHP

基于php使用memcache存储session的详解

2013/06/25 PHP

浅析php过滤html字符串,防止SQL注入的方法

2013/07/02 PHP

php var_export与var_dump 输出的不同

2013/08/09 PHP

使用Jquery实现点击文字后变成文本框且可修改

2013/09/21 Javascript

js实现省市联动效果的简单实例

2014/02/10 Javascript

使用jQueryMobile实现滑动翻页效果的方法

2015/02/04 Javascript

javascript关于open.window子页面执行完成后刷新父页面的问题分析

2015/04/27 Javascript

JavaScript中的时间处理小结

2016/02/24 Javascript

浅谈JavaScript for循环闭包

2016/06/22 Javascript

浅谈JSON.stringify()和JOSN.parse()方法的不同

2016/08/29 Javascript

详解vue组件化开发-vuex状态管理库

2017/04/10 Javascript

JS 仿支付宝input文本输入框放大组件的实例

2017/11/14 Javascript

关于HTTP传输中gzip压缩的秘密探索分析

2018/01/12 Javascript

JavaScript实现的贝塞尔曲线算法简单示例

2018/01/30 Javascript

小程序api实现promise封装过程解析

2019/11/21 Javascript

用jQuery实现抽奖程序

2020/04/12 jQuery

Json实现传值到后台代码实例

2020/06/30 Javascript

bootstrap-closable-tab可实现关闭的tab标签页插件

2020/08/09 Javascript

Python单元测试框架unittest使用方法讲解

2015/04/13 Python

在Python程序员面试中被问的最多的10道题

2017/12/05 Python

Django之使用内置函数和celery发邮件的方法示例

2019/09/16 Python

解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题

2020/06/23 Python

python list等分并从等分的子集中随机选取一个数

2020/11/16 Python

英国最大的高品质珠宝和手表专家：Goldsmiths

2017/03/11 全球购物

HomeAway的巴西品牌：Alugue Temporada

2018/04/10 全球购物

如何在Cookie里面保存Unicode和国际化字符

2013/05/25 面试题

群众路线组织生活会发言材料

2014/10/17 职场文书

医德医风自我评价2015

2015/03/03 职场文书

2015年小学一年级班主任工作总结

2015/05/21 职场文书

欠条样本

2015/07/03 职场文书

Python实现随机生成迷宫并自动寻路

2021/06/13 Python

python可视化大屏库big_screen示例详解

2021/11/23 Python

你需要掌握的20个Python常用技巧

2022/02/28 Python

flex弹性布局详解

2022/03/20 HTML / CSS

Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法

2022/08/05 数码科技