mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
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
This commit is contained in:
Mark Otto
parent
7a7971d6db
commit
293a3baca3
78
docs/assets/css/bootstrap.css
vendored
78
docs/assets/css/bootstrap.css
vendored
@ -1252,7 +1252,6 @@ input[type="color"] {
|
||||
display: block;
|
||||
min-height: 34px;
|
||||
padding: 6px 9px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #555555;
|
||||
@ -1374,6 +1373,7 @@ textarea::-webkit-input-placeholder {
|
||||
display: block;
|
||||
min-height: 20px;
|
||||
padding-left: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -1466,25 +1466,6 @@ input[type="color"].input-small {
|
||||
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],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
@ -1601,20 +1582,11 @@ select:focus:invalid:focus {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.help-inline {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
@ -1790,48 +1762,22 @@ select:focus:invalid:focus {
|
||||
.form-inline .radio,
|
||||
.form-inline .checkbox {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-inline .radio,
|
||||
.form-inline .checkbox {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.form-horizontal .control-group {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
.form-horizontal .row + .row {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.form-horizontal .control-group:before,
|
||||
.form-horizontal .control-group:after {
|
||||
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;
|
||||
|
||||
.form-horizontal .row-label {
|
||||
padding-top: 6px;
|
||||
text-align: right;
|
||||
}
|
||||
.form-horizontal .control-group > .controls {
|
||||
margin-left: 180px;
|
||||
}
|
||||
.form-horizontal .form-actions {
|
||||
padding-left: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
|
||||
@ -1008,7 +1008,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</div>
|
||||
|
||||
<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><input></code>, <code><textarea></code>, and <code><select></code> elements are set to <code>width: 100%;</code> by default.</p>
|
||||
<form class="bs-example">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
@ -1074,23 +1074,17 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
{% endhighlight %}
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p>
|
||||
<form class="bs-example form-horizontal">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="inputEmail">Email</label>
|
||||
<div class="controls">
|
||||
<div class="row">
|
||||
<label for="inputEmail" class="col col-lg-2 row-label">Email</label>
|
||||
<div class="col col-lg-10">
|
||||
<input type="text" id="inputEmail" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="inputPassword">Password</label>
|
||||
<div class="controls">
|
||||
<div class="row">
|
||||
<label for="" class="col col-lg-2 row-label">Password</label>
|
||||
<div class="col col-lg-10">
|
||||
<input type="password" id="inputPassword" placeholder="Password">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
@ -1098,24 +1092,22 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<div class="col col-lg-10 col-offset-2">
|
||||
<button type="submit" class="btn btn-default">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<form class="form-horizontal">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="inputEmail">Email</label>
|
||||
<div class="controls">
|
||||
<div class="row">
|
||||
<label for="inputEmail" class="col col-lg-2 row-label">Email</label>
|
||||
<div class="col col-lg-10">
|
||||
<input type="text" id="inputEmail" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="inputPassword">Password</label>
|
||||
<div class="controls">
|
||||
<div class="row">
|
||||
<label for="" class="col col-lg-2 row-label">Password</label>
|
||||
<div class="col col-lg-10">
|
||||
<input type="password" id="inputPassword" placeholder="Password">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
@ -1123,9 +1115,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<div class="col col-lg-10 col-offset-2">
|
||||
<button type="submit" class="btn btn-default">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -1693,18 +1683,8 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="forms-help-text">Help text</h3>
|
||||
<p>Inline and block level support for help text that appears around form controls.</p>
|
||||
<h4>Inline help</h4>
|
||||
<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">
|
||||
<p>Block level help text for form controls.</p>
|
||||
<form class="bs-example">
|
||||
<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>
|
||||
</form>
|
||||
|
||||
@ -57,7 +57,6 @@ input[type="color"] {
|
||||
display: block;
|
||||
min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
padding: 6px 9px;
|
||||
margin-bottom: 10px;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @gray;
|
||||
@ -172,7 +171,8 @@ textarea {
|
||||
.checkbox {
|
||||
display: block;
|
||||
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;
|
||||
vertical-align: middle;
|
||||
label {
|
||||
@ -182,7 +182,6 @@ textarea {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.radio input[type="radio"],
|
||||
.radio-inline input[type="radio"],
|
||||
.checkbox input[type="checkbox"],
|
||||
@ -192,7 +191,7 @@ textarea {
|
||||
}
|
||||
.radio + .radio,
|
||||
.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"] {
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 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
|
||||
// --------------
|
||||
|
||||
@ -361,20 +333,11 @@ select:focus:invalid {
|
||||
// HELP TEXT
|
||||
// ---------
|
||||
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: lighten(@text-color, 25%); // lighten the text some for contrast
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block; // account for any element using help-block
|
||||
margin-bottom: (@line-height-base / 2);
|
||||
}
|
||||
|
||||
.help-inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-left: 5px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
color: lighten(@text-color, 25%); // lighten the text some for contrast
|
||||
}
|
||||
|
||||
|
||||
@ -528,6 +491,10 @@ select:focus:invalid {
|
||||
.radio,
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
}
|
||||
.radio,
|
||||
.checkbox {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -535,41 +502,14 @@ select:focus:invalid {
|
||||
|
||||
// Horizontal forms
|
||||
// --------------------------------------------------
|
||||
|
||||
@media screen and (min-width: @screen-tablet) {
|
||||
// Horizontal forms are built on grid classes.
|
||||
|
||||
.form-horizontal {
|
||||
|
||||
// Increase spacing between groups
|
||||
.control-group {
|
||||
position: relative;
|
||||
margin-bottom: @line-height-base;
|
||||
.clearfix();
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: 0;
|
||||
.row + .row {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// Float the labels left
|
||||
.control-group > .control-label {
|
||||
float: left;
|
||||
width: (@component-offset-horizontal - 20);
|
||||
.row-label {
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user