Bootstrap ScrollSpy 用法
用法
Twitter Bootstrap 的 ScrollSpy 插件有两种用法:
通过 data 属性
根据情况,给需要监视的页面元素添加
data-spy="scroll"
– 一般是 body 元素,并且通过data-target
属性指定目标:<body data-spy="scroll" data-target=".navbar">...</body>
通过 Javascript 语句
$('#navbar').scrollspy()
举一个例子,如下:
监控的导航部分 HTML 代码:
<div class="bs-docs-sidebar"><ul class="nav"><li><a href="#one">hello Bootstrp 3</a></li><li><a href="#two">hello jQuery</a></li><li><a href="#three">hello ScrollSpy</a></li></ul>
</div>
导航相对应的内容部分代码:
<div><h2 id="one">This is one.</h2><p>......</p><h2 id="two">This is two.</h2><p>......</p><h2 id="three">This is three.</h2><p>......</p>
</div>
上述代码里,我们点击导航部分的锚链接可以直接跳转到相应的内容部分,这是这最基本的 HTML 结构。
最重要的,导航代码中 ul
含有一个 CSS 类 .nav
,它是必需的,没有的话就会导致插件无效果。
应用第一个方法,在 body 元素添加相关属性:
<body data-spy="scroll" data-target=".bs-docs-sidebar">
data-target
属性指向的是 class 为 bs-docs-sidebar
的 div
块。
第二种办法,使用 JavaScript:
$(function(){$('.bs-docs-sidebar').scrollspy(); })
Bootstrap 文档推荐第一种方法,因为不用任何的 JavaScript 语句即可实现 ScrollSpy 效果。
附:jsfiddle 示例
调试
如果你的 ScrollSpy 不起作用,则有一个简单的调试办法,利用 fireQuery:
上图是安装 fireQuery 后打开 firebug 面板 HTML 标签页里的截图,因为 fireQuery 会将 jQuery 事件等附加在 HTML 代码中,所以我们可以清楚地看到如下一条规则,
selector=".bs-docs-sidebar .nav li > a"
如果你的导航部分 HTML 结构与它不一样,则说明 jQuery 找不到它要的元素,也就没法生成效果,解决办法是调整代码结构。
来源:www.zfanw.com/blog/bootstrap-scrollspy.html
默认的 bootstrap.css, 不是必须要加载的,只要给 .active 添加自定义的css style就可以!
Bootstrap ScrollSpy 用法相关推荐
- bootstrap php zend,Zend Framework教程之Bootstrap类用法概述
本文实例讲述了Zend Framework中Bootstrap类用法.分享给大家供大家参考,具体如下: Zend_Application_Bootstrap_Bootstrapper Zend_App ...
- bootstrap datetimepicker 用法+demo案例下载
bootstrap datetimepicker 用法+demo案例下载 官网文档地址是:http://www.bootcss.com/p/bootstrap-datetimepicker/ date ...
- bootstrap grid php,bootstrap grid用法
bootstrap grid的用法:首先使用container来包裹div:然后在div里面设置行:接着设置列能够快速对这个框架进行搭建:最后通过拖拽浏览器来改变宽窄即可. 本文操作环境:Window ...
- bootstrap select 用法
我们要做的功能是 点击下拉显示搜索框和数据,搜索框内输入关键字可以匹配数据内容,并可以多选 实现效果如下 首先引入jquery和bootstrap <link rel="stylesh ...
- Bootstrap基本用法
Bootstrap Bootstrap是简洁.直观.强悍的前端开发框架,让web开发更迅速.简单. Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先 ...
- jQuery滚动监听插件Waypoints
你是否希望当用户仅仅滚动滑条的时候,就能触发各种各样的动态效果呢?比如图片浮现.文字漂移等各种各样的动画!那么我就推荐你一款用于捕获各种滚动事件的插件-Waypoints.同时Waypoints还支持 ...
- python写前端代码_python前端学习之移动端和bootstrap
我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢 ...
- 基于Servlet+JDBC+Bootstrap+MySQL+AJAX权限管理系统项目实战教程
项目简介 权限系统一直以来是我们应用系统不可缺少的一个部分,若每个应用系统都重新对系统的权限进行设计,以满足不同系统用户的需求,将会浪费我们不少宝贵时间,所以花时间来设计一个相对通用的权限系统是很有意 ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
最新文章
- 云上护航服务—保障云上的尖峰时刻
- 计算机背景象怎样改变,我的页面背景总是黑色,以前改变过现在好象改变不了?我该怎么改变呢? 爱问知识人...
- 《深入理解Java虚拟机》读书笔记八
- 栅格布局一般怎么用_建筑混凝土色差大怎么办?用这种方法处理,一般都看不出来...
- hidl 原理分析_一个 health service 不生效问题引出的一点知识
- java逻辑运算符_Java逻辑运算符
- 【springBoot】注解的详解
- Flutter透明度渐变动画FadeTransition实现透明度渐变动画效果
- PDF Expert使用教程:如何在Mac中删除PDF文件中的指定页面?
- base64编码 vba_[VBA]Base64编码和Base64解码
- vfp 连接mysql数据库,vfp数据库的asp连接
- Linux系统的关机重启命令
- 浅谈Clean Code
- 探秘Google新搜索引擎算法
- excel怎么自动填充连续数字
- 如何用python爬取下载微博视频_程序员徒手用python教你爬取新浪微博,一天可抓取 1300 万条数据...
- jena java_java – 使用Jena查询wikidata
- 职场中哪些职场很重要?
- Linux基本命令---2
- 哒螨灵使用注意事项_溴氰菊酯的使用注意事项
热门文章
- 大整数的因子(信息学奥赛一本通-T1171)
- 40 CO配置-控制-产品成本控制-成本对象控制-实际成本核算/物料分类帐-维护材料分类帐文档的编号范围
- 日语学习-多邻国-时间
- vc6 前进后退 番茄_比较圣女果与西红柿中的Vc含量解读
- python爬虫实际应用_如何使用python爬虫论坛?
- python好用的第三方库_非常有用的 Python 第三方库
- C++:fseek( FILE *stream, long offset, int origin )
- Observer的实现
- [Unity] 战斗系统学习 5:构建 TPS 框架 1
- 不能在本地计算机启动 dtc,win10系统dTC服务无法启动的操作技巧