mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 18:40:03 +00:00
Code Issues Projects Releases Wiki Activity

Improve buttons in navbars

Browse Source 
* Add top margin, calculated by subtracting height of an input from height of a navbar, and dividing by two
* Uses the same method as .navbar-form
* To use, add .navbar-btn to any button outside a form element
* Also add section to docs detailing buttons in navbars, and add more ids for the other unlinked and unmentioned sections in the side nav
This commit is contained in:
Mark Otto 2013-05-02 23:05:09 -07:00
parent 23ae6405f5
commit 94792b9dae
3 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_includes/docs-nav.html
View File

@ -121,6 +121,9 @@
<li><a href="#navbar-basic">Basic navbar</a></li> <li><a href="#navbar-basic">Basic navbar</a></li>
<li><a href="#navbar-nav">Nav links</a></li> <li><a href="#navbar-nav">Nav links</a></li>
<li><a href="#navbar-forms">Forms in navbars</a></li> <li><a href="#navbar-forms">Forms in navbars</a></li>
<li><a href="#navbar-buttons">Buttons in navbars</a></li>
<li><a href="#navbar-component-alignment">Component alignment</a></li>
<li><a href="#navbar-text">Text in navbars</a></li>
<li><a href="#navbar-fixed-top">Fixed top navbar</a></li> <li><a href="#navbar-fixed-top">Fixed top navbar</a></li>
<li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li> <li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
<li><a href="#navbar-static-top">Static top navbar</a></li> <li><a href="#navbar-static-top">Static top navbar</a></li>

16
docs/docs.html
View File

@ -3522,13 +3522,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form> </form>
{% endhighlight %} {% endhighlight %}
<h3>Component alignment</h3> <h3 id="navbar-buttons">Buttons</h3>
<p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
<div class="bs-docs-example">
<div class="navbar">
<a href="#" class="navbar-brand">Derp</a>
<button type="button" class="btn">Submit</button>
</div>
</div>
<h3 id="navbar-component-alignment">Component alignment</h3>
<p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p> <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<h3>Using dropdowns</h3> <h3 id="navbar-text">Text</h3>
<p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Text</h3>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p> <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>

22
less/navbar.less
View File

@ -299,6 +299,15 @@
} }
// Buttons in navbar
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
margin-top: ((@navbar-height - @input-height-base) / 2);
}
/* /*
// Janky solution for now to account for links outside the .nav // Janky solution for now to account for links outside the .nav
@ -310,17 +319,4 @@
} }
} }
// Buttons in navbar
// -------------------------
.navbar .btn,
.navbar .btn-group {
.navbarVerticalAlign(30px); // Vertically center in navbar
}
.navbar .btn-group .btn,
.navbar .input-prepend .btn,
.navbar .input-append .btn {
margin-top: 0; // then undo the margin here so we don't accidentally double it
}
*/ */