gpt4 book ai didi

twitter-bootstrap - 使 ScrollSpy Bootstrap 侧边栏像示例一样的最少代码是多少?

转载 作者:行者123 更新时间:2023-12-03 10:35:28 24 4
gpt4 key购买 nike

我在 Bootstrap 页面上看到了左侧的 ScrollSpy 示例:

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

但是他们没有任何示例代码来说明如何获得相同的样式和效果?实现这一点所需的最少代码是多少,因为我见过的所有 JsFiddle 示例都没有样式。

更新

我已停止在我的项目中使用 scrollspy,因为滚动条仅在页面级别有效,并且我需要滚动条仅出现在发生滚动的容器上

最佳答案

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

  • 在正文标签中添加 <body data-spy="scroll" data-target="#side-nav">(见 fiddle 选项左栏)
  • 使用相同的数据目标 ID 将侧导航栏包裹在 div 中:<div id="side-nav" >
  • 您可能想要添加类 到您的侧导航,使其保持原位:<ul class="nav nav-pills affix">
  • 为侧导航中的每个链接添加一个唯一 ID:例如 <li><a href="#one">One</a></li>
  • 在页面的主体中,添加 ID 与侧栏中的链接匹配的部分:例如 <section id="one"> Section 1 </section>

  • 而已!

    编辑

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



    如果您想要类似于 Bootstrap 页面的样式,这里有一个变体
    http://jsfiddle.net/panchroma/ExWDq/

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

    关于twitter-bootstrap - 使 ScrollSpy Bootstrap 侧边栏像示例一样的最少代码是多少?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17760022/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com