mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 05:00:15 +01:00
Code Issues Releases Wiki Activity

more tests for form styles; includes lightening help text

Browse Source
This commit is contained in:
Mark Otto 2012-11-30 13:35:20 -08:00
parent f9a47e3a5f
commit fe8061b84e
5 changed files with 125 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
docs/assets/css/bootstrap.css vendored
View File

@ -751,8 +751,9 @@ legend {
} }
label { label {
display: block; display: inline-block;
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold;
} }
select, select,
@ -781,10 +782,17 @@ input[type="color"],
color: #555555; color: #555555;
vertical-align: middle; vertical-align: middle;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
} }
input, input,
@ -794,33 +802,18 @@ textarea,
width: 100%; width: 100%;
} }
textarea { input[type="file"],
height: auto; input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto;
} }
textarea, textarea {
input[type="text"], height: auto;
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
} }
textarea:focus, textarea:focus,
@ -857,16 +850,6 @@ input[type="checkbox"] {
line-height: normal; line-height: normal;
} }
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto;
}
select, select,
input[type="file"] { input[type="file"] {
height: 34px; height: 34px;
@ -930,10 +913,16 @@ textarea::-webkit-input-placeholder {
.radio, .radio,
.checkbox { .checkbox {
display: block;
min-height: 20px; min-height: 20px;
padding-left: 20px; padding-left: 20px;
} }
.radio label,
.checkbox label {
font-weight: normal;
}
.radio input[type="radio"], .radio input[type="radio"],
.checkbox input[type="checkbox"] { .checkbox input[type="checkbox"] {
float: left; float: left;
@ -1354,7 +1343,7 @@ select:focus:invalid:focus {
.help-block, .help-block,
.help-inline { .help-inline {
color: #595959; color: #737373;
} }
.help-block { .help-block {
@ -1599,7 +1588,14 @@ input.search-query {
.form-search .checkbox, .form-search .checkbox,
.form-inline .radio, .form-inline .radio,
.form-inline .checkbox { .form-inline .checkbox {
display: inline-block;
padding-left: 0; padding-left: 0;
}
.form-search .radio label,
.form-search .checkbox label,
.form-inline .radio label,
.form-inline .checkbox label {
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }

36
docs/base-css.html
View File

@ -885,16 +885,18 @@ For example, <code><section></code> should be wrapped as inlin
</div> </div>
<h2 id="forms-default">Default styles</h2> <h2 id="forms-default">Default styles</h2>
<p>Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p> <p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<fieldset> <fieldset>
<legend>Legend</legend> <legend>Legend</legend>
<label>Label name</label> <label>Label name</label>
<input type="text" placeholder="Type something…"> <input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span> <p class="help-block">Example block-level help text here.</p>
<label class="checkbox"> <div class="checkbox">
<input type="checkbox"> Check me out <label>
</label> <input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn">Submit</button> <button type="submit" class="btn">Submit</button>
</fieldset> </fieldset>
</form> </form>
@ -905,9 +907,11 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;label&gt;Label name&lt;/label&gt; &lt;label&gt;Label name&lt;/label&gt;
&lt;input type="text" placeholder="Type something…"&gt; &lt;input type="text" placeholder="Type something…"&gt;
&lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt; &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
&lt;label class="checkbox"&gt; &lt;div class="checkbox"&gt;
&lt;input type="checkbox"&gt; Check me out &lt;label&gt;
&lt;/label&gt; &lt;input type="checkbox"&gt; Check me out
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt; &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
&lt;/fieldset&gt; &lt;/fieldset&gt;
&lt;/form&gt; &lt;/form&gt;
@ -938,18 +942,22 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input type="text" class="span3" placeholder="Email"> <input type="text" class="span3" placeholder="Email">
<input type="password" class="span3" placeholder="Password"> <input type="password" class="span3" placeholder="Password">
<label class="checkbox"> <div class="checkbox">
<input type="checkbox"> Remember me <label>
</label> <input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn">Sign in</button> <button type="submit" class="btn">Sign in</button>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="form-inline"&gt; &lt;form class="form-inline"&gt;
&lt;input type="text" class="span3" placeholder="Email"&gt; &lt;input type="text" class="span3" placeholder="Email"&gt;
&lt;input type="password" class="span3" placeholder="Password"&gt; &lt;input type="password" class="span3" placeholder="Password"&gt;
&lt;label class="checkbox"&gt; &lt;div class="checkbox"&gt;
&lt;input type="checkbox"&gt; Remember me &lt;label&gt;
&lt;/label&gt; &lt;input type="checkbox"&gt; Remember me
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt; &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>

36
docs/templates/pages/base-css.mustache vendored
View File

@ -825,16 +825,18 @@
</div> </div>
<h2 id="forms-default">{{_i}}Default styles{{/i}}</h2> <h2 id="forms-default">{{_i}}Default styles{{/i}}</h2>
<p>{{_i}}Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}</p> <p>{{_i}}Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.{{/i}}</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<fieldset> <fieldset>
<legend>Legend</legend> <legend>Legend</legend>
<label>{{_i}}Label name{{/i}}</label> <label>{{_i}}Label name{{/i}}</label>
<input type="text" placeholder="{{_i}}Type something…{{/i}}"> <input type="text" placeholder="{{_i}}Type something…{{/i}}">
<span class="help-block">{{_i}}Example block-level help text here.{{/i}}</span> <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
<label class="checkbox"> <div class="checkbox">
<input type="checkbox"> {{_i}}Check me out{{/i}} <label>
</label> <input type="checkbox"> {{_i}}Check me out{{/i}}
</label>
</div>
<button type="submit" class="btn">{{_i}}Submit{{/i}}</button> <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
</fieldset> </fieldset>
</form>{{! /example }} </form>{{! /example }}
@ -845,9 +847,11 @@
&lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt; &lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt;
&lt;input type="text" placeholder="{{_i}}Type something…{{/i}}"&gt; &lt;input type="text" placeholder="{{_i}}Type something…{{/i}}"&gt;
&lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt; &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
&lt;label class="checkbox"&gt; &lt;div class="checkbox"&gt;
&lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}} &lt;label&gt;
&lt;/label&gt; &lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt; &lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt;
&lt;/fieldset&gt; &lt;/fieldset&gt;
&lt;/form&gt; &lt;/form&gt;
@ -878,18 +882,22 @@
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input type="text" class="span3" placeholder="{{_i}}Email{{/i}}"> <input type="text" class="span3" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="span3" placeholder="{{_i}}Password{{/i}}"> <input type="password" class="span3" placeholder="{{_i}}Password{{/i}}">
<label class="checkbox"> <div class="checkbox">
<input type="checkbox"> {{_i}}Remember me{{/i}} <label>
</label> <input type="checkbox"> {{_i}}Remember me{{/i}}
</label>
</div>
<button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
</form>{{! /example }} </form>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="form-inline"&gt; &lt;form class="form-inline"&gt;
&lt;input type="text" class="span3" placeholder="{{_i}}Email{{/i}}"&gt; &lt;input type="text" class="span3" placeholder="{{_i}}Email{{/i}}"&gt;
&lt;input type="password" class="span3" placeholder="{{_i}}Password{{/i}}"&gt; &lt;input type="password" class="span3" placeholder="{{_i}}Password{{/i}}"&gt;
&lt;label class="checkbox"&gt; &lt;div class="checkbox"&gt;
&lt;input type="checkbox"&gt; {{_i}}Remember me{{/i}} &lt;label&gt;
&lt;/label&gt; &lt;input type="checkbox"&gt; {{_i}}Remember me{{/i}}
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt; &lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>

49
less/forms.less
View File

@ -3,10 +3,9 @@
// -------------------------------------------------- // --------------------------------------------------
// General styles // Non-controls
// ------------------------- // -------------------------
form { form {
margin: 0 0 @baseLineHeight; margin: 0 0 @baseLineHeight;
} }
@ -30,8 +29,9 @@ legend {
} }
label { label {
display: block; display: inline-block;
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold;
} }
// Form controls // Form controls
@ -65,7 +65,10 @@ input[type="color"],
color: @gray; color: @gray;
vertical-align: middle; vertical-align: middle;
background-color: @inputBackground; background-color: @inputBackground;
border: 1px solid @inputBorder;
border-radius: @inputBorderRadius; border-radius: @inputBorderRadius;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border linear .2s, box-shadow linear .2s");
} }
// Reset appearance properties for textual inputs and textarea // Reset appearance properties for textual inputs and textarea
@ -77,6 +80,17 @@ textarea,
width: 100%; width: 100%;
} }
// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; // Override of generic input selector
}
// Reset height since textareas have rows // Reset height since textareas have rows
textarea { textarea {
height: auto; height: auto;
@ -99,10 +113,6 @@ input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"], input[type="color"],
.uneditable-input { .uneditable-input {
border: 1px solid @inputBorder;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border linear .2s, box-shadow linear .2s");
// Focus state // Focus state
&:focus { &:focus {
border-color: rgba(82,168,236,.8); border-color: rgba(82,168,236,.8);
@ -120,17 +130,6 @@ input[type="checkbox"] {
line-height: normal; line-height: normal;
} }
// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; // Override of generic input selector
}
// Set the height of select and file controls to match text inputs // Set the height of select and file controls to match text inputs
select, select,
input[type="file"] { input[type="file"] {
@ -201,9 +200,14 @@ textarea {
// Indent the labels to position radios/checkboxes as hanging // Indent the labels to position radios/checkboxes as hanging
.radio, .radio,
.checkbox { .checkbox {
display: block;
min-height: @baseLineHeight; // clear the floating input if there is no label text min-height: @baseLineHeight; // clear the floating input if there is no label text
padding-left: 20px; padding-left: 20px;
} }
.radio label,
.checkbox label {
font-weight: normal;
}
.radio input[type="radio"], .radio input[type="radio"],
.checkbox input[type="checkbox"] { .checkbox input[type="checkbox"] {
float: left; float: left;
@ -401,7 +405,7 @@ select:focus:invalid {
.help-block, .help-block,
.help-inline { .help-inline {
color: lighten(@textColor, 15%); // lighten the text some for contrast color: lighten(@textColor, 25%); // lighten the text some for contrast
} }
.help-block { .help-block {
@ -618,9 +622,12 @@ input.search-query {
.form-search .checkbox, .form-search .checkbox,
.form-inline .radio, .form-inline .radio,
.form-inline .checkbox { .form-inline .checkbox {
display: inline-block;
padding-left: 0; padding-left: 0;
margin-bottom: 0; label {
vertical-align: middle; margin-bottom: 0;
vertical-align: middle;
}
} }
// Remove float and margin, set to inline-block // Remove float and margin, set to inline-block
.form-search .radio input[type="radio"], .form-search .radio input[type="radio"],

20
less/tests/forms.html
View File

@ -173,6 +173,26 @@
</div><!-- /span4 --> </div><!-- /span4 -->
</div><!-- /row --> </div><!-- /row -->
<div class="page-header">
<h1>Form components</h1>
</div>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<p class="help-block">Example block-level help text here.</p>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form> <!-- /container --> </form> <!-- /container -->
</body> </body>