rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

fixes #3858: add var for responsive navbar. also add additional examples to navbar docs

Browse Source
This commit is contained in:
Mark Otto 2012-07-30 10:24:41 -07:00
parent b63543181a
commit 04164e4367
4 changed files with 103 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
docs/components.html
View File

@ -1044,12 +1044,30 @@
<h3>Brand</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
</div>
</div>
</div>
<pre class="prettyprint linenums">
&lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;
</pre>
<h3>Nav links</h3>
<p>Nav items are simple to add via unordered lists.</p>
<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
&lt;li class="active"&gt;
@ -1060,6 +1078,20 @@
&lt;/ul&gt;
</pre>
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
</ul>
</div>
</div>
</div>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
...
@ -1070,6 +1102,15 @@
<h3>Forms</h3>
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<form class="navbar-form pull-left">
<input type="text" class="span2">
</form>
</div>
</div>
</div>
<pre class="prettyprint linenums">
&lt;form class="navbar-form pull-left"&gt;
&lt;input type="text" class="span2"&gt;
@ -1078,6 +1119,15 @@
<h3>Search form</h3>
<p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="Search">
</form>
</div>
</div>
</div>
<pre class="prettyprint linenums">
&lt;form class="navbar-search pull-left"&gt;
&lt;input type="text" class="search-query" placeholder="Search"&gt;

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

@ -973,12 +973,30 @@
<h3>{{_i}}Brand{{/i}}</h3>
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
</div>
</div>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
</pre>
<h3>{{_i}}Nav links{{/i}}</h3>
<p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<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>
</ul>
</div>
</div>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
&lt;li class="active"&gt;
@ -989,6 +1007,20 @@
&lt;/ul&gt;
</pre>
<p>{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}</p>
<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li class="divider-vertical"></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="divider-vertical"></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="divider-vertical"></li>
</ul>
</div>
</div>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
...
@ -999,6 +1031,15 @@
<h3>{{_i}}Forms{{/i}}</h3>
<p>{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.{{/i}}</p>
<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<form class="navbar-form pull-left">
<input type="text" class="span2">
</form>
</div>
</div>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;form class="navbar-form pull-left"&gt;
&lt;input type="text" class="span2"&gt;
@ -1007,6 +1048,15 @@
<h3>{{_i}}Search form{{/i}}</h3>
<p>{{_i}}For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.{{/i}}</p>
<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}">
</form>
</div>
</div>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;form class="navbar-search pull-left"&gt;
&lt;input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}"&gt;

2
less/responsive-navbar.less
View File

@ -5,7 +5,7 @@
// TABLETS AND BELOW
// -----------------
@media (max-width: 979px) {
@media (max-width: @navbarCollapseWidth) {
// UNFIX THE TOPBAR
// ----------------

2
less/variables.less
View File

@ -154,6 +154,8 @@
// Navbar
// -------------------------
@navbarCollapseWidth: 979px;
@navbarHeight: 40px;
@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
@navbarBackgroundHighlight: #ffffff;