aboutsummaryrefslogtreecommitdiff
path: root/docs/components.html
diff options
context:
space:
mode:
Diffstat (limited to 'docs/components.html')
-rw-r--r--docs/components.html57
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>