diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index efd2219915..c96818a564 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -943,9 +943,20 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec display: inline-block; margin-bottom: 0; } -.form-search label, .form-inline label { +.form-search label, +.form-inline label, +.form-search .input-append, +.form-inline .input-append, +.form-search .input-prepend, +.form-inline .input-prepend { display: inline-block; } +.form-search .input-append .add-on, +.form-inline .input-prepend .add-on, +.form-search .input-append .add-on, +.form-inline .input-prepend .add-on { + vertical-align: middle; +} .control-group { margin-bottom: 9px; } diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 9b8244d49b..74b5486285 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -543,19 +543,6 @@ form.well { margin: 18px 0; } -/* Form docs for horizontal forms */ -.form-docs { - padding-left: 10px; -} -.form-docs h3, -.form-docs p, -.form-docs li { - color: #777; -} -.form-docs hr { - margin: 18px 0; -} - /* Fake the :focus state to demo it */ .focused { border-color: rgba(82,168,236,.8); @@ -689,10 +676,6 @@ form.well { left: auto; } - /* Forms docs */ - .form-docs { - padding-left: 0; /* down from 10px */ - } } diff --git a/docs/base-css.html b/docs/base-css.html index 4651e9789c..3b4032805f 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -952,22 +952,20 @@ For example, <code>section</code> should be wrapped as inline.
-
-

What's included

-

Shown on the left are all the default form controls we support. Here's the bulleted list:

- -
-

New defaults with v2.0

-

Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.

-
+

What's included

+

Shown on the left are all the default form controls we support. Here's the bulleted list:

+ +
+

New defaults with v2.0

+

Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.

@@ -1047,19 +1045,17 @@ For example, <code>section</code> should be wrapped as inline.
-
-

Redesigned browser states

-

Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.

-
-

Form validation

-

It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.

+

Redesigned browser states

+

Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.

+
+

Form validation

+

It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.

 <fieldset
   class="control-group error">
   …
 </fieldset>
-
@@ -1152,14 +1148,15 @@ For example, <code>section</code> should be wrapped as inline.
-
-

Prepend & append inputs

-

Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.

-
-

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.

-
+

Prepend & append inputs

+

Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.

+
+

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.

+
+

Inline forms and append/prepend

+

To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index c15fcebd39..b464084dfe 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -880,22 +880,20 @@
-
-

{{_i}}What's included{{/i}}

-

{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}

- -
-

{{_i}}New defaults with v2.0{{/i}}

-

{{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}

-
+

{{_i}}What's included{{/i}}

+

{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}

+ +
+

{{_i}}New defaults with v2.0{{/i}}

+

{{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}

@@ -975,19 +973,17 @@
-
-

{{_i}}Redesigned browser states{{/i}}

-

{{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.{{/i}}

-
-

{{_i}}Form validation{{/i}}

-

{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.{{/i}}

+

{{_i}}Redesigned browser states{{/i}}

+

{{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.{{/i}}

+
+

{{_i}}Form validation{{/i}}

+

{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.{{/i}}

 <fieldset
   class="control-group error">
   …
 </fieldset>
-
@@ -1080,14 +1076,15 @@
-
-

{{_i}}Prepend & append inputs{{/i}}

-

{{_i}}Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}

-
-

{{_i}}Checkboxes and radios{{/i}}

-

{{_i}}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">.{{/i}}

-

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

-
+

{{_i}}Prepend & append inputs{{/i}}

+

{{_i}}Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}

+
+

{{_i}}Checkboxes and radios{{/i}}

+

{{_i}}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">.{{/i}}

+

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

+
+

{{_i}}Inline forms and append/prepend{{/i}}

+

{{_i}}To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.{{/i}}

diff --git a/less/forms.less b/less/forms.less index 69ddbcac93..6b0f5ec52e 100644 --- a/less/forms.less +++ b/less/forms.less @@ -495,9 +495,20 @@ select:focus:required:invalid { } } .form-search label, -.form-inline label { +.form-inline label, +.form-search .input-append, +.form-inline .input-append, +.form-search .input-prepend, +.form-inline .input-prepend { display: inline-block; } +// Make the prepend and append add-on vertical-align: middle; +.form-search .input-append .add-on, +.form-inline .input-prepend .add-on, +.form-search .input-append .add-on, +.form-inline .input-prepend .add-on { + vertical-align: middle; +} // Margin to space out fieldsets .control-group {