From a9f9949b3e4a0b3cd84f3088c050296e18a0f8df Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Mar 2012 19:41:23 -0700 Subject: rearrange other parts of forms docs --- docs/base-css.html | 87 +++++++++++++++++++++++++----------------------------- 1 file changed, 41 insertions(+), 46 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index b9dbd372f..0a1ea0d9d 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -940,10 +940,22 @@ For example, <code>section</code> should be wrapped as inline.

Horizontal forms

+
+

+

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

+
    +
  • text inputs (text, password, email, etc)
    • +
  • checkbox
    • +
  • radio
    • +
  • select
    • +
  • multiple select
    • +
  • file input
    • +
  • textarea
    • +
+
- Controls Bootstrap supports
@@ -1019,31 +1031,27 @@ For example, <code>section</code> should be wrapped as inline. </form>
-
-

What's included

-

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

-
    -
  • text inputs (text, password, email, etc)
    • -
  • checkbox
    • -
  • radio
    • -
  • select
    • -
  • multiple select
    • -
  • file input
    • -
  • textarea
    • -
-
-

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.

-

+

Form control states

+
+

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

+
+

Form validation

+

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

+
+<fieldset
+  class="control-group error">
+  …
+</fieldset>
+
+
- Form control states
@@ -1112,28 +1120,29 @@ 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 its place for :focus.

-
-

Form validation

-

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

-
-<fieldset
-  class="control-group error">
-  …
-</fieldset>
-
-

+

Extending form controls

+
+

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.

+
+

Form help text

+

To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.

+
- Extending form controls
@@ -1259,20 +1268,6 @@ 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.

-
-

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.

-
-

Form help text

-

To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.

-
-- cgit v1.2.3