diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e73506ac1a..70eaace265 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -949,10 +949,9 @@ input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
- display: block;
+ display: inline-block;
min-height: 34px;
padding: 6px 9px;
- margin-bottom: 10px;
font-size: 14px;
line-height: 20px;
color: #555555;
@@ -2868,6 +2867,7 @@ button.close {
.navbar {
padding: 15px;
background-color: #eeeeee;
+ border-radius: 4px;
}
.navbar:before,
@@ -2882,16 +2882,17 @@ button.close {
.navbar .brand {
display: inline-block;
- padding: 7px 15px;
+ padding: 15px 15px;
font-size: 18px;
font-weight: bold;
- line-height: 1;
+ line-height: 20px;
color: #777777;
}
.navbar .brand:hover {
+ color: #5e5e5e;
text-decoration: none;
- background-color: #ddd;
+ background-color: transparent;
}
.btn-navbar {
@@ -2918,7 +2919,13 @@ button.close {
margin-top: 15px;
}
+.navbar .nav > li {
+ float: left;
+}
+
.navbar .nav > li > a {
+ padding-top: 15px;
+ padding-bottom: 15px;
line-height: 20px;
color: #777777;
}
@@ -2933,7 +2940,37 @@ button.close {
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #555555;
- background-color: #e1e1e1;
+ background-color: #d5d5d5;
+}
+
+@media screen and (min-width: 992px) {
+ .navbar {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .navbar .brand {
+ float: left;
+ margin-left: -15px;
+ }
+ .navbar .nav {
+ margin-top: 0;
+ }
+ .navbar .nav:before,
+ .navbar .nav:after {
+ display: table;
+ content: " ";
+ }
+ .navbar .nav:after {
+ clear: both;
+ }
+ .navbar .btn-navbar {
+ display: none;
+ }
+ .nav-collapse.collapse {
+ float: left;
+ height: auto !important;
+ overflow: visible !important;
+ }
}
.navbar-inverse {
@@ -2969,6 +3006,40 @@ button.close {
background-color: #444;
}
+.navbar-static-top {
+ position: static;
+ border-radius: 0;
+}
+
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+ position: fixed;
+ right: 0;
+ left: 0;
+ z-index: 1030;
+ border-radius: 0;
+}
+
+.navbar-fixed-top {
+ top: 0;
+}
+
+.navbar-fixed-bottom {
+ bottom: 0;
+}
+
+.navbar .divider-vertical {
+ height: 26px;
+ margin: 7px 9px;
+ border-right: 1px solid #fbfbfb;
+ border-left: 1px solid #e1e1e1;
+}
+
+.navbar-form {
+ margin-top: 9px;
+ margin-bottom: 9px;
+}
+
/*
// COMMON STYLES
@@ -4737,41 +4808,10 @@ a.badge:hover {
}
*/
- /* Required to make the collapsing navbar work on regular desktops */
-
}
.container {
max-width: 940px;
}
- .navbar {
- padding-top: 0;
- padding-bottom: 0;
- }
- .navbar .brand {
- float: left;
- padding-top: 11px;
- padding-bottom: 11px;
- margin-left: -15px;
- }
- .navbar .nav {
- margin-top: 0;
- overflow: hidden;
- }
- .navbar .nav > li {
- float: left;
- }
- .navbar .nav > li > a {
- padding-top: 10px;
- padding-bottom: 10px;
- }
- .navbar .btn-navbar {
- display: none;
- }
- .nav-collapse.collapse {
- float: left;
- height: auto !important;
- overflow: visible !important;
- }
}
@media screen and (min-width: 1200px) {
diff --git a/docs/components.html b/docs/components.html
index 17ea3a0d46..c1049747c2 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -859,31 +859,16 @@
-<form class="navbar-form pull-left">
- <input type="text" class="span2">
+<form class="pull-left">
+ <input type="text" style="width: 200px;">
<button type="submit" class="btn">Submit</button>
</form>
-
-
- Search form
- For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.
-
-
-<form class="navbar-search pull-left">
- <input type="text" class="search-query" placeholder="Search">
-</form>
Component alignment
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 10a7ab0675..8ec40dcad5 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -791,31 +791,16 @@
{{! /example }}
-<form class="navbar-form pull-left">
- <input type="text" class="span2">
+<form class="pull-left">
+ <input type="text" style="width: 200px;">
<button type="submit" class="btn">Submit</button>
</form>
-
-
- Search form
- For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.
- {{! /example }}
-
-<form class="navbar-search pull-left">
- <input type="text" class="search-query" placeholder="Search">
-</form>
Component alignment
diff --git a/less/bootstrap.less b/less/bootstrap.less
index 2fd0b84385..3150af6773 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -91,38 +91,6 @@
max-width: 940px;
}
- .navbar {
- padding-top: 0;
- padding-bottom: 0;
- }
- .navbar .brand {
- float: left;
- padding-top: 11px;
- padding-bottom: 11px;
- margin-left: -15px;
- }
- .navbar .nav {
- overflow: hidden; /* clearfix */
- margin-top: 0; /* undo top margin to make nav extend full height of navbar */
- }
- .navbar .nav > li {
- float: left;
- }
- .navbar .nav > li > a {
- padding-top: 10px;
- padding-bottom: 10px;
- }
-
- /* Required to make the collapsing navbar work on regular desktops */
- .navbar .btn-navbar {
- display: none;
- }
- .nav-collapse.collapse {
- float: left;
- height: auto !important;
- overflow: visible !important;
- }
-
}
// Responsive: Large desktops and up
diff --git a/less/forms.less b/less/forms.less
index 781218b444..0415f217e5 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -55,11 +55,11 @@ input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
- display: block;
+ display: inline-block;
.box-sizing(border-box); // Makes inputs behave like true block-level elements
min-height: @input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: 6px 9px;
- margin-bottom: @line-height-base / 2;
+ // margin-bottom: @line-height-base / 2;
font-size: @font-size-base;
line-height: @line-height-base;
color: @gray;
diff --git a/less/mixins.less b/less/mixins.less
index b530495548..f00ad6b8e0 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -412,8 +412,9 @@
// -------------------------
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
-.navbarVerticalAlign(@element-height) {
+.navbar-vertical-align(@element-height) {
margin-top: (@navbar-height - @element-height) / 2;
+ margin-bottom: (@navbar-height - @element-height) / 2;
}
diff --git a/less/navbar.less b/less/navbar.less
index 30d7050e8b..4353e2a945 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -6,24 +6,31 @@
.navbar {
padding: 15px;
background-color: @navbar-bg;
+ border-radius: @border-radius-base;
+ // Prevent floats from breaking the navbar
.clear_float();
}
// Brand/project name
+// -------------------------
+
.navbar .brand {
display: inline-block;
- padding: 7px 15px;
+ padding: ((@navbar-height - @line-height-base) / 2) 15px;
font-size: 18px;
font-weight: bold;
- line-height: 1;
+ line-height: @line-height-base;
color: @navbar-brand-color;
&:hover {
+ color: @navbar-brand-color-hover;
text-decoration: none;
- background-color: #ddd;
+ background-color: @navbar-brand-bg-hover;
}
}
// Responsive navbar button
+// -------------------------
+
.btn-navbar {
float: right;
padding: 10px 12px;
@@ -44,12 +51,19 @@
}
}
-// Nav links
+// Navbar nav links
+// -------------------------
+
.navbar {
.nav {
margin-top: 15px; // space out from .navbar .brand and .btn-navbar
}
+ .nav > li {
+ float: left;
+ }
.nav > li > a {
+ padding-top: (@navbar-height - @line-height-base) / 2;
+ padding-bottom: (@navbar-height - @line-height-base) / 2;
color: @navbar-link-color;
line-height: 20px;
}
@@ -65,8 +79,36 @@
background-color: @navbar-link-bg-active;
}
}
+@media screen and (min-width: 992px) {
+
+ .navbar {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .navbar .brand {
+ float: left;
+ margin-left: -15px;
+ }
+ .navbar .nav {
+ .clear_float();
+ margin-top: 0; // undo top margin to make nav extend full height of navbar
+ }
+
+ // Required to make the collapsing navbar work on regular desktops
+ .navbar .btn-navbar {
+ display: none;
+ }
+ .nav-collapse.collapse {
+ float: left;
+ height: auto !important;
+ overflow: visible !important;
+ }
+
+}
// Inverse navbar
+// -------------------------
+
.navbar-inverse {
background-color: @navbar-inverse-bg;
@@ -97,6 +139,45 @@
+//
+// Navbar alignment options
+// --------------------------------------------------
+
+// Static navbar
+.navbar-static-top {
+ position: static;
+ border-radius: 0;
+}
+
+// Fixed navbar
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+ position: fixed;
+ right: 0;
+ left: 0;
+ z-index: @zindex-navbar-fixed;
+ border-radius: 0;
+}
+.navbar-fixed-top { top: 0; }
+.navbar-fixed-bottom { bottom: 0; }
+
+
+//
+// Navbar optional components
+// --------------------------------------------------
+
+// Dividers in navbar
+.navbar .divider-vertical {
+ height: 26px;
+ margin: 7px 9px;
+ border-left: 1px solid darken(@navbar-bg, 5%);
+ border-right: 1px solid lighten(@navbar-bg, 5%);
+}
+
+// Navbar form
+.navbar-form {
+ .navbar-vertical-align(32px); // Vertically center in navbar
+}
/*
diff --git a/less/variables.less b/less/variables.less
index e5327f3364..a7069ddb42 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -150,20 +150,28 @@
// Navbar
// -------------------------
-@navbar-collapse-width: 979px;
-@navbar-collapse-width-desktop: @navbar-collapse-width + 1;
+// Responsive collapsing
+// @navbar-collapse-width: 979px;
+// @navbar-collapse-width-desktop: @navbar-collapse-width + 1;
-@navbar-height: 44px;
+// Basics of a navbar
+@navbar-height: 50px;
+@navbar-text: #777;
@navbar-bg: #eee;
-@navbar-text: #777;
-@navbar-link-color: #777;
-@navbar-link-color-hover: @grayDark;
-@navbar-link-color-active: @gray;
-@navbar-link-bg-hover: transparent;
-@navbar-link-bg-active: darken(@navbar-bg, 5%);
-
+// Navbar brand label
@navbar-brand-color: @navbar-link-color;
+@navbar-brand-color-hover: darken(@navbar-link-color, 10%);
+@navbar-brand-bg-hover: transparent;
+
+// Navbar links
+@navbar-link-color: #777;
+@navbar-link-color-hover: #333;
+@navbar-link-color-active: #555;
+@navbar-link-bg-hover: transparent;
+@navbar-link-bg-active: darken(@navbar-bg, 10%);
+
+
// Inverted navbar
@navbar-inverse-bg: #222;