快速使用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的15款幻灯片插件
Apr 10 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
JS实现页面侧边栏效果探究
Jan 08 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
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 全文搜索和替换的实现代码
2008/07/29 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
javascript 学习之旅 (3)
2009/02/05 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
深入理解Promise.all
2018/08/08 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
为什么使用接口?
2014/08/13 面试题
几道数据库的面试题或笔试题
2014/05/31 面试题
职业技术学校毕业生推荐信
2013/12/03 职场文书
高三英语教学反思
2014/01/13 职场文书
趣味游戏活动方案
2014/02/07 职场文书
公司合作协议书范本
2014/04/18 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL