快速使用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 相关文章推荐
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
javascript版2048小游戏
Mar 18 Javascript
JQuery工具函数汇总
Jun 15 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
javascript this详细介绍
Sep 19 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 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中cookie的作用域
2008/03/27 PHP
yii框架源码分析之创建controller代码
2011/06/28 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
JS的数组迭代方法
2015/02/05 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
美国零售商店:Blue&Cream
2017/04/07 全球购物
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
Order by的几种用法
2013/06/16 面试题
使用索引有什么好处
2016/07/27 面试题
继承公证书
2014/04/09 职场文书
学校计划生育责任书
2015/05/09 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
用JS实现飞机大战小游戏
2021/06/09 Javascript
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
python3 字符串str和bytes相互转换
2022/03/23 Python
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server