mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 07:39:57 +02:00
Code Issues Releases Wiki Activity

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

33
docs/assets/css/bootstrap.css vendored
View File

@@ -8,7 +8,7 @@
* Designed and built with all the love in the world by @mdo and @fat.
*/
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
article,
aside,
@@ -2531,7 +2531,7 @@ fieldset[disabled] .btn-link:hover {
.dropdown-menu .divider {
height: 1px;
margin: 9px 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
@@ -2827,7 +2827,7 @@ button.close {
.nav .divider {
height: 1px;
margin: 9px 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
@@ -3019,11 +3019,12 @@ button.close {
margin-top: 3px;
}
.navbar .divider-vertical {
height: 30px;
margin: 10px 9px;
border-right: 1px solid #fbfbfb;
border-left: 1px solid #e1e1e1;
.navbar .nav > .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e1e1e1;
border-bottom: 1px solid #fbfbfb;
}
.navbar-form {
@@ -3110,9 +3111,9 @@ button.close {
background-color: #444;
}
.navbar-inverse .divider-vertical {
border-right-color: #2f2f2f;
border-left-color: #151515;
.navbar-inverse .nav > .divider {
background-color: #151515;
border-bottom-color: #2f2f2f;
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
@@ -3168,6 +3169,16 @@ button.close {
.navbar .nav > li {
float: left;
}
.navbar .nav > .divider {
width: 1px;
height: 30px;
margin: 10px 9px;
border-right: 1px solid #fbfbfb;
border-bottom: 0;
}
.navbar-inverse .nav > .divider {
border-right-color: #2f2f2f;
}
.navbar .btn-navbar {
display: none;
}

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">

14
docs/templates/pages/components.mustache vendored
View File

@@ -763,17 +763,17 @@
&lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</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>
@@ -781,7 +781,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>
@@ -931,7 +931,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">
@@ -1012,7 +1012,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">