diff options
| author | Mark Otto <[email protected]> | 2013-02-01 22:56:09 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-02-01 22:56:09 -0800 |
| commit | 94e256c0162748dcddd6401d57a186576254f884 (patch) | |
| tree | eb0df5293f213e3fa26b1dca7e44841440cef570 /docs/components.html | |
| parent | dad9889aeb703f7276a1c9e54e19df622ffadb99 (diff) | |
| download | bootstrap-94e256c0162748dcddd6401d57a186576254f884.tar.xz bootstrap-94e256c0162748dcddd6401d57a186576254f884.zip | |
Refactor navbar dividers
* 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
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 14 |
1 files changed, 7 insertions, 7 deletions
diff --git a/docs/components.html b/docs/components.html index 4293e43bf..ade79e7b5 100644 --- a/docs/components.html +++ b/docs/components.html @@ -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><li></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"> <ul class="nav"> ... - <li class="divider-vertical"></li> + <li class="divider"></li> ... </ul> </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"> |