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

Rearrange forms content

parent 6993fadf
Hide whitespace changes
Inline Side-by-side
Showing
with 238 additions and 236 deletions
+238 -236
docs/css.html
+ 119
- 118
View file @ 3d74c670
......@@ -1267,6 +1267,125 @@ For example, <code><section></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">
&lt;input id="focusedInput" type="text" value="This is focused..."&gt;
</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="test@example.com" required>
</form>
<pre class="prettyprint linenums">
&lt;input class="span3" type="email" required&gt;
</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">
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
</pre>
<h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
<p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</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">
&lt;form class="form-inline"&gt;
&lt;fieldset disabled&gt;
&lt;input type="text" class="span4" placeholder="Disabled input"&gt;
&lt;select class="span4"&gt;
&lt;option&gt;Disabled select&lt;/option&gt;
&lt;/select&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; Can't check this
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
</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>&lt;label class="control-label"&gt;</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">
&lt;div class="control-group has-warning"&gt;
&lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-with-feedback" id="inputWarning"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group has-error"&gt;
&lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-with-feedback" id="inputError"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group has-success"&gt;
&lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-with-feedback id="inputSuccess""&gt;
&lt;/div&gt;
&lt;/div&gt;
</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, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
&lt;/div&gt;
</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, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
&lt;input type="text"&gt;&lt;span class="help-block"&gt;A longer block of help text that breaks onto a new line and may extend beyond one line.&lt;/span&gt;
</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">
&lt;input id="focusedInput" type="text" value="This is focused..."&gt;
</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="test@example.com" required>
</form>
<pre class="prettyprint linenums">
&lt;input class="span3" type="email" required&gt;
</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">
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
</pre>
<h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
<p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</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">
&lt;form class="form-inline"&gt;
&lt;fieldset disabled&gt;
&lt;input type="text" class="span4" placeholder="Disabled input"&gt;
&lt;select class="span4"&gt;
&lt;option&gt;Disabled select&lt;/option&gt;
&lt;/select&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; Can't check this
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
</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>&lt;label class="control-label"&gt;</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">
&lt;div class="control-group has-warning"&gt;
&lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-with-feedback" id="inputWarning"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group has-error"&gt;
&lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-with-feedback" id="inputError"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group has-success"&gt;
&lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-with-feedback id="inputSuccess""&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>
......
docs/templates/pages/css.mustache
+ 119
- 118
View file @ 3d74c670
......@@ -1207,6 +1207,125 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; 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">
&lt;input id="focusedInput" type="text" value="This is focused..."&gt;
</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="test@example.com" required>
</form>
<pre class="prettyprint linenums">
&lt;input class="span3" type="email" required&gt;
</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">
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
</pre>
<h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
<p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</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">
&lt;form class="form-inline"&gt;
&lt;fieldset disabled&gt;
&lt;input type="text" class="span4" placeholder="Disabled input"&gt;
&lt;select class="span4"&gt;
&lt;option&gt;Disabled select&lt;/option&gt;
&lt;/select&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; Can't check this
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
</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>&lt;label class="control-label"&gt;</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">
&lt;div class="control-group has-warning"&gt;
&lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-with-feedback" id="inputWarning"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group has-error"&gt;
&lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-with-feedback" id="inputError"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group has-success"&gt;
&lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-with-feedback id="inputSuccess""&gt;
&lt;/div&gt;
&lt;/div&gt;
</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, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
&lt;/div&gt;
</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, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
&lt;input type="text"&gt;&lt;span class="help-block"&gt;A longer block of help text that breaks onto a new line and may extend beyond one line.&lt;/span&gt;
</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">
&lt;input id="focusedInput" type="text" value="This is focused..."&gt;
</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="test@example.com" required>
</form>
<pre class="prettyprint linenums">
&lt;input class="span3" type="email" required&gt;
</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">
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
</pre>
<h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
<p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</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">
&lt;form class="form-inline"&gt;
&lt;fieldset disabled&gt;
&lt;input type="text" class="span4" placeholder="Disabled input"&gt;
&lt;select class="span4"&gt;
&lt;option&gt;Disabled select&lt;/option&gt;
&lt;/select&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; Can't check this
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
</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>&lt;label class="control-label"&gt;</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">
&lt;div class="control-group has-warning"&gt;
&lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-with-feedback" id="inputWarning"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group has-error"&gt;
&lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-with-feedback" id="inputError"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group has-success"&gt;
&lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-with-feedback id="inputSuccess""&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</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