Skip to content
GitLab
Commit a9f9949b authored by Mark Otto's avatar Mark Otto
Browse files

rearrange other parts of forms docs

parent 04baa075
Hide whitespace changes
Inline Side-by-side
Showing
with 82 additions and 92 deletions
+82 -92
docs/assets/bootstrap.zip
+ 0
- 0
View file @ a9f9949b
No preview for this file type
docs/base-css.html
+ 41
- 46
View file @ a9f9949b
...@@ -940,10 +940,22 @@ For example, <code>section</code> should be wrapped as inline. ...@@ -940,10 +940,22 @@ For example, <code>section</code> should be wrapped as inline.
<h2>Horizontal forms</h2> <h2>Horizontal forms</h2>
<div class="row"> <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"> <div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<legend>Controls Bootstrap supports</legend>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="input01">Text input</label> <label class="control-label" for="input01">Text input</label>
<div class="controls"> <div class="controls">
...@@ -1019,31 +1031,27 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -1019,31 +1031,27 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div> </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> </div>
<br> <br>
<h2>Form control states</h2>
<div class="row"> <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">
&lt;fieldset
class="control-group error"&gt;
…
&lt;/fieldset&gt;
</pre>
</div>
<div class="span8"> <div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<legend>Form control states</legend>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="focusedInput">Focused input</label> <label class="control-label" for="focusedInput">Focused input</label>
<div class="controls"> <div class="controls">
...@@ -1112,28 +1120,29 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -1112,28 +1120,29 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</fieldset> </fieldset>
</form> </form>
</div> </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">
&lt;fieldset
class="control-group error"&gt;
…
&lt;/fieldset&gt;
</pre>
</div>
</div> </div>
<br> <br>
<h2>Extending form controls</h2>
<div class="row"> <div class="row">
<div class="span4">
<h3>Prepend &amp; append inputs</h3>
<p>Input groups&mdash;with appended or prepended text&mdash;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>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</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>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.</p>
</div>
<div class="span8"> <div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<legend>Extending form controls</legend>
<div class="control-group"> <div class="control-group">
<label class="control-label">Form grid sizes</label> <label class="control-label">Form grid sizes</label>
<div class="controls docs-input-sizes"> <div class="controls docs-input-sizes">
...@@ -1259,20 +1268,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -1259,20 +1268,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</fieldset> </fieldset>
</form> </form>
</div> </div>
<div class="span4">
<h3>Prepend &amp; append inputs</h3>
<p>Input groups&mdash;with appended or prepended text&mdash;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>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</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>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.</p>
</div>
</div><!-- /row --> </div><!-- /row -->
</section> </section>
......
docs/templates/pages/base-css.mustache
+ 41
- 46
View file @ a9f9949b
...@@ -863,10 +863,22 @@ ...@@ -863,10 +863,22 @@
<h2>{{_i}}Horizontal forms{{/i}}</h2> <h2>{{_i}}Horizontal forms{{/i}}</h2>
<div class="row"> <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"> <div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<legend>{{_i}}Controls Bootstrap supports{{/i}}</legend>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="input01">{{_i}}Text input{{/i}}</label> <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
<div class="controls"> <div class="controls">
...@@ -942,31 +954,27 @@ ...@@ -942,31 +954,27 @@
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div> </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> </div>
<br> <br>
<h2>{{_i}}Form control states{{/i}}</h2>
<div class="row"> <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">
&lt;fieldset
class="control-group error"&gt;
…
&lt;/fieldset&gt;
</pre>
</div>
<div class="span8"> <div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<legend>{{_i}}Form control states{{/i}}</legend>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="focusedInput">{{_i}}Focused input{{/i}}</label> <label class="control-label" for="focusedInput">{{_i}}Focused input{{/i}}</label>
<div class="controls"> <div class="controls">
...@@ -1035,28 +1043,29 @@ ...@@ -1035,28 +1043,29 @@
</fieldset> </fieldset>
</form> </form>
</div> </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">
&lt;fieldset
class="control-group error"&gt;
…
&lt;/fieldset&gt;
</pre>
</div>
</div> </div>
<br> <br>
<h2>{{_i}}Extending form controls{{/i}}</h2>
<div class="row"> <div class="row">
<div class="span4">
<h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
<p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;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>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</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>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.{{/i}}</p>
</div>
<div class="span8"> <div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<legend>{{_i}}Extending form controls{{/i}}</legend>
<div class="control-group"> <div class="control-group">
<label class="control-label">{{_i}}Form grid sizes{{/i}}</label> <label class="control-label">{{_i}}Form grid sizes{{/i}}</label>
<div class="controls docs-input-sizes"> <div class="controls docs-input-sizes">
...@@ -1182,20 +1191,6 @@ ...@@ -1182,20 +1191,6 @@
</fieldset> </fieldset>
</form> </form>
</div> </div>
<div class="span4">
<h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
<p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;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>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</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>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.{{/i}}</p>
</div>
</div><!-- /row --> </div><!-- /row -->
</section> </section>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment