twitter-bootstrap 使 ScrollSpy bootstrap 侧边栏像示例一样的最少代码是多少？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17760022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the minimum code to make ScrollSpy bootstrap sidebar like the example?
提问by Yazz.com
I have seen the left hand ScrollSpy example on the bootstrap page:
我在引导页面上看到了左侧的 ScrollSpy 示例：
http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy
http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy
But they don't have any example code of how to get the same style and effect? What is the minimum code needed to achieve this, as all the JsFiddle examples I have seen do not have the styling.
但是他们没有任何示例代码如何获得相同的样式和效果？实现这一点所需的最少代码是多少，因为我见过的所有 JsFiddle 示例都没有样式。
Update
更新
I have stopped using scrollspy on my projects as the scrollbar only works at the page level, and I need the scrollbar to only appear on the container where the scrolling takes place
我已经停止在我的项目中使用 scrollspy，因为滚动条只在页面级别工作，我需要滚动条只出现在发生滚动的容器上
回答by David Taiaroa
See if this helps: http://jsfiddle.net/panchroma/rWYQu/
看看这是否有帮助：http: //jsfiddle.net/panchroma/rWYQu/
In the body tag add
<body data-spy="scroll" data-target="#side-nav">
( see fiddle options left hand column)Wrap your side nav bar in a div with this same data-target ID:
<div id="side-nav" >You probably want to add the class affixto your side nav so that it stays in place:
<ul class="nav nav-pills affix">Add a unique ID to each of the links in your side nav: eg
<li><a href="#one">One</a></li>In the main body of the page, add sections with IDs that match the links in your side bar: eg
<section id="one"> Section 1 </section>
在 body 标签中添加
<body data-spy="scroll" data-target="#side-nav">
（见小提琴选项左手栏）使用相同的数据目标 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>
That's it!
而已！
EDIT
编辑
How do I get it to style like the Bootstrap example on their site though?
我如何让它像他们网站上的 Bootstrap 示例一样？
Here's a variation if you want stying similar to the bootstrap page
http://jsfiddle.net/panchroma/ExWDq/
如果您想要类似于引导程序页面
http://jsfiddle.net/panchroma/ExWDq/
You will see that I've changed the classes on the nav list ul to make better use of some built in Bootstap styling, I've added chevrons to the menu links, and added styling and media queries for the nav list.
您将看到我更改了导航列表 ul 上的类以更好地利用一些内置的 Bootstap 样式，我已将 V 形添加到菜单链接，并为导航列表添加样式和媒体查询。
回答by botheredbybees
While doing some research into using sidenav scrollspy I found a good tutorial on coding everything
在对使用 sidenav scrollspy 进行一些研究时，我发现了一个关于编码一切的好教程
All the source can be found on github
所有源码都可以在github上找到
