快速使用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 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
js图片自动切换效果处理代码
May 07 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
微信小程序地图实现展示线路
Jul 29 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的几个常用数字判断函数代码
2012/04/24 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
PHP如何使用Memcached
2016/04/05 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
python实现贪吃蛇小游戏
2020/03/21 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Python如何实现动态数组
2019/11/02 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
Python wordcloud库安装方法总结
2020/12/31 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
经销商培训邀请函
2014/01/21 职场文书
工作表现自我评价
2014/02/08 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
入党政审材料范文
2014/12/24 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python