twitter-bootstrap – 使ScrollSpy引导侧边栏的最小代码是什么样的例子?

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 使ScrollSpy引导侧边栏的最小代码是什么样的例子?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在Bootstrap页面上看到了左侧的ScrollSpy示例:

http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy

但他们没有任何示例代码如何获得相同的风格和效果?实现这一点所需的最小代码是什么,因为我看到的所有JsFiddle示例都没有样式。

更新

我已经停止在我的项目中使用scrollspy,因为滚动条只能在页面级别工作,我需要滚动条才能出现在容器上,滚动发生

解决方法

看看是否有帮助:
http://jsfiddle.net/panchroma/rWYQu/

>在body标签添加< body data-spy =“scroll”data-target =“#side-nav”>
(见小提琴选项左手栏)
>使用相同的数据目标ID将div侧面的导航栏包裹在div中:< div id =“side-nav”>
>你可能希望将类粘贴添加到你的侧面导航栏中,使其保持原样:< ul class =“nav nav-list affix”>
>向您侧面的每个链接添加一个唯一的ID nav:eg< li>< a href =“#one”> One< / a>< / li>
>在页面的主体中,添加ID与您的侧栏中的链接相匹配的部分:例如< section id =“one”>第1节< / section>

而已!

编辑

How do I get it to style like the Bootstrap example on their site though?

如果您想要与引导页面相似,这是一个变体
http://jsfiddle.net/panchroma/ExWDq/

您将看到我已经更改了nav列表中的类,以更好地利用一些内置的Bootstap样式,我已经在菜单链接添加了V形,并为导航列表添加了样式和媒体查询

原文链接:https://www.f2er.com/bootstrap/234358.html

猜你在找的Bootstrap相关文章