rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-04-10 02:02:26 +02:00
Code Issues Actions 12 Packages Releases Activity

Update scrollspy docs to more clearly indicate usage

Browse Source
This commit is contained in:
Mark Otto 2013-11-29 20:25:07 -08:00
parent a4c54b5e5d
commit 7d456aef76
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
javascript.html
View File

@ -529,6 +529,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {
{% endhighlight %} {% endhighlight %}
</div> </div>
<!-- ScrollSpy <!-- ScrollSpy
================================================== --> ================================================== -->
<div class="bs-docs-section"> <div class="bs-docs-section">
@ -588,7 +589,13 @@ $('#myDropdown').on('show.bs.dropdown', function () {
<h3>Via data attributes</h3> <h3>Via data attributes</h3>
<p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code>&lt;body&gt;</code>). Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p> <p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code>&lt;body&gt;</code>). Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
{% highlight html %} {% highlight html %}
<body data-spy="scroll" data-target="#navbar-example"> <body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
<ul class="nav nav-tabs">
...
</ul>
</div>
... ...
</body> </body>
{% endhighlight %} {% endhighlight %}
@ -596,7 +603,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>
<p>Call the scrollspy via JavaScript:</p> <p>Call the scrollspy via JavaScript:</p>
{% highlight js %} {% highlight js %}
$('body').scrollspy({ target: '#navbar-example' }) $('body').scrollspy({ target: '.navbar-example' })
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">