</ul>
</li>
<li>
- <a href="#navs">Navs</a>
- <ul class="nav">
- <li><a href="#navs-"></a></li>
- <li><a href="#navs-"></a></li>
- <li><a href="#navs-"></a></li>
+ <a href="#nav">Navs</a>
+ <ul class="nav">
+ <li><a href="#nav-tabs">Tabs nav</a></li>
+ <li><a href="#nav-pills">Pills nav</a></li>
+ <li><a href="#nav-list">List nav</a></li>
+ <li><a href="#nav-justified">Justified nav</a></li>
+ <li><a href="#nav-disabled-links">Disabled links</a></li>
+ <li><a href="#nav-alignment">Alignment options</a></li>
+ <li><a href="#nav-dropdowns">Using dropdowns</a></li>
</ul>
</li>
<li>
<!-- Navs
================================================== -->
- <div class="bs-docs-section" id="navs">
+ <div class="bs-docs-section" id="nav">
<div class="page-header">
<h1>Navs</small></h1>
</div>
<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
- <h2>Tabs</h2>
+ <h2 id="nav-tabs">Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<div class="bs-docs-example">
<ul class="nav nav-tabs">
</ul>
{% endhighlight %}
- <h2>List</h2>
+ <h2 id="nav-list">List</h2>
<p>Swap the tabs class for <code>.nav-list</code>.</p>
<div class="bs-docs-example">
<ul class="nav nav-list" style="max-width: 300px;">
</ul>
{% endhighlight %}
- <h2>Pills</h2>
+ <h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-docs-example">
<ul class="nav nav-pills">
<h2>Options</h2>
- <h3>Justified links</h3>
+ <h3 id="nav-justified">Justified links</h3>
<p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
<div class="bs-docs-example">
<ul class="nav nav-tabs nav-justified">
</ul>
{% endhighlight %}
- <h3>Disabled state</h3>
+ <h3 id="nav-disabled-links">Disabled state</h3>
<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
<div class="bs-docs-example">
<ul class="nav nav-pills">
{% endhighlight %}
- <h3>Component alignment</h3>
+ <h3 id="nav-alignment">Component alignment</h3>
<p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<hr class="bs-docs-separator">
- <h2>Dropdowns</h2>
+ <h2 id="nav-dropdowns">Dropdowns</h2>
<p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Tabs with dropdowns</h3>