Commit 171c7fea authored by Mark Otto's avatar Mark Otto
Browse files

navs nav links

parent e9dd1826
11 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,!7651Drop the sizzle dependency to allow smaller builds targeting mobile devices
Showing with 17 additions and 13 deletions
+17 -13
......@@ -103,11 +103,15 @@
</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>
......
......@@ -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>
......
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