diff options
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 29 |
1 files changed, 28 insertions, 1 deletions
diff --git a/docs/components.html b/docs/components.html index 950d1f35c..710e7de77 100644 --- a/docs/components.html +++ b/docs/components.html @@ -467,7 +467,7 @@ <div class="well" style="padding: 8px 0;"> <ul class="nav list"> <li class="nav-header">List header</li> - <li class="active"><a href="#"><i class="icon home"></i> Home</a></li> + <li class="active"><a href="#"><i class="icon white home"></i> Home</a></li> <li><a href="#"><i class="icon book"></i> Library</a></li> <li><a href="#"><i class="icon pencil"></i> Applications</a></li> <li class="nav-header">Another list header</li> @@ -740,6 +740,33 @@ <input type="text" class="search-query pull-left" placeholder="Search"> </form> </pre> + <h3>Optional responsive variation</h3> + <p>Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p> +<pre class="prettyprint linenums"> +<div class="navbar navbar-static"> + <div class="navbar-inner"> + <div class="container"> + + <!-- .btn-navbar is used as the toggle for collapsed navbar content --> + <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <span class="i-bar"></span> + <span class="i-bar"></span> + <span class="i-bar"></span> + </a> + + <!-- Be sure to leave the brand out there if you want it shown --> + <a class="brand" href="#">Project name</a> + + <!-- Everything you want hidden at 940px or less, place within here --> + <div class="nav-collapse"> + <!-- .nav, .navbar-search, .navbar-form, etc --> + </div> + + </div> + </div> +</div> +</pre> + </div><!-- /.span --> <div class="span4"> <h3>Nav links</h3> |