mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
Fixes #7093: more consistent scrollspy docs
This commit is contained in:
parent
510c9a6ad8
commit
0c9b161bb8
@ -5327,7 +5327,7 @@ $('.dropdown-toggle').dropdown()
|
||||
<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>
|
||||
<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="container" style="width: auto;">
|
||||
<a class="navbar-brand" href="#">Project Name</a>
|
||||
@ -5347,7 +5347,7 @@ $('.dropdown-toggle').dropdown()
|
||||
</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>
|
||||
<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>
|
||||
@ -5364,15 +5364,12 @@ $('.dropdown-toggle').dropdown()
|
||||
</div><!-- /example -->
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Usage</h2>
|
||||
|
||||
<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><body></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 %}
|
||||
<body data-spy="scroll" data-target=".navbar">
|
||||
<body data-spy="scroll" data-target="#navbar-example">
|
||||
...
|
||||
</body>
|
||||
{% endhighlight %}
|
||||
@ -5380,7 +5377,7 @@ $('.dropdown-toggle').dropdown()
|
||||
<h3>Via JavaScript</h3>
|
||||
<p>Call the scrollspy via JavaScript:</p>
|
||||
{% highlight js linenos %}
|
||||
$('.navbar').scrollspy()
|
||||
$('#navbar-example').scrollspy()
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-docs-sidenote">
|
||||
|
Loading…
x
Reference in New Issue
Block a user