rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases Activity

navs nav links

Browse Source
This commit is contained in:
Mark Otto 2013-03-30 13:14:04 -07:00
parent e9dd1826be
commit 171c7feae2
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/_includes/docs-nav.html
View File

@ -103,11 +103,15 @@
</ul>
</li>
<li>
<a href="#navs">Navs</a>
<a href="#nav">Navs</a>
<ul class="nav">
<li><a href="#navs-"></a></li>
<li><a href="#navs-"></a></li>
<li><a href="#navs-"></a></li>
<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>

16
docs/docs.html
View File

@ -3072,14 +3072,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<!-- 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">
@ -3096,7 +3096,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</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;">
@ -3113,7 +3113,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</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">
@ -3145,7 +3145,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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">
@ -3169,7 +3169,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</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">
@ -3187,14 +3187,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% 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>