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/templates | |
| 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/templates')
| -rw-r--r-- | docs/templates/pages/components.mustache | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index ea6cc4516..5fb11ccf2 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1177,6 +1177,63 @@ <strong>{{_i}}Heads up!{{/i}}</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>{{_i}}Responsive navbar{{/i}}</h2> + <p>{{_i}}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>.{{/i}}</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="#">{{_i}}Title{{/i}}</a> + <div class="nav-collapse"> + <ul class="nav"> + <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li> + <li><a href="#">{{_i}}Link{{/i}}</a></li> + <li><a href="#">{{_i}}Link{{/i}}</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li class="nav-header">Nav header</li> + <li><a href="#">{{_i}}Separated link{{/i}}</a></li> + <li><a href="#">{{_i}}One more separated link{{/i}}</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="#">{{_i}}Link{{/i}}</a></li> + <li class="divider-vertical"></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</a></li> + </ul> + </li> + </ul> + </div><!-- /.nav-collapse --> + </div> + </div><!-- /navbar-inner --> + </div><!-- /navbar --> + </div>{{! /example }} + </section> |