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

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
bootstrap.css vendored
View file

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * 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 /* 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). * 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-right: 0;
margin-left: -1px; margin-left: -1px;
} }
.form-search .search-query { .search-form .search-query {
-webkit-border-radius: 14px; -webkit-border-radius: 14px;
-moz-border-radius: 14px; -moz-border-radius: 14px;
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 { .control-group > label {
font-weight: bold; font-weight: bold;
} }
.form-horizontal .control-group > label { .horizontal-form .control-group > label {
float: left; float: left;
width: 130px; width: 130px;
padding-top: 5px; padding-top: 5px;
text-align: right; text-align: right;
} }
.form-horizontal .controls { .horizontal-form .controls {
margin-left: 150px; margin-left: 150px;
} }
.form-horizontal .control-list { .horizontal-form .control-list {
padding-top: 6px; padding-top: 6px;
} }
.form-horizontal .form-actions { .horizontal-form .form-actions {
padding-left: 150px; 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-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 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;} .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{margin-bottom:18px;}
.control-group>label{font-weight:bold;} .control-group>label{font-weight:bold;}
.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} .horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
.form-horizontal .controls{margin-left:150px;} .horizontal-form .controls{margin-left:150px;}
.form-horizontal .control-list{padding-top:6px;} .horizontal-form .control-list{padding-top:6px;}
.form-horizontal .form-actions{padding-left:150px;} .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{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 th{padding-top:9px;font-weight:bold;vertical-align:middle;}
table td{vertical-align:top;border-top:1px solid #ddd;} table td{vertical-align:top;border-top:1px solid #ddd;}

16
docs/base-css.html
View file

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

40
lib/forms.less
View file

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