kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Update forms 

* Overhaul the form control sizing section to only show sizing via grid columns as parents, not as classes on inputs
* Restore the inline-form option
* Restore the bottom margin on form controls and make them block level instead of inline-block
* More misc docs cleanup for forms
This commit is contained in:
Mark Otto 2013-05-07 21:56:55 -07:00
parent c0e23ad27b
commit c459c657f8
3 changed files with 63 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1249,9 +1249,10 @@ input[type="url"],
input[type="search"], input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"] { input[type="color"] {
display: inline-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 +1375,7 @@ textarea::-webkit-input-placeholder {
min-height: 20px; min-height: 20px;
padding-left: 20px; padding-left: 20px;
margin-bottom: 10px; margin-bottom: 10px;
vertical-align: middle;
} }
.radio label, .radio label,
@ -1619,21 +1621,24 @@ select:focus:invalid:focus {
display: table; display: table;
} }
.input-group[class*="span"] { .input-group.col {
float: none; float: none;
padding: 0; padding-right: 0;
padding-left: 0;
} }
.input-group input, .input-group input,
.input-group select { .input-group select {
width: 100%; width: 100%;
margin-bottom: 0;
} }
.input-group-addon, .input-group-addon,
.input-group-btn, .input-group-btn,
.input-group input { .input-group input {
display: table-cell; display: table-cell;
margin: 0; /*margin: 0;*/
border-radius: 0; border-radius: 0;
} }
@ -1779,6 +1784,15 @@ select:focus:invalid:focus {
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
} }
.form-inline input,
.form-inline select,
.form-inline textarea,
.form-inline .radio,
.form-inline .checkbox {
display: inline-block;
margin-bottom: 0;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.form-horizontal .control-group { .form-horizontal .control-group {
position: relative; position: relative;

85
docs/docs.html
View File

@ -1327,10 +1327,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Included with Bootstrap are optional form layouts for common use cases.</p> <p>Included with Bootstrap are optional form layouts for common use cases.</p>
<h3 id="forms-inline">Inline form</h3> <h3 id="forms-inline">Inline form</h3>
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p> <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
<div class="bs-docs-sidenote">
<h4>Requires custom widths</h4>
<p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
</div>
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input type="text" class="col col-lg-3" placeholder="Email"> <input type="text" placeholder="Email" style="width: 180px;">
<input type="password" class="col col-lg-3" placeholder="Password"> <input type="password" placeholder="Password" style="width: 180px;">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
@ -1340,8 +1344,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form><!-- /example --> </form><!-- /example -->
{% highlight html %} {% highlight html %}
<form class="form-inline"> <form class="form-inline">
<input type="text" class="col col-lg-3" placeholder="Email"> <input type="text" placeholder="Email" style="width: 180px;">
<input type="password" class="col col-lg-3" placeholder="Password"> <input type="password" placeholder="Password" style="width: 180px;">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
@ -1927,74 +1931,30 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h4>Column sizing</h4> <h4>Column sizing</h4>
<p>Use <code>.col col-lg-1</code> to <code>.col col-lg-12</code> for setting widths on inputs that match Bootstrap's grid system.</p> <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes">
<input class="col col-lg-1" type="text" placeholder=".col col-lg-1">
<input class="col col-lg-2" type="text" placeholder=".col col-lg-2">
<input class="col col-lg-3" type="text" placeholder=".col col-lg-3">
<select class="col col-lg-1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="col col-lg-2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="col col-lg-3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
{% highlight html %}
<input class="col col-lg-1" type="text" placeholder=".col col-lg-1">
<input class="col col-lg-2" type="text" placeholder=".col col-lg-2">
<input class="col col-lg-3" type="text" placeholder=".col col-lg-3">
<select class="col col-lg-1">
...
</select>
<select class="col col-lg-2">
...
</select>
<select class="col col-lg-3">
...
</select>
{% endhighlight %}
<p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.col-span-*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;"> <form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col col-lg-2">
<input type="text" placeholder=".col col-lg-4"> <input type="text" placeholder="col col-large-2">
</div>
<div class="col col-lg-3">
<input type="text" placeholder="col col-large-3">
</div> </div>
<div class="col col-lg-4"> <div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4"> <input type="text" placeholder="col col-large-4">
</div>
<div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
</div> </div>
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col col-lg-2">
<input type="text" placeholder=".col col-lg-4"> <input type="text" placeholder="col col-large-2">
</div>
<div class="col col-lg-3">
<input type="text" placeholder="col col-large-3">
</div> </div>
<div class="col col-lg-4"> <div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4"> <input type="text" placeholder="col col-large-4">
</div>
<div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
</div> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -5833,7 +5793,6 @@ $('#example').tooltip(options)
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<p>No markup shown as popovers are generated from JavaScript and content within a <code>data</code> attribute.</p>
<h3>Live demo</h3> <h3>Live demo</h3>
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="bs-docs-example" style="padding-bottom: 24px;">

28
less/forms.less
View File

@ -54,10 +54,10 @@ input[type="url"],
input[type="search"], input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"] { input[type="color"] {
display: inline-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: (@line-height-base / 2); 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;
@ -174,6 +174,7 @@ textarea {
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-bottom: (@line-height-base / 2);
padding-left: 20px; padding-left: 20px;
vertical-align: middle;
label { label {
display: inline; display: inline;
margin-bottom: 0; margin-bottom: 0;
@ -387,14 +388,16 @@ select:focus:invalid {
display: table; display: table;
// Undo padding and float of grid classes // Undo padding and float of grid classes
&[class*="span"] { &.col {
float: none; float: none;
padding: 0; padding-left: 0;
padding-right: 0;
} }
input, input,
select { select {
width: 100%; width: 100%;
margin-bottom: 0;
} }
} }
@ -404,7 +407,7 @@ select:focus:invalid {
.input-group-btn, .input-group-btn,
.input-group input { .input-group input {
display: table-cell; display: table-cell;
margin: 0; /*margin: 0;*/
border-radius: 0; border-radius: 0;
&.input-small { &.input-small {
border-radius: 0; border-radius: 0;
@ -515,6 +518,21 @@ select:focus:invalid {
// Inline forms
// --------------------------------------------------
.form-inline {
input,
select,
textarea,
.radio,
.checkbox {
display: inline-block;
margin-bottom: 0;
}
}
// Horizontal forms // Horizontal forms
// -------------------------------------------------- // --------------------------------------------------