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

bootstrap.css

@@ -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;
 }
 /*

bootstrap.min.css

@@ -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;}

docs/base-css.html

@@ -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>

lib/forms.less

@@ -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 {
-  float: left;
-  width: 130px;
-  padding-top: 5px;
-  text-align: right;
-}
-// Move over all input controls and content
-.form-horizontal .controls {
-  margin-left: 150px;
-}
-// Move the options list down to align with labels
-.form-horizontal .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 {
-  padding-left: 150px;
+.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
+  .controls {
+    margin-left: 150px;
+  }
+  // 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-actions {
+    padding-left: 150px;
+  }
 }