Skip to content

B
bootstrap
Commit 7bf27674 authored by Mark Otto's avatar Mark Otto
Browse files
Options

remove form docs from the styles and markup, it's no longer needed

parent 15a1c0ce
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 81 deletions
docs/assets/css/bootstrap.css
View file @ 7bf27674
...@@ -943,9 +943,20 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec ...@@ -943,9 +943,20 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
} }
.form-search label, .form-inline label { .form-search label,
.form-inline label,
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
display: inline-block; display: inline-block;
} }
.form-search .input-append .add-on,
.form-inline .input-prepend .add-on,
.form-search .input-append .add-on,
.form-inline .input-prepend .add-on {
vertical-align: middle;
}
.control-group { .control-group {
margin-bottom: 9px; margin-bottom: 9px;
} }
......
docs/assets/css/docs.css
View file @ 7bf27674
...@@ -543,19 +543,6 @@ form.well { ...@@ -543,19 +543,6 @@ form.well {
margin: 18px 0; margin: 18px 0;
} }
/* Form docs for horizontal forms */
.form-docs {
padding-left: 10px;
}
.form-docs h3,
.form-docs p,
.form-docs li {
color: #777;
}
.form-docs hr {
margin: 18px 0;
}
/* Fake the :focus state to demo it */ /* Fake the :focus state to demo it */
.focused { .focused {
border-color: rgba(82,168,236,.8); border-color: rgba(82,168,236,.8);
...@@ -689,10 +676,6 @@ form.well { ...@@ -689,10 +676,6 @@ form.well {
left: auto; left: auto;
} }
/* Forms docs */
.form-docs {
padding-left: 0; /* down from 10px */
}
} }
......
docs/base-css.html
View file @ 7bf27674
...@@ -952,22 +952,20 @@ For example, <code>section</code> should be wrapped as inline. ...@@ -952,22 +952,20 @@ For example, <code>section</code> should be wrapped as inline.
</form> </form>
</div> </div>
<div class="span4"> <div class="span4">
<div class="form-docs"> <h3>What's included</h3>
<h3>What's included</h3> <p>Shown on the left are all the default form controls we support. Here's the bulleted list:</p>
<p>Shown on the left are all the default form controls we support. Here's the bulleted list:</p> <ul>
<ul> <li>text inputs (text, password, email, etc)</li>
<li>text inputs (text, password, email, etc)</li> <li>checkbox</li>
<li>checkbox</li> <li>radio</li>
<li>radio</li> <li>select</li>
<li>select</li> <li>multiple select</li>
<li>multiple select</li> <li>file input</li>
<li>file input</li> <li>textarea</li>
<li>textarea</li> </ul>
</ul> <hr>
<hr> <h3>New defaults with v2.0</h3>
<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>
<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>
</div> </div>
...@@ -1047,19 +1045,17 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -1047,19 +1045,17 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</form> </form>
</div> </div>
<div class="span4"> <div class="span4">
<div class="form-docs"> <h3>Redesigned browser states</h3>
<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 it's place for <code>:focus</code>.</p>
<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 it's place for <code>:focus</code>.</p> <hr>
<hr> <h3>Form validation</h3>
<h3>Form validation</h3> <p>It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.</p>
<p>It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;fieldset &lt;fieldset
class="control-group error"&gt; class="control-group error"&gt;
… …
&lt;/fieldset&gt; &lt;/fieldset&gt;
</pre> </pre>
</div>
</div> </div>
</div> </div>
...@@ -1152,14 +1148,15 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -1152,14 +1148,15 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</form> </form>
</div> </div>
<div class="span4"> <div class="span4">
<div class="form-docs"> <h3>Prepend &amp; append inputs</h3>
<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>
<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>
<hr> <h3>Checkboxes and radios</h3>
<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>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>
<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>
</div> <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>
</div> </div>
</div><!-- /row --> </div><!-- /row -->
</section> </section>
......
docs/templates/pages/base-css.mustache
View file @ 7bf27674
...@@ -880,22 +880,20 @@ ...@@ -880,22 +880,20 @@
</form> </form>
</div> </div>
<div class="span4"> <div class="span4">
<div class="form-docs"> <h3>{{_i}}What's included{{/i}}</h3>
<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>
<p>{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}</p> <ul>
<ul> <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
<li>{{_i}}text inputs (text, password, email, etc){{/i}}</li> <li>{{_i}}checkbox{{/i}}</li>
<li>{{_i}}checkbox{{/i}}</li> <li>{{_i}}radio{{/i}}</li>
<li>{{_i}}radio{{/i}}</li> <li>{{_i}}select{{/i}}</li>
<li>{{_i}}select{{/i}}</li> <li>{{_i}}multiple select{{/i}}</li>
<li>{{_i}}multiple select{{/i}}</li> <li>{{_i}}file input{{/i}}</li>
<li>{{_i}}file input{{/i}}</li> <li>{{_i}}textarea{{/i}}</li>
<li>{{_i}}textarea{{/i}}</li> </ul>
</ul> <hr>
<hr> <h3>{{_i}}New defaults with v2.0{{/i}}</h3>
<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>
<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>
</div> </div>
...@@ -975,19 +973,17 @@ ...@@ -975,19 +973,17 @@
</form> </form>
</div> </div>
<div class="span4"> <div class="span4">
<div class="form-docs"> <h3>{{_i}}Redesigned browser states{{/i}}</h3>
<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 it's place for <code>:focus</code>.{{/i}}</p>
<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 it's place for <code>:focus</code>.{{/i}}</p> <hr>
<hr> <h3>{{_i}}Form validation{{/i}}</h3>
<h3>{{_i}}Form validation{{/i}}</h3> <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.{{/i}}</p>
<p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;fieldset &lt;fieldset
class="control-group error"&gt; class="control-group error"&gt;
… …
&lt;/fieldset&gt; &lt;/fieldset&gt;
</pre> </pre>
</div>
</div> </div>
</div> </div>
...@@ -1080,14 +1076,15 @@ ...@@ -1080,14 +1076,15 @@
</form> </form>
</div> </div>
<div class="span4"> <div class="span4">
<div class="form-docs"> <h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
<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>
<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>
<hr> <h3>{{_i}}Checkboxes and radios{{/i}}</h3>
<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}}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>
<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>
</div> <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>
</div> </div>
</div><!-- /row --> </div><!-- /row -->
</section> </section>
......
less/forms.less
View file @ 7bf27674
...@@ -495,9 +495,20 @@ select:focus:required:invalid { ...@@ -495,9 +495,20 @@ select:focus:required:invalid {
} }
} }
.form-search label, .form-search label,
.form-inline label { .form-inline label,
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
display: inline-block; display: inline-block;
} }
// Make the prepend and append add-on vertical-align: middle;
.form-search .input-append .add-on,
.form-inline .input-prepend .add-on,
.form-search .input-append .add-on,
.form-inline .input-prepend .add-on {
vertical-align: middle;
}
// Margin to space out fieldsets // Margin to space out fieldsets
.control-group { .control-group {
......
Markdown is supported
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