Skip to content
GitLab
Commit 04164e43 authored by Mark Otto's avatar Mark Otto
Browse files

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

parent b6354318
5 merge requests!4427Use variable for desktop media query,!4258Aria,!4248Amended mentions of 'javascript' to the correct 'JavaScript',!4235Patch 1,!4232Fixing the modal z-index issue + make modal stacking possible
Hide whitespace changes
Inline Side-by-side
Showing
with 103 additions and 1 deletion
+103 -1
docs/components.html
+ 50
- 0
View file @ 04164e43
......@@ -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;
......
docs/templates/pages/components.mustache
+ 50
- 0
View file @ 04164e43
......@@ -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;
......
less/responsive-navbar.less
+ 1
- 1
View file @ 04164e43
......@@ -5,7 +5,7 @@
// TABLETS AND BELOW
// -----------------
@media (max-width: 979px) {
@media (max-width: @navbarCollapseWidth) {
// UNFIX THE TOPBAR
// ----------------
......
less/variables.less
+ 2
- 0
View file @ 04164e43
......@@ -154,6 +154,8 @@
// Navbar
// -------------------------
@navbarCollapseWidth: 979px;
@navbarHeight: 40px;
@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
@navbarBackgroundHighlight: #ffffff;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment