diff --git a/docs/css.html b/docs/css.html index 0c1322a4ee..051290dc95 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1267,6 +1267,125 @@ For example, <code>&lt;section&gt;</code> should be wrapped + +

Form control states

+

Provide feedback to users or visitors with basic feedback states on form controls and labels.

+ +

Input focus

+

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

+
+ +
+
+<input id="focusedInput" type="text" value="This is focused...">
+
+ +

Invalid inputs

+

Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

+
+ +
+
+<input class="span3" type="email" required>
+
+ +

Disabled inputs

+

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

+
+ +
+
+<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+
+ +

Disabled fieldsets

+

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. Link buttons (with the <a> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.

+
+
+
+ +
+
+ +
+
+ +
+ +
+
+
+<form class="form-inline">
+  <fieldset disabled>
+    <input type="text" class="span4" placeholder="Disabled input">
+    <select class="span4">
+      <option>Disabled select</option>
+    </select>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox"> Can't check this
+      </label>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </fieldset>
+</form>
+
+ +

Validation states

+

Bootstrap includes validation styles for error, warning, info, and success messages. To use:

+ +

Validation styles are applied on a per-input basis. With horizontal forms, the <label class="control-label"> will always be styled.

+ +
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+<div class="control-group has-warning">
+  <label class="control-label" for="inputWarning">Input with warning</label>
+  <div class="controls">
+    <input type="text" class="input-with-feedback" id="inputWarning">
+  </div>
+</div>
+<div class="control-group has-error">
+  <label class="control-label" for="inputError">Input with error</label>
+  <div class="controls">
+    <input type="text" class="input-with-feedback" id="inputError">
+  </div>
+</div>
+<div class="control-group has-success">
+  <label class="control-label" for="inputSuccess">Input with success</label>
+  <div class="controls">
+    <input type="text" class="input-with-feedback id="inputSuccess"">
+  </div>
+</div>
+
+ + +

Extending form controls

Adding on top of existing browser controls, Bootstrap includes other useful form components.

@@ -1341,7 +1460,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped </div> -

Buttons instead of text

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

@@ -1616,123 +1734,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped <input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> - -

Form control states

-

Provide feedback to users or visitors with basic feedback states on form controls and labels.

- -

Input focus

-

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

- - -
-
-<input id="focusedInput" type="text" value="This is focused...">
-
- -

Invalid inputs

-

Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

-
- -
-
-<input class="span3" type="email" required>
-
- -

Disabled inputs

-

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

-
- -
-
-<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
-
- -

Disabled fieldsets

-

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. Link buttons (with the <a> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.

-
-
-
- -
-
- -
-
- -
- -
-
-
-<form class="form-inline">
-  <fieldset disabled>
-    <input type="text" class="span4" placeholder="Disabled input">
-    <select class="span4">
-      <option>Disabled select</option>
-    </select>
-    <div class="checkbox">
-      <label>
-        <input type="checkbox"> Can't check this
-      </label>
-    </div>
-    <button type="submit" class="btn btn-primary">Submit</button>
-  </fieldset>
-</form>
-
- -

Validation states

-

Bootstrap includes validation styles for error, warning, info, and success messages. To use:

- -

Validation styles are applied on a per-input basis. With horizontal forms, the <label class="control-label"> will always be styled.

- -
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
-<div class="control-group has-warning">
-  <label class="control-label" for="inputWarning">Input with warning</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputWarning">
-  </div>
-</div>
-<div class="control-group has-error">
-  <label class="control-label" for="inputError">Input with error</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputError">
-  </div>
-</div>
-<div class="control-group has-success">
-  <label class="control-label" for="inputSuccess">Input with success</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback id="inputSuccess"">
-  </div>
-</div>
-
- diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 64d5005a57..b9182c28a3 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1207,6 +1207,125 @@ For example, <code>&lt;section&gt;</code> should be wrapped + +

Form control states

+

Provide feedback to users or visitors with basic feedback states on form controls and labels.

+ +

Input focus

+

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

+
+ +
+
+<input id="focusedInput" type="text" value="This is focused...">
+
+ +

Invalid inputs

+

Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

+
+ +
+
+<input class="span3" type="email" required>
+
+ +

Disabled inputs

+

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

+
+ +
+
+<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+
+ +

Disabled fieldsets

+

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. Link buttons (with the <a> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.

+
+
+
+ +
+
+ +
+
+ +
+ +
+
+
+<form class="form-inline">
+  <fieldset disabled>
+    <input type="text" class="span4" placeholder="Disabled input">
+    <select class="span4">
+      <option>Disabled select</option>
+    </select>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox"> Can't check this
+      </label>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </fieldset>
+</form>
+
+ +

Validation states

+

Bootstrap includes validation styles for error, warning, info, and success messages. To use:

+ +

Validation styles are applied on a per-input basis. With horizontal forms, the <label class="control-label"> will always be styled.

+ +
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+<div class="control-group has-warning">
+  <label class="control-label" for="inputWarning">Input with warning</label>
+  <div class="controls">
+    <input type="text" class="input-with-feedback" id="inputWarning">
+  </div>
+</div>
+<div class="control-group has-error">
+  <label class="control-label" for="inputError">Input with error</label>
+  <div class="controls">
+    <input type="text" class="input-with-feedback" id="inputError">
+  </div>
+</div>
+<div class="control-group has-success">
+  <label class="control-label" for="inputSuccess">Input with success</label>
+  <div class="controls">
+    <input type="text" class="input-with-feedback id="inputSuccess"">
+  </div>
+</div>
+
+ + +

Extending form controls

Adding on top of existing browser controls, Bootstrap includes other useful form components.

@@ -1281,7 +1400,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped </div> -

Buttons instead of text

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

@@ -1556,123 +1674,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped <input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> - -

Form control states

-

Provide feedback to users or visitors with basic feedback states on form controls and labels.

- -

Input focus

-

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

- - -
-
-<input id="focusedInput" type="text" value="This is focused...">
-
- -

Invalid inputs

-

Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

-
- -
-
-<input class="span3" type="email" required>
-
- -

Disabled inputs

-

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

-
- -
-
-<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
-
- -

Disabled fieldsets

-

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. Link buttons (with the <a> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.

-
-
-
- -
-
- -
-
- -
- -
-
-
-<form class="form-inline">
-  <fieldset disabled>
-    <input type="text" class="span4" placeholder="Disabled input">
-    <select class="span4">
-      <option>Disabled select</option>
-    </select>
-    <div class="checkbox">
-      <label>
-        <input type="checkbox"> Can't check this
-      </label>
-    </div>
-    <button type="submit" class="btn btn-primary">Submit</button>
-  </fieldset>
-</form>
-
- -

Validation states

-

Bootstrap includes validation styles for error, warning, info, and success messages. To use:

- -

Validation styles are applied on a per-input basis. With horizontal forms, the <label class="control-label"> will always be styled.

- -
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
-<div class="control-group has-warning">
-  <label class="control-label" for="inputWarning">Input with warning</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputWarning">
-  </div>
-</div>
-<div class="control-group has-error">
-  <label class="control-label" for="inputError">Input with error</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputError">
-  </div>
-</div>
-<div class="control-group has-success">
-  <label class="control-label" for="inputSuccess">Input with success</label>
-  <div class="controls">
-    <input type="text" class="input-with-feedback id="inputSuccess"">
-  </div>
-</div>
-
-