diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/bootstrap.zip | bin | 56916 -> 56916 bytes | |||
| -rw-r--r-- | docs/base-css.html | 87 | ||||
| -rw-r--r-- | docs/templates/pages/base-css.mustache | 87 |
3 files changed, 82 insertions, 92 deletions
diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip Binary files differindex 164d0c267..875d7d9f4 100644 --- a/docs/assets/bootstrap.zip +++ b/docs/assets/bootstrap.zip 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. <h2>Horizontal forms</h2> <div class="row"> + <div class="span4"> + <p></p> + <p>Shown on the right are all the default form controls we support. Here's the bulleted list:</p> + <ul> + <li>text inputs (text, password, email, etc)</li> + <li>checkbox</li> + <li>radio</li> + <li>select</li> + <li>multiple select</li> + <li>file input</li> + <li>textarea</li> + </ul> + </div><!-- /.span --> <div class="span8"> <form class="form-horizontal"> <fieldset> - <legend>Controls Bootstrap supports</legend> <div class="control-group"> <label class="control-label" for="input01">Text input</label> <div class="controls"> @@ -1019,31 +1031,27 @@ For example, <code>section</code> should be wrapped as inline. </form> </pre> </div> - <div class="span4"> - <h3>What's included</h3> - <p>Shown on the left are all the default form controls we support. Here's the bulleted list:</p> - <ul> - <li>text inputs (text, password, email, etc)</li> - <li>checkbox</li> - <li>radio</li> - <li>select</li> - <li>multiple select</li> - <li>file input</li> - <li>textarea</li> - </ul> - <hr> - <h3>New defaults with v2.0</h3> - <p>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.</p> - </div> </div> <br> + <h2>Form control states</h2> <div class="row"> + <div class="span4"> + <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> + <hr> + <h3>Form validation</h3> + <p>It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.</p> +<pre class="prettyprint linenums"> +<fieldset + class="control-group error"> + … +</fieldset> +</pre> + </div> <div class="span8"> <form class="form-horizontal"> <fieldset> - <legend>Form control states</legend> <div class="control-group"> <label class="control-label" for="focusedInput">Focused input</label> <div class="controls"> @@ -1112,28 +1120,29 @@ For example, <code>section</code> should be wrapped as inline. </fieldset> </form> </div> - <div class="span4"> - <h3>Redesigned browser states</h3> - <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> - <hr> - <h3>Form validation</h3> - <p>It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.</p> -<pre class="prettyprint linenums"> -<fieldset - class="control-group error"> - … -</fieldset> -</pre> - </div> </div> <br> + <h2>Extending form controls</h2> <div class="row"> + <div class="span4"> + <h3>Prepend & append inputs</h3> + <p>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.</p> + <hr> + <h3>Checkboxes and radios</h3> + <p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code><label class="checkbox"></code> that wraps the <code><input type="checkbox"></code>.</p> + <p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p> + <hr> + <h4>Inline forms and append/prepend</h4> + <p>To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.</p> + <hr> + <h4>Form help text</h4> + <p>To add help text for your form inputs, include inline help text with <code><span class="help-inline"></code> or a help text block with <code><p class="help-block"></code> after the input element.</p> + </div> <div class="span8"> <form class="form-horizontal"> <fieldset> - <legend>Extending form controls</legend> <div class="control-group"> <label class="control-label">Form grid sizes</label> <div class="controls docs-input-sizes"> @@ -1259,20 +1268,6 @@ For example, <code>section</code> should be wrapped as inline. </fieldset> </form> </div> - <div class="span4"> - <h3>Prepend & append inputs</h3> - <p>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.</p> - <hr> - <h3>Checkboxes and radios</h3> - <p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code><label class="checkbox"></code> that wraps the <code><input type="checkbox"></code>.</p> - <p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p> - <hr> - <h4>Inline forms and append/prepend</h4> - <p>To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.</p> - <hr> - <h4>Form help text</h4> - <p>To add help text for your form inputs, include inline help text with <code><span class="help-inline"></code> or a help text block with <code><p class="help-block"></code> after the input element.</p> - </div> </div><!-- /row --> </section> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 9644ea770..0b6e17e69 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -863,10 +863,22 @@ <h2>{{_i}}Horizontal forms{{/i}}</h2> <div class="row"> + <div class="span4"> + <p>{{_i}}{{/i}}</p> + <p>{{_i}}Shown on the right are all the default form controls we support. Here's the bulleted list:{{/i}}</p> + <ul> + <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li> + <li>{{_i}}checkbox{{/i}}</li> + <li>{{_i}}radio{{/i}}</li> + <li>{{_i}}select{{/i}}</li> + <li>{{_i}}multiple select{{/i}}</li> + <li>{{_i}}file input{{/i}}</li> + <li>{{_i}}textarea{{/i}}</li> + </ul> + </div><!-- /.span --> <div class="span8"> <form class="form-horizontal"> <fieldset> - <legend>{{_i}}Controls Bootstrap supports{{/i}}</legend> <div class="control-group"> <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label> <div class="controls"> @@ -942,31 +954,27 @@ </form> </pre> </div> - <div class="span4"> - <h3>{{_i}}What's included{{/i}}</h3> - <p>{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}</p> - <ul> - <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li> - <li>{{_i}}checkbox{{/i}}</li> - <li>{{_i}}radio{{/i}}</li> - <li>{{_i}}select{{/i}}</li> - <li>{{_i}}multiple select{{/i}}</li> - <li>{{_i}}file input{{/i}}</li> - <li>{{_i}}textarea{{/i}}</li> - </ul> - <hr> - <h3>{{_i}}New defaults with v2.0{{/i}}</h3> - <p>{{_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}}</p> - </div> </div> <br> + <h2>{{_i}}Form control states{{/i}}</h2> <div class="row"> + <div class="span4"> + <p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p> + <hr> + <h3>{{_i}}Form validation{{/i}}</h3> + <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p> +<pre class="prettyprint linenums"> +<fieldset + class="control-group error"> + … +</fieldset> +</pre> + </div> <div class="span8"> <form class="form-horizontal"> <fieldset> - <legend>{{_i}}Form control states{{/i}}</legend> <div class="control-group"> <label class="control-label" for="focusedInput">{{_i}}Focused input{{/i}}</label> <div class="controls"> @@ -1035,28 +1043,29 @@ </fieldset> </form> </div> - <div class="span4"> - <h3>{{_i}}Redesigned browser states{{/i}}</h3> - <p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p> - <hr> - <h3>{{_i}}Form validation{{/i}}</h3> - <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p> -<pre class="prettyprint linenums"> -<fieldset - class="control-group error"> - … -</fieldset> -</pre> - </div> </div> <br> + <h2>{{_i}}Extending form controls{{/i}}</h2> <div class="row"> + <div class="span4"> + <h3>{{_i}}Prepend & append inputs{{/i}}</h3> + <p>{{_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}}</p> + <hr> + <h3>{{_i}}Checkboxes and radios{{/i}}</h3> + <p>{{_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 <code><label class="checkbox"></code> that wraps the <code><input type="checkbox"></code>.{{/i}}</p> + <p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p> + <hr> + <h4>{{_i}}Inline forms and append/prepend{{/i}}</h4> + <p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p> + <hr> + <h4>{{_i}}Form help text{{/i}}</h4> + <p>{{_i}}To add help text for your form inputs, include inline help text with <code><span class="help-inline"></code> or a help text block with <code><p class="help-block"></code> after the input element.{{/i}}</p> + </div> <div class="span8"> <form class="form-horizontal"> <fieldset> - <legend>{{_i}}Extending form controls{{/i}}</legend> <div class="control-group"> <label class="control-label">{{_i}}Form grid sizes{{/i}}</label> <div class="controls docs-input-sizes"> @@ -1182,20 +1191,6 @@ </fieldset> </form> </div> - <div class="span4"> - <h3>{{_i}}Prepend & append inputs{{/i}}</h3> - <p>{{_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}}</p> - <hr> - <h3>{{_i}}Checkboxes and radios{{/i}}</h3> - <p>{{_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 <code><label class="checkbox"></code> that wraps the <code><input type="checkbox"></code>.{{/i}}</p> - <p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p> - <hr> - <h4>{{_i}}Inline forms and append/prepend{{/i}}</h4> - <p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p> - <hr> - <h4>{{_i}}Form help text{{/i}}</h4> - <p>{{_i}}To add help text for your form inputs, include inline help text with <code><span class="help-inline"></code> or a help text block with <code><p class="help-block"></code> after the input element.{{/i}}</p> - </div> </div><!-- /row --> </section> |