diff options
| author | Mark Otto <[email protected]> | 2013-04-27 18:28:39 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-04-27 18:28:39 -0700 |
| commit | 8b3a1702d443c4a451d02d3482ed2cb4aeff0d44 (patch) | |
| tree | 997b9e4486bbde405efa4b033cea3a3dd05d35c7 /docs/docs.html | |
| parent | 2ffa0e44094ab67e23fb1642d6b1b8d269d3a2f1 (diff) | |
| download | bootstrap-8b3a1702d443c4a451d02d3482ed2cb4aeff0d44.tar.xz bootstrap-8b3a1702d443c4a451d02d3482ed2cb4aeff0d44.zip | |
Overhaul navbar navs
* Switch from to to eliminate an element in selectors
* Drop .navbar-divider entirely
Diffstat (limited to 'docs/docs.html')
| -rw-r--r-- | docs/docs.html | 44 |
1 files changed, 11 insertions, 33 deletions
diff --git a/docs/docs.html b/docs/docs.html index e62e44661..48e2aae0b 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -3423,7 +3423,7 @@ For example, <code><section></code> should be wrapped as inline. <div class="bs-docs-example"> <div class="navbar"> <a class="navbar-brand" href="#">Title</a> - <ul class="nav"> + <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> @@ -3433,7 +3433,7 @@ For example, <code><section></code> should be wrapped as inline. {% highlight html linenos %} <div class="navbar"> <a class="navbar-brand" href="#">Title</a> - <ul class="nav"> + <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> @@ -3458,7 +3458,7 @@ For example, <code><section></code> should be wrapped as inline. <p>Nav items are simple to add via unordered lists.</p> <div class="bs-docs-example"> <div class="navbar"> - <ul class="nav"> + <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li class="disabled"><a href="#">Disabled</a></li> @@ -3466,32 +3466,12 @@ For example, <code><section></code> should be wrapped as inline. </div> </div><!-- /example --> {% highlight html linenos %} -<ul class="nav"> +<ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li class="disabled"><a href="#">Disabled</a></li> </ul> {% endhighlight %} - <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"> - <ul class="nav"> - <li class="active"><a href="#">Home</a></li> - <li class="divider"></li> - <li><a href="#">Link</a></li> - <li class="divider"></li> - <li><a href="#">Link</a></li> - <li class="divider"></li> - </ul> - </div> - </div><!-- /example --> -{% highlight html linenos %} -<ul class="nav"> - ... - <li class="divider"></li> - ... -</ul> -{% endhighlight %} <h3 id="navbar-forms">Forms</h3> <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p> @@ -3529,7 +3509,7 @@ For example, <code><section></code> should be wrapped as inline. <div class="navbar navbar-fixed-top" style="position: absolute; top: -1px;"> <div class="container" style="width: auto;"> <a class="navbar-brand" href="#">Title</a> - <ul class="nav"> + <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> @@ -3565,7 +3545,7 @@ body { <div class="navbar navbar-fixed-bottom" style="position: absolute; bottom: -1px;"> <div class="container" style="width: auto;"> <a class="navbar-brand" href="#">Title</a> - <ul class="nav"> + <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> @@ -3601,7 +3581,7 @@ body { <div class="navbar navbar-static-top" style="margin: -1px -1px 0;"> <div class="container" style="width: auto;"> <a class="navbar-brand" href="#">Title</a> - <ul class="nav"> + <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> @@ -3628,7 +3608,7 @@ body { </button> <a class="navbar-brand" href="#">Title</a> <div class="nav-collapse collapse navbar-responsive-collapse"> - <ul class="nav"> + <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> @@ -3648,9 +3628,8 @@ body { <form class="navbar-form pull-left" action=""> <input type="text" class="col-span-8" placeholder="Search"> </form> - <ul class="nav pull-right"> + <ul class="nav navbar-nav pull-right"> <li><a href="#">Link</a></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"> @@ -3706,7 +3685,7 @@ body { </button> <a class="navbar-brand" href="#">Title</a> <div class="nav-collapse collapse navbar-inverse-collapse"> - <ul class="nav"> + <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> @@ -3726,9 +3705,8 @@ body { <form class="navbar-form pull-left" action=""> <input type="text" class="col-span-8" placeholder="Search"> </form> - <ul class="nav pull-right"> + <ul class="nav navbar-nav pull-right"> <li><a href="#">Link</a></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"> |
