</ul>
</li>
<li><a href="#media">Media object</a></li>
- <li><a href="#panels">Panels</a></li>
+ <li>
+ <a href="#panels">Panels</a>
+ <ul class="nav">
+ <li><a href="#panels-basic">Basic panel</a></li>
+ <li><a href="#panels-heading">Panel with heading</a></li>
+ <li><a href="#panels-alternatives">Contextual alternatives</a></li>
+ </ul>
+ </li>
<li><a href="#wells">Wells</a></li>
<!-- JavaScript -->
</div>
<p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
- <h3>Basic panel</h3>
+ <h3 id="panels-basic">Basic panel</h3>
<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
<div class="bs-docs-example">
<div class="panel">
</div>
{% endhighlight %}
- <h3>Panel with heading</h3>
+ <h3 id="panels-heading">Panel with heading</h3>
<p>Easily add a heading to your panel with <code>.panel-heading</code>. Use it on a <code><div></code> or any heading element (e.g., <code><h3></code>).</p>
<div class="bs-docs-example">
<div class="panel">
</div>
{% endhighlight %}
- <h3>Contextual alternatives</h3>
+ <h3 id="panels-alternatives">Contextual alternatives</h3>
<p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
<div class="bs-docs-example">
<div class="panel panel-success">