From 36e7660383a7639f5d538efb7dc0f349e285b42d Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 7 Jan 2012 00:26:58 -0800
Subject: [PATCH] fix forms in navbars, fix examples' navbars
---
bootstrap.css | 7 ++++++-
bootstrap.min.css | 4 ++--
docs/base-css.html | 1 +
examples/container-app.html | 2 +-
examples/fluid-reverse.html | 18 +++++++++---------
examples/fluid.html | 10 +++++-----
examples/hero.html | 10 +++++-----
lib/forms.less | 3 ++-
lib/navbar.less | 5 +++++
9 files changed, 36 insertions(+), 24 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 85ed7961a3..f10d872acc 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Fri Jan 6 23:58:33 PST 2012
+ * Date: Sat Jan 7 00:24:46 PST 2012
*/
html, body {
margin: 0;
@@ -627,6 +627,7 @@ textarea {
}
.radio.inline, .checkbox.inline {
display: inline-block;
+ margin-bottom: 0;
}
.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline {
margin-left: 10px;
@@ -1681,6 +1682,10 @@ i {
.navbar-form {
margin-bottom: 0;
}
+.navbar-form input, .navbar-form select {
+ display: inline-block;
+ margin-bottom: 0;
+}
.navbar-search {
position: relative;
float: left;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 16f9fb76bd..17d3c4b397 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -108,7 +108,7 @@ textarea{height:auto;}
.radio,.checkbox{padding-left:18px;}
.radio input[type=radio],.checkbox input[type=checkbox]{float:left;margin-left:-18px;}
.controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:6px;}
-.radio.inline,.checkbox.inline{display:inline-block;}
+.radio.inline,.checkbox.inline{display:inline-block;margin-bottom:0;}
.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;}
input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;}
input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;}
@@ -287,7 +287,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;}
.navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;}
.navbar .btn{margin-top:5px;}
-.navbar-form{margin-bottom:0;}
+.navbar-form{margin-bottom:0;}.navbar-form input,.navbar-form select{display:inline-block;margin-bottom:0;}
.navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#eeeeee;}
.navbar-search .search-query::-webkit-input-placeholder{color:#eeeeee;}
.navbar-search .search-query:hover{color:#ffffff;background-color:#999999;background-color:rgba(255, 255, 255, 0.5);}
diff --git a/docs/base-css.html b/docs/base-css.html
index cbdf5ea194..cc92bc2217 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1102,6 +1102,7 @@
<hr>
<h3>Checkboxes and radios</h3>
<p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code><label class="checkbox"></code> that wraps the <code><input type="checkbox"></code>.</p>
+ <p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p>
</div>
</div>
</div><!-- /row -->
diff --git a/examples/container-app.html b/examples/container-app.html
index 28807bb05e..778bceacf6 100644
--- a/examples/container-app.html
+++ b/examples/container-app.html
@@ -75,7 +75,7 @@
<body>
- <div class="navbar">
+ <div class="navbar navbar-fixed">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html
index a32291d46c..8df7311816 100644
--- a/examples/fluid-reverse.html
+++ b/examples/fluid-reverse.html
@@ -28,7 +28,7 @@
<body>
- <div class="navbar">
+ <div class="navbar navbar-fixed">
<div class="navbar-inner">
<div class="fluid-container">
<a class="brand" href="#">Project name</a>
@@ -78,17 +78,17 @@
<!-- Example row of columns -->
<div class="row">
- <div class="span6">
+ <div class="span4">
<h2>Heading</h2>
- <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+ <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
- <div class="span5">
+ <div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
- <div class="span5">
+ <div class="span4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
@@ -99,17 +99,17 @@
<!-- Example row of columns -->
<div class="row">
- <div class="span6">
+ <div class="span4">
<h2>Heading</h2>
- <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+ <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
- <div class="span5">
+ <div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
- <div class="span5">
+ <div class="span4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
diff --git a/examples/fluid.html b/examples/fluid.html
index 3b8bb46a8d..66e07c82ed 100644
--- a/examples/fluid.html
+++ b/examples/fluid.html
@@ -28,7 +28,7 @@
<body>
- <div class="navbar">
+ <div class="navbar navbar-fixed">
<div class="navbar-inner">
<div class="fluid-container">
<a class="brand" href="#">Project name</a>
@@ -78,9 +78,9 @@
<!-- Example row of columns -->
<div class="row">
- <div class="span6">
+ <div class="span4">
<h2>Heading</h2>
- <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+ <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span5">
@@ -99,9 +99,9 @@
<!-- Example row of columns -->
<div class="row">
- <div class="span6">
+ <div class="span4">
<h2>Heading</h2>
- <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+ <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span5">
diff --git a/examples/hero.html b/examples/hero.html
index d84eb88434..3a7a539839 100644
--- a/examples/hero.html
+++ b/examples/hero.html
@@ -28,7 +28,7 @@
<body>
- <div class="navbar">
+ <div class="navbar navbar-fixed">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
@@ -52,17 +52,17 @@
<!-- Example row of columns -->
<div class="row">
- <div class="span6">
+ <div class="span4">
<h2>Heading</h2>
- <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+ <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
- <div class="span5">
+ <div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
- <div class="span5">
+ <div class="span4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
diff --git a/lib/forms.less b/lib/forms.less
index 8b85d240af..9e0b843628 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -141,10 +141,11 @@ textarea {
.radio.inline,
.checkbox.inline {
display: inline-block;
+ margin-bottom: 0;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
- margin-left: 10px;
+ margin-left: 10px; // space out consecutive inline controls
}
diff --git a/lib/navbar.less b/lib/navbar.less
index edc19c641c..516890ba79 100644
--- a/lib/navbar.less
+++ b/lib/navbar.less
@@ -56,6 +56,11 @@
// Navbar forms
.navbar-form {
margin-bottom: 0; // remove default bottom margin
+ input,
+ select {
+ display: inline-block;
+ margin-bottom: 0;
+ }
}
// Navbar search
--
GitLab