From 94792b9dae3800e739e0036d45a276c3127b103d Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 2 May 2013 23:05:09 -0700
Subject: [PATCH] Improve buttons in navbars
* 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
---
docs/_includes/docs-nav.html | 3 +++
docs/docs.html | 16 +++++++++++-----
less/navbar.less | 22 +++++++++-------------
3 files changed, 23 insertions(+), 18 deletions(-)
diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index c10bea4d3e..ebeb0d8280 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -121,6 +121,9 @@
<li><a href="#navbar-basic">Basic navbar</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-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-bottom">Fixed bottom navbar</a></li>
<li><a href="#navbar-static-top">Static top navbar</a></li>
diff --git a/docs/docs.html b/docs/docs.html
index 2b922b695d..e4f7113818 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3522,13 +3522,19 @@ For example, <code><section></code> should be wrapped as inline.
</form>
{% endhighlight %}
- <h3>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>
+ <h3 id="navbar-buttons">Buttons</h3>
+ <p>For buttons not residing in a <code><form></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>Using dropdowns</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 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>
- <h3>Text</h3>
+ <h3 id="navbar-text">Text</h3>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p>
diff --git a/less/navbar.less b/less/navbar.less
index 88cb33bce3..9511670cd5 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -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
@@ -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
-}
-
-
*/
--
GitLab