rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

update components page to include docs for the new navbar collapse feature, re-add responsive.less to downloader

Browse Source
This commit is contained in:
Mark Otto 2012-01-28 18:39:36 -08:00
parent e17c9249d2
commit 99ac6ca08e
4 changed files with 58 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docs/components.html
View File

@ -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 @@
&lt;input type="text" class="search-query pull-left" placeholder="Search"&gt;
&lt;/form&gt;
</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">
&lt;div class="navbar navbar-static"&gt;
&lt;div class="navbar-inner"&gt;
&lt;div class="container"&gt;
&lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
&lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
&lt;span class="i-bar"&gt;&lt;/span&gt;
&lt;span class="i-bar"&gt;&lt;/span&gt;
&lt;span class="i-bar"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
&lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;
&lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
&lt;div class="nav-collapse"&gt;
&lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div><!-- /.span -->
<div class="span4">
<h3>Nav links</h3>

6
docs/download.html
View File

@ -135,12 +135,8 @@
<label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
<!--
<h3>Responsive</h3>
<label class="checkbox"><input type="checkbox" value=""> Max-width 480px</label>
<label class="checkbox"><input type="checkbox" value=""> Max-width 768px</label>
<label class="checkbox"><input type="checkbox" value=""> Max-width 1210px</label>
-->
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> Responsive layouts</label>
</div><!-- /span -->
</div><!-- /row -->
</section>

29
docs/templates/pages/components.mustache vendored
View File

@ -395,7 +395,7 @@
<div class="well" style="padding: 8px 0;">
<ul class="nav list">
<li class="nav-header">{{_i}}List header{{/i}}</li>
<li class="active"><a href="#"><i class="icon home"></i> {{_i}}Home{{/i}}</a></li>
<li class="active"><a href="#"><i class="icon white home"></i> {{_i}}Home{{/i}}</a></li>
<li><a href="#"><i class="icon book"></i> {{_i}}Library{{/i}}</a></li>
<li><a href="#"><i class="icon pencil"></i> {{_i}}Applications{{/i}}</a></li>
<li class="nav-header">{{_i}}Another list header{{/i}}</li>
@ -668,6 +668,33 @@
&lt;input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}"&gt;
&lt;/form&gt;
</pre>
<h3>{{_i}}Optional responsive variation{{/i}}</h3>
<p>{{_i}}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>.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-static"&gt;
&lt;div class="navbar-inner"&gt;
&lt;div class="container"&gt;
&lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
&lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
&lt;span class="i-bar"&gt;&lt;/span&gt;
&lt;span class="i-bar"&gt;&lt;/span&gt;
&lt;span class="i-bar"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
&lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
&lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
&lt;div class="nav-collapse"&gt;
&lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div><!-- /.span -->
<div class="span4">
<h3>{{_i}}Nav links{{/i}}</h3>

6
docs/templates/pages/download.mustache vendored
View File

@ -63,12 +63,8 @@
<label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> {{_i}}Close icon{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
<!--
<h3>{{_i}}Responsive{{/i}}</h3>
<label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 480px{{/i}}</label>
<label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 768px{{/i}}</label>
<label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 1210px{{/i}}</label>
-->
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> {{_i}}Responsive layouts{{/i}}</label>
</div><!-- /span -->
</div><!-- /row -->
</section>