diff options
| -rw-r--r-- | docs/css.html | 237 | ||||
| -rw-r--r-- | docs/templates/pages/css.mustache | 237 |
2 files changed, 238 insertions, 236 deletions
diff --git a/docs/css.html b/docs/css.html index 0c1322a4e..051290dc9 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1267,6 +1267,125 @@ For example, <code>&lt;section&gt;</code> should be wrapped </pre> + + <h2>Form control states</h2> + <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p> + + <h3 id="forms-input-focus">Input focus</h3> + <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> + <form class="bs-docs-example form-inline"> + <input class="focused" id="focusedInput" type="text" value="This is focused..."> + </form> +<pre class="prettyprint linenums"> +<input id="focusedInput" type="text" value="This is focused..."> +</pre> + + <h3 id="forms-invalid-inputs">Invalid inputs</h3> + <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p> + <form class="bs-docs-example form-inline"> + <input class="span3" type="email" placeholder="[email protected]" required> + </form> +<pre class="prettyprint linenums"> +<input class="span3" type="email" required> +</pre> + + <h3 id="forms-disabled-inputs">Disabled inputs</h3> + <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> + <form class="bs-docs-example form-inline"> + <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> + </form> +<pre class="prettyprint linenums"> +<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> +</pre> + + <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3> + <p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p> + <form class="bs-docs-example form-inline"> + <fieldset disabled> + <div> + <input type="text" class="span4" placeholder="Disabled input"> + </div> + <div> + <select class="span4"> + <option>Disabled select</option> + </select> + </div> + <div class="checkbox"> + <label> + <input type="checkbox"> Can't check this + </label> + </div> + <button type="submit" class="btn btn-primary">Submit</button> + </fieldset> + </form> +<pre class="prettyprint linenums"> +<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> +</pre> + + <h3 id="forms-validation">Validation states</h3> + <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p> + <ul> + <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li> + <li>Add .input-with-feedback to the field(s) in question</li> + </ul> + <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code><label class="control-label"></code> will always be styled.</p> + + <form class="bs-docs-example form-horizontal"> + <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> + </form> +<pre class="prettyprint linenums"> +<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> +</pre> + + + <h2 id="forms-extending">Extending form controls</h2> <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p> @@ -1341,7 +1460,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped </div> </pre> - <h4>Buttons instead of text</h4> <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <form class="bs-docs-example"> @@ -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> </pre> - - <h2>Form control states</h2> - <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p> - - <h3 id="forms-input-focus">Input focus</h3> - <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> - <form class="bs-docs-example form-inline"> - <input class="focused" id="focusedInput" type="text" value="This is focused..."> - </form> -<pre class="prettyprint linenums"> -<input id="focusedInput" type="text" value="This is focused..."> -</pre> - - <h3 id="forms-invalid-inputs">Invalid inputs</h3> - <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p> - <form class="bs-docs-example form-inline"> - <input class="span3" type="email" placeholder="[email protected]" required> - </form> -<pre class="prettyprint linenums"> -<input class="span3" type="email" required> -</pre> - - <h3 id="forms-disabled-inputs">Disabled inputs</h3> - <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> - <form class="bs-docs-example form-inline"> - <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> - </form> -<pre class="prettyprint linenums"> -<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> -</pre> - - <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3> - <p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p> - <form class="bs-docs-example form-inline"> - <fieldset disabled> - <div> - <input type="text" class="span4" placeholder="Disabled input"> - </div> - <div> - <select class="span4"> - <option>Disabled select</option> - </select> - </div> - <div class="checkbox"> - <label> - <input type="checkbox"> Can't check this - </label> - </div> - <button type="submit" class="btn btn-primary">Submit</button> - </fieldset> - </form> -<pre class="prettyprint linenums"> -<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> -</pre> - - <h3 id="forms-validation">Validation states</h3> - <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p> - <ul> - <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li> - <li>Add .input-with-feedback to the field(s) in question</li> - </ul> - <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code><label class="control-label"></code> will always be styled.</p> - - <form class="bs-docs-example form-horizontal"> - <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> - </form> -<pre class="prettyprint linenums"> -<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> -</pre> - </section> diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 64d5005a5..b9182c28a 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 </pre> + + <h2>Form control states</h2> + <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p> + + <h3 id="forms-input-focus">Input focus</h3> + <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> + <form class="bs-docs-example form-inline"> + <input class="focused" id="focusedInput" type="text" value="This is focused..."> + </form> +<pre class="prettyprint linenums"> +<input id="focusedInput" type="text" value="This is focused..."> +</pre> + + <h3 id="forms-invalid-inputs">Invalid inputs</h3> + <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p> + <form class="bs-docs-example form-inline"> + <input class="span3" type="email" placeholder="[email protected]" required> + </form> +<pre class="prettyprint linenums"> +<input class="span3" type="email" required> +</pre> + + <h3 id="forms-disabled-inputs">Disabled inputs</h3> + <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> + <form class="bs-docs-example form-inline"> + <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> + </form> +<pre class="prettyprint linenums"> +<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> +</pre> + + <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3> + <p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p> + <form class="bs-docs-example form-inline"> + <fieldset disabled> + <div> + <input type="text" class="span4" placeholder="Disabled input"> + </div> + <div> + <select class="span4"> + <option>Disabled select</option> + </select> + </div> + <div class="checkbox"> + <label> + <input type="checkbox"> Can't check this + </label> + </div> + <button type="submit" class="btn btn-primary">Submit</button> + </fieldset> + </form> +<pre class="prettyprint linenums"> +<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> +</pre> + + <h3 id="forms-validation">Validation states</h3> + <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p> + <ul> + <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li> + <li>Add .input-with-feedback to the field(s) in question</li> + </ul> + <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code><label class="control-label"></code> will always be styled.</p> + + <form class="bs-docs-example form-horizontal"> + <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> + </form> +<pre class="prettyprint linenums"> +<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> +</pre> + + + <h2 id="forms-extending">Extending form controls</h2> <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p> @@ -1281,7 +1400,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped </div> </pre> - <h4>Buttons instead of text</h4> <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <form class="bs-docs-example"> @@ -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> </pre> - - <h2>Form control states</h2> - <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p> - - <h3 id="forms-input-focus">Input focus</h3> - <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> - <form class="bs-docs-example form-inline"> - <input class="focused" id="focusedInput" type="text" value="This is focused..."> - </form> -<pre class="prettyprint linenums"> -<input id="focusedInput" type="text" value="This is focused..."> -</pre> - - <h3 id="forms-invalid-inputs">Invalid inputs</h3> - <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p> - <form class="bs-docs-example form-inline"> - <input class="span3" type="email" placeholder="[email protected]" required> - </form> -<pre class="prettyprint linenums"> -<input class="span3" type="email" required> -</pre> - - <h3 id="forms-disabled-inputs">Disabled inputs</h3> - <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> - <form class="bs-docs-example form-inline"> - <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> - </form> -<pre class="prettyprint linenums"> -<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> -</pre> - - <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3> - <p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p> - <form class="bs-docs-example form-inline"> - <fieldset disabled> - <div> - <input type="text" class="span4" placeholder="Disabled input"> - </div> - <div> - <select class="span4"> - <option>Disabled select</option> - </select> - </div> - <div class="checkbox"> - <label> - <input type="checkbox"> Can't check this - </label> - </div> - <button type="submit" class="btn btn-primary">Submit</button> - </fieldset> - </form> -<pre class="prettyprint linenums"> -<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> -</pre> - - <h3 id="forms-validation">Validation states</h3> - <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p> - <ul> - <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li> - <li>Add .input-with-feedback to the field(s) in question</li> - </ul> - <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code><label class="control-label"></code> will always be styled.</p> - - <form class="bs-docs-example form-horizontal"> - <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> - </form> -<pre class="prettyprint linenums"> -<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> -</pre> - </section> |