kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Form validation and horizontal row update

Browse source 
* changed .row-label to .control-label as used elsewhere already
* changed .formFieldState mixin to .form-field-validation
This commit is contained in:
Mark Otto 2013-05-16 20:17:42 -07:00
parent 55a1416789
commit 1983ca03ec
4 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/assets/css/bootstrap.css vendored
View file

@ -1666,12 +1666,12 @@ select:focus:invalid:focus {
margin-top: 15px; margin-top: 15px;
} }
.form-horizontal .row-label { .form-horizontal .control-label {
padding-top: 6px; padding-top: 6px;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.form-horizontal .row-label { .form-horizontal .control-label {
text-align: right; text-align: right;
} }
} }

8
docs/css.html
View file

@ -1077,13 +1077,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p> <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"> <form class="bs-example form-horizontal">
<div class="row"> <div class="row">
<label for="inputEmail" class="col col-lg-2 row-label">Email</label> <label for="inputEmail" class="col col-lg-2 control-label">Email</label>
<div class="col col-lg-10"> <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="row"> <div class="row">
<label for="" class="col col-lg-2 row-label">Password</label> <label for="" class="col col-lg-2 control-label">Password</label>
<div class="col col-lg-10"> <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">
@ -1100,13 +1100,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% highlight html %} {% highlight html %}
<form class="form-horizontal"> <form class="form-horizontal">
<div class="row"> <div class="row">
<label for="inputEmail" class="col col-lg-2 row-label">Email</label> <label for="inputEmail" class="col col-lg-2 control-label">Email</label>
<div class="col col-lg-10"> <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="row"> <div class="row">
<label for="" class="col col-lg-2 row-label">Password</label> <label for="" class="col col-lg-2 control-label">Password</label>
<div class="col col-lg-10"> <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">

10
less/forms.less
View file

@ -268,15 +268,15 @@ input[type="checkbox"] {
// Warning // Warning
.has-warning { .has-warning {
.formFieldState(@state-warning-text, @state-warning-text, @state-warning-bg); .form-field-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
} }
// Error // Error
.has-error { .has-error {
.formFieldState(@state-danger-text, @state-danger-text, @state-danger-bg); .form-field-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
} }
// Success // Success
.has-success { .has-success {
.formFieldState(@state-success-text, @state-success-text, @state-success-bg); .form-field-validation(@state-success-text, @state-success-text, @state-success-bg);
} }
// HTML5 invalid states // HTML5 invalid states
@ -443,14 +443,14 @@ select:focus:invalid {
.row + .row { .row + .row {
margin-top: 15px; margin-top: 15px;
} }
.row-label { .control-label {
padding-top: 6px; padding-top: 6px;
} }
} }
// Only right aline form labels here when the columns stop stacking // Only right aline form labels here when the columns stop stacking
@media (min-width: 768px) { @media (min-width: 768px) {
.form-horizontal .row-label { .form-horizontal .control-label {
text-align: right; text-align: right;
} }
} }

2
less/mixins.less
View file

@ -531,7 +531,7 @@
} }
// Generate form validation states // Generate form validation states
.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) { .form-field-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
// Color the label text // Color the label text
.control-label { .control-label {
color: @text-color; color: @text-color;