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

发布时间：2020-12-18 00:10:16 所属栏目：安全来源：网络整理

导读：我在Bootstrap页面上看到了左侧的ScrollSpy示例： http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy 但他们没有任何示例代码如何获得相同的风格和效果？实现这一点所需的最小代码是什么，因为我看到的所有JsFiddle示例都没有样式。更新

我在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形，并为导航列表添加了样式和媒体查询。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!