rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Update forms

Browse Source 
* 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="tel"],
input[type="color"] {
display: inline-block;
display: block;
min-height: 34px;
padding: 6px 9px;
margin-bottom: 10px;
font-size: 14px;
line-height: 20px;
color: #555555;
@ -1374,6 +1375,7 @@ textarea::-webkit-input-placeholder {
min-height: 20px;
padding-left: 20px;
margin-bottom: 10px;
vertical-align: middle;
}
.radio label,
@ -1619,21 +1621,24 @@ select:focus:invalid:focus {
display: table;
}
.input-group[class*="span"] {
.input-group.col {
float: none;
padding: 0;
padding-right: 0;
padding-left: 0;
}
.input-group input,
.input-group select {
width: 100%;
margin-bottom: 0;
}
.input-group-addon,
.input-group-btn,
.input-group input {
display: table-cell;
margin: 0;
/*margin: 0;*/
border-radius: 0;
}
@ -1779,6 +1784,15 @@ select:focus:invalid:focus {
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) {
.form-horizontal .control-group {
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>
<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">
<input type="text" class="col col-lg-3" placeholder="Email">
<input type="password" class="col col-lg-3" placeholder="Password">
<input type="text" placeholder="Email" style="width: 180px;">
<input type="password" placeholder="Password" style="width: 180px;">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
@ -1340,8 +1344,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form><!-- /example -->
{% highlight html %}
<form class="form-inline">
<input type="text" class="col col-lg-3" placeholder="Email">
<input type="password" class="col col-lg-3" placeholder="Password">
<input type="text" placeholder="Email" style="width: 180px;">
<input type="password" placeholder="Password" style="width: 180px;">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
@ -1927,74 +1931,30 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<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>
<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>
<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="row">
<div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
<div class="col col-lg-2">
<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 class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
</div>
<div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
<input type="text" placeholder="col col-large-4">
</div>
</div>
</form>
{% highlight html %}
<div class="row">
<div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
<div class="col col-lg-2">
<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 class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
</div>
<div class="col col-lg-4">
<input type="text" placeholder=".col col-lg-4">
<input type="text" placeholder="col col-large-4">
</div>
</div>
{% endhighlight %}
@ -5833,7 +5793,6 @@ $('#example').tooltip(options)
<div class="clearfix"></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>
<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="tel"],
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)
padding: 6px 9px;
// margin-bottom: (@line-height-base / 2);
margin-bottom: 10px;
font-size: @font-size-base;
line-height: @line-height-base;
color: @gray;
@ -174,6 +174,7 @@ textarea {
min-height: @line-height-base; // clear the floating input if there is no label text
margin-bottom: (@line-height-base / 2);
padding-left: 20px;
vertical-align: middle;
label {
display: inline;
margin-bottom: 0;
@ -387,14 +388,16 @@ select:focus:invalid {
display: table;
// Undo padding and float of grid classes
&[class*="span"] {
&.col {
float: none;
padding: 0;
padding-left: 0;
padding-right: 0;
}
input,
select {
width: 100%;
margin-bottom: 0;
}
}
@ -404,7 +407,7 @@ select:focus:invalid {
.input-group-btn,
.input-group input {
display: table-cell;
margin: 0;
/*margin: 0;*/
border-radius: 0;
&.input-small {
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
// --------------------------------------------------