mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-24 14:04:09 +03:00
Code Activity

Navs refactor, restoring .nav-list

Browse Source
This commit is contained in:
Mark Otto
2012-11-03 16:14:44 -07:00
parent a12eb2b9f5
commit c0eacca0db
6 changed files with 221 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components.html
+40 -52
View File
@@ -668,18 +668,17 @@
<!-- Nav, Tabs, & Pills
<!-- Navs
================================================== -->
<section id="navs">
<div class="page-header">
<h1>Nav: tabs, pills, and lists</small></h1>
<h1>Navs</small></h1>
</div>
<h2>Lightweight defaults <small>Same markup, different classes</small></h2>
<p>All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
<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>
<h3>Basic tabs</h3>
<p>Take a regular <code>&lt;ul&gt;</code> of links and add <code>.nav-tabs</code>:</p>
<h2>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">
<li class="active"><a href="#">Home</a></li>
@@ -697,7 +696,26 @@
&lt;/ul&gt;
</pre>
<h3>Basic pills</h3>
<h2>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;">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
&lt;li class="active"&gt;
&lt;a href="#"&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h2>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">
@@ -715,6 +733,21 @@
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<div class="bs-docs-example">
<ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-pills nav-stacked"&gt;
...
&lt;/ul&gt;
</pre>
<h2>Options</h2>
<h3>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>
@@ -740,51 +773,6 @@
<hr class="bs-docs-separator">
<h2>Stackable</h2>
<p>As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.</p>
<h3>Stacked tabs</h3>
<div class="bs-docs-example">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs nav-stacked"&gt;
...
&lt;/ul&gt;
</pre>
<h3>Stacked pills</h3>
<div class="bs-docs-example">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-pills nav-stacked"&gt;
...
&lt;/ul&gt;
</pre>
<h3>Horizontal dividers</h3>
<p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs nav-stacked"&gt;
...
&lt;li class="divider"&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</pre>
<hr class="bs-docs-separator">
<h2>Dropdowns</h2>
<p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>