快速使用Bootstrap搭建传送带


Posted in Javascript onMay 06, 2016

bootstrap介绍

Bootstrap是前端开发中应用非常广泛的一个框架,最早是Twitter 公司内部的一个工具,开源之后迅速得到了各方的认可。本书基于最新的Bootstrap 3撰写,在简单介绍了安装与配置之后就直奔主题,分别讨论了个人作品站点、WordPress主题、企业网站、电子商务网站和单页营销网站等几个最具代表性的应用案例,结合这些案例细致地剖析了Bootstrap还有LESS的使用方式和技巧。

说了这么多,都是题外话,下面看看bootstrap搭建传送带的代码。

进度指示器

<div id="homepage-feature" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
<li data-target="#homepage-feature" data-slide-to="1" ></li>
<li data-target="#homepage-feature" data-slide-to="2" ></li>
<li data-target="#homepage-feature" data-slide-to="3" ></li>
</ol>

进度指示器的data-target属性必须使用传送带的ID homepage-featureJS插件为传送带添加active类。

<div class="carousel-inner">
<div class="item active">
<img >
</div>
<div class="item ">
<img >
</div>
...
</div>

然后是显示前一个后一个的按钮

<a class="left carousel-control" href="#homepage-feature" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#homepage-feature" data-slide="next">
<span class="glyphicon glyphicon-chevron-left"></span>
</a></div>

如此便好了。以上内容是小编给大家介绍的Bootstrap搭建传送带的相关知识,希望对大家有所帮助,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 Javascript
BootStrap响应式导航条实例介绍
May 06 #Javascript
jQuery侧边栏实现代码
May 06 #Javascript
BootStrap制作导航条实例代码
May 06 #Javascript
jQuery实现下拉框功能实例代码
May 06 #Javascript
jQuery 实现评论等级好评差评特效
May 06 #Javascript
Node.js插件安装图文教程
May 06 #Javascript
node.js插件nodeclipse安装图文教程
Oct 19 #Javascript
You might like
认识并使用PHP超级全局变量
2010/01/26 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
js查找节点的方法小结
2015/01/13 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
关于单文件组件.vue的使用
2018/09/20 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
Python基础语法(Python基础知识点)
2016/02/28 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
python去除文件中重复的行实例
2018/06/29 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
求职信模板怎么做
2014/01/26 职场文书
活动策划邀请函
2014/02/06 职场文书
法律六进活动方案
2014/03/13 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
学习普通话的体会
2014/11/07 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
二审答辩状格式
2015/05/22 职场文书
Java 定时任务技术趋势简介
2022/05/04 Java/Android