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:
parent
a017932285
commit
a8e88d14a4
4 changed files with 40 additions and 38 deletions
12
bootstrap.css
vendored
12
bootstrap.css
vendored
|
@ -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
10
bootstrap.min.css
vendored
|
@ -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;}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue