rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor navbar dividers

Browse source 
* Instead of .divider-vertical, use .divider
* Makes use of .nav-divider mixin
* Dividers are horizontal to start, matching the default state of navbar nav links
* Dividers become vertical above 768px via media queries
This commit is contained in:
Mark Otto 2013-02-01 22:56:09 -08:00
parent dad9889aeb
commit 94e256c016
5 changed files with 57 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/components.html
View file

@ -831,17 +831,17 @@
<li><a href="#">Link</a></li>
</ul>
</pre>
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code>&lt;li&gt;</code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li class="divider-vertical"></li>
<li class="divider"></li>
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="divider"></li>
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="divider"></li>
</ul>
</div>
</div>
@ -849,7 +849,7 @@
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
...
&lt;li class="divider-vertical"&gt;&lt;/li&gt;
&lt;li class="divider"&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</pre>
@ -999,7 +999,7 @@
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
@ -1080,7 +1080,7 @@
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">