Commit 0c9b161b authored by Mark Otto's avatar Mark Otto
Browse files

Fixes #7093: more consistent scrollspy docs

parent 510c9a6a
10 merge requests!8635ignore Gruntfile.js in jekyll,!8339Fix broken links to navbar component in docs examples,!7674Clear float on all when navbar is collapsed - v3,!7775added some tests for tooltip title setter,!8157Close Me: Docs "Customize and Download" button fix,!7964commit fixes #7792,!8656Added rel="stylesheet" to CDN-Examples,!8527Inner properties move 1,!8245Interactive color picker - Closed: request against wrong branch,!7865Patch 2
Showing with 5 additions and 8 deletions
+5 -8
...@@ -5327,7 +5327,7 @@ $('.dropdown-toggle').dropdown() ...@@ -5327,7 +5327,7 @@ $('.dropdown-toggle').dropdown()
<h2>Example in navbar</h2> <h2>Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p> <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div id="navbarExample" class="navbar navbar-static"> <div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a> <a class="navbar-brand" href="#">Project Name</a>
...@@ -5347,7 +5347,7 @@ $('.dropdown-toggle').dropdown() ...@@ -5347,7 +5347,7 @@ $('.dropdown-toggle').dropdown()
</div> </div>
</div> </div>
</div> </div>
<div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example"> <div data-spy="scroll" data-target="#navbar-example" data-offset="0" class="scrollspy-example">
<h4 id="fat">@fat</h4> <h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h4 id="mdo">@mdo</h4> <h4 id="mdo">@mdo</h4>
...@@ -5364,15 +5364,12 @@ $('.dropdown-toggle').dropdown() ...@@ -5364,15 +5364,12 @@ $('.dropdown-toggle').dropdown()
</div><!-- /example --> </div><!-- /example -->
<hr class="bs-docs-separator">
<h2>Usage</h2> <h2>Usage</h2>
<h3>Via data attributes</h3> <h3>Via data attributes</h3>
<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body) and <code>data-target=".navbar"</code> to select which nav to use. You'll want to use scrollspy with a <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 linenos %} {% highlight html linenos %}
<body data-spy="scroll" data-target=".navbar"> <body data-spy="scroll" data-target="#navbar-example">
... ...
</body> </body>
{% endhighlight %} {% endhighlight %}
...@@ -5380,7 +5377,7 @@ $('.dropdown-toggle').dropdown() ...@@ -5380,7 +5377,7 @@ $('.dropdown-toggle').dropdown()
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>
<p>Call the scrollspy via JavaScript:</p> <p>Call the scrollspy via JavaScript:</p>
{% highlight js linenos %} {% highlight js linenos %}
$('.navbar').scrollspy() $('#navbar-example').scrollspy()
{% endhighlight %} {% endhighlight %}
<div class="bs-docs-sidenote"> <div class="bs-docs-sidenote">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment