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

make form classes match table classes (readable left to right), update docs associated with it

This commit is contained in:
Mark Otto 2011-11-17 00:06:16 -08:00
parent a017932285
commit a8e88d14a4
4 changed files with 40 additions and 38 deletions

12
bootstrap.css vendored
View file

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Wed Nov 16 23:58:14 PST 2011
* Date: Thu Nov 17 00:05:35 PST 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@ -921,7 +921,7 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app
margin-right: 0;
margin-left: -1px;
}
.form-search .search-query {
.search-form .search-query {
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
@ -932,19 +932,19 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app
.control-group > label {
font-weight: bold;
}
.form-horizontal .control-group > label {
.horizontal-form .control-group > label {
float: left;
width: 130px;
padding-top: 5px;
text-align: right;
}
.form-horizontal .controls {
.horizontal-form .controls {
margin-left: 150px;
}
.form-horizontal .control-list {
.horizontal-form .control-list {
padding-top: 6px;
}
.form-horizontal .form-actions {
.horizontal-form .form-actions {
padding-left: 150px;
}
/*

10
bootstrap.min.css vendored
View file

@ -153,13 +153,13 @@ form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-appe
.input-prepend .add-on{*margin-top:1px;}
.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;}
.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;}
.search-form .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;}
.control-group{margin-bottom:18px;}
.control-group>label{font-weight:bold;}
.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
.form-horizontal .controls{margin-left:150px;}
.form-horizontal .control-list{padding-top:6px;}
.form-horizontal .form-actions{padding-left:150px;}
.horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
.horizontal-form .controls{margin-left:150px;}
.horizontal-form .control-list{padding-top:6px;}
.horizontal-form .form-actions{padding-left:150px;}
table{width:100%;padding:0;margin-bottom:18px;font-size:13px;border-collapse:collapse;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
table th{padding-top:9px;font-weight:bold;vertical-align:middle;}
table td{vertical-align:top;border-top:1px solid #ddd;}

View file

@ -696,22 +696,22 @@
<tbody>
<tr>
<th>Vertical (default)</th>
<td><code>.form-vertical</code> <span class="muted">(not required)</span></td>
<td><code>.vertical-form</code> <span class="muted">(not required)</span></td>
<td>Stacked, left-aligned labels over controls</td>
</tr>
<tr>
<th>Horiztonal</th>
<td><code>.form-horizontal</code></td>
<td><code>.horizontal-form</code></td>
<td>Float left, right-aligned labels on same line as controls</td>
</tr>
<tr>
<th>Inline</th>
<td><code>.form-inline</code></td>
<td><code>.inline-form</code></td>
<td>Left-aligned label and inline-block controls for compact style</td>
</tr>
<tr>
<th>Search</th>
<td><code>.form-search</code></td>
<td><code>.search-form</code></td>
<td>Extra-rounded text input for a typical search aesthetic</td>
</tr>
</tbody>
@ -734,7 +734,7 @@
</div>
<div class="span9">
<div class="well">
<form class="form-search">
<form class="search-form">
<input type="text" class="search-query">
<button type="submit" class="btn">Search</button>
</form>
@ -747,7 +747,7 @@
</div>
<div class="span9">
<div class="well">
<form class="form-inline">
<form class="inline-form">
<h4>Some directional text</h4>
<p>And maybe some kind of optional supporting text right here.</p>
<input type="text" class="input-medium">
@ -763,7 +763,7 @@
<h2>Horizontal form</h2>
</div>
<div class="span9">
<form class="form-horizontal">
<form class="horizontal-form">
<legend>Example form</legend>
<fieldset class="control-group">
<label class="control-label" for="input01">Text input</label>
@ -867,7 +867,7 @@
<h2>Vertical form</h2>
</div>
<div class="span9">
<form class="form-vertical">
<form class="vertical-form">
<legend>Example form</legend>
<fieldset class="control-group">
<label class="control-label" for="input01">Label</label>

View file

@ -364,7 +364,7 @@ form .clearfix.success {
// SEARCH FORM
// -----------
.form-search .search-query {
.search-form .search-query {
.border-radius(14px);
}
@ -388,22 +388,24 @@ form .clearfix.success {
// Horizontal-specific styles
// --------------------------
// Float the labels left
.form-horizontal .control-group > label {
.horizontal-form {
// Float the labels left
.control-group > label {
float: left;
width: 130px;
padding-top: 5px;
text-align: right;
}
// Move over all input controls and content
.form-horizontal .controls {
}
// Move over all input controls and content
.controls {
margin-left: 150px;
}
// Move the options list down to align with labels
.form-horizontal .control-list {
}
// Move the options list down to align with labels
.control-list {
padding-top: 6px; // has to be padding because margin collaspes
}
// Move over buttons in .form-actions to align with .controls
.form-horizontal .form-actions {
}
// Move over buttons in .form-actions to align with .controls
.form-actions {
padding-left: 150px;
}
}