diff options
| author | Mark Otto <[email protected]> | 2012-07-05 10:37:23 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-07-05 10:37:23 -0700 |
| commit | c6ee96c02587aeea0da52018325c100bfd45127a (patch) | |
| tree | 683880b425c7ae13f14984fb368784eb4b033be8 /docs/components.html | |
| parent | a645664e503475af2b8ed6f81f6860aad188f327 (diff) | |
| download | bootstrap-c6ee96c02587aeea0da52018325c100bfd45127a.tar.xz bootstrap-c6ee96c02587aeea0da52018325c100bfd45127a.zip | |
fix up subnav styles, add subnav search form styles, add some basic docs for subnav
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/docs/components.html b/docs/components.html index ed1ba953a..4a658c760 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1254,6 +1254,63 @@ <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>. </div> + + <hr class="bs-docs-separator"> + + + <h2>Responsive navbar</h2> + <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p> + <div class="bs-docs-example"> + <div class="navbar navbar-subnav" style="position: static;"> + <div class="navbar-inner"> + <div class="container"> + <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </a> + <a class="brand" href="#">Title</a> + <div class="nav-collapse"> + <ul class="nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li class="nav-header">Nav header</li> + <li><a href="#">Separated link</a></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + <form class="navbar-search pull-left" action=""> + <input type="text" class="search-query span2" placeholder="Search"> + </form> + <ul class="nav pull-right"> + <li><a href="#">Link</a></li> + <li class="divider-vertical"></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> + </ul> + </div><!-- /.nav-collapse --> + </div> + </div><!-- /navbar-inner --> + </div><!-- /navbar --> + </div> + </section> |