From 36e7660383a7639f5d538efb7dc0f349e285b42d Mon Sep 17 00:00:00 2001 From: Mark Otto 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 @@

Checkboxes and radios

Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

+

Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.

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 @@ -
+
Project name 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 @@ -
+
Project name @@ -78,17 +78,17 @@
-
+

Heading

-

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.

+

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.

View details »

-
+

Heading

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.

View details »

-
+

Heading

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.

View details »

@@ -99,17 +99,17 @@
-
+

Heading

-

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.

+

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.

View details »

-
+

Heading

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.

View details »

-
+

Heading

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.

View details »

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 @@ -
+
Project name @@ -78,9 +78,9 @@
-
+

Heading

-

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.

+

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.

View details »

@@ -99,9 +99,9 @@
-
+

Heading

-

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.

+

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.

View details »

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 @@ -
+
Project name @@ -52,17 +52,17 @@
-
+

Heading

-

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.

+

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.

View details »

-
+

Heading

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.

View details »

-
+

Heading

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.

View details »

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 -- 2.47.2