remove .nav-list, instead use .nav-stacked on .nav-tabs or .nav-pills from now on

This commit is contained in:
Mark Otto 2012-10-01 00:06:44 -07:00
parent 26386ad615
commit eb555b7a9d
4 changed files with 22 additions and 152 deletions

View File

@ -3383,35 +3383,7 @@ input[type="button"].btn-block {
margin-top: 9px;
}
.nav-list {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
margin-right: -15px;
margin-left: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #0088cc;
}
.nav-list [class^="icon-"] {
margin-right: 2px;
}
.nav-list .divider {
.nav .divider {
height: 1px;
margin: 9px 1px;
overflow: hidden;

View File

@ -740,6 +740,16 @@
</ul>
</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">
@ -813,53 +823,6 @@
&lt;/ul&gt;
</pre>
<hr class="bs-docs-separator">
<h2>Nav lists</h2>
<p>A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
<h3>Example nav list</h3>
<p>Take a list of links and add <code>class="nav nav-list"</code>:</p>
<div class="bs-docs-example">
<div class="well" style="max-width: 340px; padding: 8px 0;">
<ul class="nav nav-list">
<li class="nav-header">List header</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Applications</a></li>
<li class="nav-header">Another list header</li>
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Help</a></li>
</ul>
</div> <!-- /well -->
</div>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
&lt;li class="nav-header"&gt;List header&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</pre>
<p>
<span class="label label-info">Note</span>
For nesting within a nav list, include <code>class="nav nav-list"</code> on any nested <code>&lt;ul&gt;</code>.
</p>
<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-list"&gt;
...
&lt;li class="divider"&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</pre>
</section>

View File

@ -671,6 +671,16 @@
&lt;/ul&gt;
</pre>
<h3>{{_i}}Horizontal dividers{{/i}}</h3>
<p>{{_i}}Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:{{/i}}</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">
@ -744,53 +754,6 @@
&lt;/ul&gt;
</pre>
<hr class="bs-docs-separator">
<h2>{{_i}}Nav lists{{/i}}</h2>
<p>{{_i}}A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.{{/i}}</p>
<h3>{{_i}}Example nav list{{/i}}</h3>
<p>{{_i}}Take a list of links and add <code>class="nav nav-list"</code>:{{/i}}</p>
<div class="bs-docs-example">
<div class="well" style="max-width: 340px; padding: 8px 0;">
<ul class="nav nav-list">
<li class="nav-header">{{_i}}List header{{/i}}</li>
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Library{{/i}}</a></li>
<li><a href="#">{{_i}}Applications{{/i}}</a></li>
<li class="nav-header">{{_i}}Another list header{{/i}}</li>
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
<li><a href="#">{{_i}}Settings{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Help{{/i}}</a></li>
</ul>
</div> <!-- /well -->
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
&lt;li class="nav-header"&gt;{{_i}}List header{{/i}}&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;{{_i}}Library{{/i}}&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</pre>
<p>
<span class="label label-info">{{_i}}Note{{/i}}</span>
{{_i}}For nesting within a nav list, include <code>class="nav nav-list"</code> on any nested <code>&lt;ul&gt;</code>.{{/i}}
</p>
<h3>{{_i}}Horizontal dividers{{/i}}</h3>
<p>{{_i}}Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
...
&lt;li class="divider"&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</pre>
</section>

View File

@ -42,36 +42,8 @@
margin-top: 9px;
}
// NAV LIST
// --------
.nav-list {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover {
color: @white;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: @linkColor;
}
.nav-list [class^="icon-"] {
margin-right: 2px;
}
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
.nav .divider {
.nav-divider();
}