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><section></code> should be wrapped + +
Provide feedback to users or visitors with basic feedback states on form controls and labels.
+ +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..."> ++ +
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> ++ +
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> ++ +
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> ++ +
Bootstrap includes validation styles for error, warning, info, and success messages. To use:
+.has-warning
, .has-error
, or .has-success
to the parent elementValidation 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> ++ + +
Adding on top of existing browser controls, Bootstrap includes other useful form components.
@@ -1341,7 +1460,6 @@ For example, <code><section></code> should be wrapped </div> -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.
-<input id="focusedInput" type="text" value="This is focused..."> -- -
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> -- -
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> -- -
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> -- -
Bootstrap includes validation styles for error, warning, info, and success messages. To use:
-.has-warning
, .has-error
, or .has-success
to the parent elementValidation 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><section></code> should be wrapped + +
Provide feedback to users or visitors with basic feedback states on form controls and labels.
+ +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..."> ++ +
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> ++ +
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> ++ +
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> ++ +
Bootstrap includes validation styles for error, warning, info, and success messages. To use:
+.has-warning
, .has-error
, or .has-success
to the parent elementValidation 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> ++ + +
Adding on top of existing browser controls, Bootstrap includes other useful form components.
@@ -1281,7 +1400,6 @@ For example, <code><section></code> should be wrapped </div> -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.
-<input id="focusedInput" type="text" value="This is focused..."> -- -
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> -- -
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> -- -
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> -- -
Bootstrap includes validation styles for error, warning, info, and success messages. To use:
-.has-warning
, .has-error
, or .has-success
to the parent elementValidation 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> --