Skip to content

B
bootstrap
Commit 293a3bac authored by Mark Otto's avatar Mark Otto
Browse files
Options

More forms overhaul 

* Refactor the .forms-horizontal code--much simpler now and built on the Bootstrap grid system instead
* Remove all the margins on form controls for simpler styling everywhere else--was overriding that way too often
* Drop .help-inline, but keep .help-block
* Drop the unused input grid class overrides
parent 7a7971d6
Hide whitespace changes
Inline Side-by-side
Showing with 58 additions and 192 deletions
docs/assets/css/bootstrap.css
View file @ 293a3bac
...@@ -1252,7 +1252,6 @@ input[type="color"] { ...@@ -1252,7 +1252,6 @@ input[type="color"] {
display: block; display: block;
min-height: 34px; min-height: 34px;
padding: 6px 9px; padding: 6px 9px;
margin-bottom: 10px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: #555555; color: #555555;
...@@ -1374,6 +1373,7 @@ textarea::-webkit-input-placeholder { ...@@ -1374,6 +1373,7 @@ textarea::-webkit-input-placeholder {
display: block; display: block;
min-height: 20px; min-height: 20px;
padding-left: 20px; padding-left: 20px;
margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
vertical-align: middle; vertical-align: middle;
} }
...@@ -1466,25 +1466,6 @@ input[type="color"].input-small { ...@@ -1466,25 +1466,6 @@ input[type="color"].input-small {
border-radius: 3px; border-radius: 3px;
} }
input[class*="span"],
select[class*="span"],
textarea[class*="span"] {
float: none;
margin-right: 0;
margin-left: 0;
}
.input-append input[class*="span"],
.input-prepend input[class*="span"] {
display: inline-block;
}
input[class*="span"],
select[class*="span"],
textarea[class*="span"] {
height: 34px;
}
input[disabled], input[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
...@@ -1601,20 +1582,11 @@ select:focus:invalid:focus { ...@@ -1601,20 +1582,11 @@ select:focus:invalid:focus {
clear: both; clear: both;
} }
.help-block,
.help-inline {
color: #737373;
}
.help-block { .help-block {
display: block; display: block;
margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;
} color: #737373;
.help-inline {
display: inline-block;
padding-left: 5px;
vertical-align: middle;
} }
.input-group { .input-group {
...@@ -1790,47 +1762,21 @@ select:focus:invalid:focus { ...@@ -1790,47 +1762,21 @@ select:focus:invalid:focus {
.form-inline .radio, .form-inline .radio,
.form-inline .checkbox { .form-inline .checkbox {
display: inline-block; display: inline-block;
}
.form-inline .radio,
.form-inline .checkbox {
margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
@media screen and (min-width: 768px) { .form-horizontal .row + .row {
.form-horizontal .control-group { margin-top: 15px;
position: relative; }
margin-bottom: 20px;
} .form-horizontal .row-label {
.form-horizontal .control-group:before, padding-top: 6px;
.form-horizontal .control-group:after { text-align: right;
display: table;
content: " ";
}
.form-horizontal .control-group:after {
clear: both;
}
.form-horizontal .control-group:before,
.form-horizontal .control-group:after {
display: table;
content: " ";
}
.form-horizontal .control-group:after {
clear: both;
}
.form-horizontal .control-group input,
.form-horizontal .control-group select,
.form-horizontal .control-group textarea {
margin-bottom: 0;
}
.form-horizontal .control-group > .control-label {
float: left;
width: 160px;
padding-top: 6px;
text-align: right;
}
.form-horizontal .control-group > .controls {
margin-left: 180px;
}
.form-horizontal .form-actions {
padding-left: 180px;
}
} }
.btn { .btn {
......
docs/css.html
View file @ 293a3bac
...@@ -1008,7 +1008,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1008,7 +1008,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
<h2 id="forms-example">Basic example</h2> <h2 id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p> <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements are set to <code>width: 100%;</code> by default.</p>
<form class="bs-example"> <form class="bs-example">
<fieldset> <fieldset>
<legend>Legend</legend> <legend>Legend</legend>
...@@ -1074,23 +1074,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1074,23 +1074,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h3 id="forms-horizontal">Horizontal form</h3> <h3 id="forms-horizontal">Horizontal form</h3>
<p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p> <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p>
<ul>
<li>Add <code>.form-horizontal</code> to the form</li>
<li>Wrap labels and controls in <code>.control-group</code></li>
<li>Add <code>.control-label</code> to the label</li>
<li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
</ul>
<form class="bs-example form-horizontal"> <form class="bs-example form-horizontal">
<div class="control-group"> <div class="row">
<label class="control-label" for="inputEmail">Email</label> <label for="inputEmail" class="col col-lg-2 row-label">Email</label>
<div class="controls"> <div class="col col-lg-10">
<input type="text" id="inputEmail" placeholder="Email"> <input type="text" id="inputEmail" placeholder="Email">
</div> </div>
</div> </div>
<div class="control-group"> <div class="row">
<label class="control-label" for="inputPassword">Password</label> <label for="" class="col col-lg-2 row-label">Password</label>
<div class="controls"> <div class="col col-lg-10">
<input type="password" id="inputPassword" placeholder="Password"> <input type="password" id="inputPassword" placeholder="Password">
<div class="checkbox"> <div class="checkbox">
<label> <label>
...@@ -1098,24 +1092,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1098,24 +1092,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</label> </label>
</div> </div>
</div> </div>
</div> <div class="col col-lg-10 col-offset-2">
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-default">Sign in</button> <button type="submit" class="btn btn-default">Sign in</button>
</div> </div>
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<form class="form-horizontal"> <form class="form-horizontal">
<div class="control-group"> <div class="row">
<label class="control-label" for="inputEmail">Email</label> <label for="inputEmail" class="col col-lg-2 row-label">Email</label>
<div class="controls"> <div class="col col-lg-10">
<input type="text" id="inputEmail" placeholder="Email"> <input type="text" id="inputEmail" placeholder="Email">
</div> </div>
</div> </div>
<div class="control-group"> <div class="row">
<label class="control-label" for="inputPassword">Password</label> <label for="" class="col col-lg-2 row-label">Password</label>
<div class="controls"> <div class="col col-lg-10">
<input type="password" id="inputPassword" placeholder="Password"> <input type="password" id="inputPassword" placeholder="Password">
<div class="checkbox"> <div class="checkbox">
<label> <label>
...@@ -1123,9 +1115,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1123,9 +1115,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</label> </label>
</div> </div>
</div> </div>
</div> <div class="col col-lg-10 col-offset-2">
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-default">Sign in</button> <button type="submit" class="btn btn-default">Sign in</button>
</div> </div>
</div> </div>
...@@ -1693,18 +1683,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1693,18 +1683,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h3 id="forms-help-text">Help text</h3> <h3 id="forms-help-text">Help text</h3>
<p>Inline and block level support for help text that appears around form controls.</p> <p>Block level help text for form controls.</p>
<h4>Inline help</h4> <form class="bs-example">
<form class="bs-example form-inline">
<input type="text"> <span class="help-inline">Inline help text</span>
</form>
{% highlight html %}
<input type="text">
<span class="help-inline">Inline help text</span>
{% endhighlight %}
<h4>Block help</h4>
<form class="bs-example form-inline">
<input type="text"> <input type="text">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</form> </form>
......
less/forms.less
View file @ 293a3bac
...@@ -57,7 +57,6 @@ input[type="color"] { ...@@ -57,7 +57,6 @@ input[type="color"] {
display: block; display: block;
min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: 6px 9px; padding: 6px 9px;
margin-bottom: 10px;
font-size: @font-size-base; font-size: @font-size-base;
line-height: @line-height-base; line-height: @line-height-base;
color: @gray; color: @gray;
...@@ -172,7 +171,8 @@ textarea { ...@@ -172,7 +171,8 @@ textarea {
.checkbox { .checkbox {
display: block; display: block;
min-height: @line-height-base; // clear the floating input if there is no label text min-height: @line-height-base; // clear the floating input if there is no label text
margin-bottom: (@line-height-base / 2); margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px; padding-left: 20px;
vertical-align: middle; vertical-align: middle;
label { label {
...@@ -182,7 +182,6 @@ textarea { ...@@ -182,7 +182,6 @@ textarea {
cursor: pointer; cursor: pointer;
} }
} }
.radio input[type="radio"], .radio input[type="radio"],
.radio-inline input[type="radio"], .radio-inline input[type="radio"],
.checkbox input[type="checkbox"], .checkbox input[type="checkbox"],
...@@ -192,7 +191,7 @@ textarea { ...@@ -192,7 +191,7 @@ textarea {
} }
.radio + .radio, .radio + .radio,
.checkbox + .checkbox { .checkbox + .checkbox {
margin-top: ((@line-height-base / 4) * -1); margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
} }
/* /*
...@@ -255,33 +254,6 @@ input[type="color"] { ...@@ -255,33 +254,6 @@ input[type="color"] {
} }
// GRID SIZING FOR INPUTS
// ----------------------
// Grid style input sizes
input[class*="span"],
select[class*="span"],
textarea[class*="span"] {
float: none;
margin-left: 0;
margin-right: 0;
}
// Ensure input-prepend/append never wraps
.input-append input[class*="span"],
.input-prepend input[class*="span"] {
display: inline-block;
}
input[class*="span"],
select[class*="span"],
textarea[class*="span"] {
height: @input-height-base;
}
// DISABLED STATE // DISABLED STATE
// -------------- // --------------
...@@ -361,20 +333,11 @@ select:focus:invalid { ...@@ -361,20 +333,11 @@ select:focus:invalid {
// HELP TEXT // HELP TEXT
// --------- // ---------
.help-block,
.help-inline {
color: lighten(@text-color, 25%); // lighten the text some for contrast
}
.help-block { .help-block {
display: block; // account for any element using help-block display: block; // account for any element using help-block
margin-bottom: (@line-height-base / 2); margin-top: 5px;
} margin-bottom: 10px;
color: lighten(@text-color, 25%); // lighten the text some for contrast
.help-inline {
display: inline-block;
vertical-align: middle;
padding-left: 5px;
} }
...@@ -436,14 +399,14 @@ select:focus:invalid { ...@@ -436,14 +399,14 @@ select:focus:invalid {
background-color: @gray-lighter; background-color: @gray-lighter;
border: 1px solid #ccc; border: 1px solid #ccc;
&.input-small { &.input-small {
padding: @padding-small; padding: @padding-small;
font-size: @font-size-small; font-size: @font-size-small;
}
&.input-large {
padding: @padding-large;
font-size: @font-size-large;
} }
&.input-large {
padding: @padding-large;
font-size: @font-size-large;
}
} }
// Reset rounded corners // Reset rounded corners
...@@ -528,6 +491,10 @@ select:focus:invalid { ...@@ -528,6 +491,10 @@ select:focus:invalid {
.radio, .radio,
.checkbox { .checkbox {
display: inline-block; display: inline-block;
}
.radio,
.checkbox {
margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
} }
...@@ -535,41 +502,14 @@ select:focus:invalid { ...@@ -535,41 +502,14 @@ select:focus:invalid {
// Horizontal forms // Horizontal forms
// -------------------------------------------------- // --------------------------------------------------
// Horizontal forms are built on grid classes.
@media screen and (min-width: @screen-tablet) { .form-horizontal {
.row + .row {
.form-horizontal { margin-top: 15px;
}
// Increase spacing between groups .row-label {
.control-group { padding-top: 6px;
position: relative; text-align: right;
margin-bottom: @line-height-base;
.clearfix();
input,
select,
textarea {
margin-bottom: 0;
}
}
// Float the labels left
.control-group > .control-label {
float: left;
width: (@component-offset-horizontal - 20);
padding-top: 6px;
text-align: right;
}
// Move over all input controls and content over
.control-group > .controls {
margin-left: @component-offset-horizontal;
}
// Make sure form actions buttons are aligned with controls
.form-actions {
padding-left: @component-offset-horizontal;
}
} }
} }
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