Re-add and update form styles:

* Restore forms.less file
* Overhaul .radio.inline .checkbox.inline to be .radio-inline or .checkbox-inline
* Update docs to reflect changes

docs/assets/css/docs.css

@@ -197,7 +197,10 @@ section > ul li {
 .bs-docs-example > ul:last-child,
 .bs-docs-example > ol:last-child,
 .bs-docs-example > blockquote:last-child,
-.bs-docs-example > .table:last-child {
+.bs-docs-example > .table:last-child,
+.bs-docs-example > input:last-child,
+.bs-docs-example > select:last-child,
+.bs-docs-example > textarea:last-child {
   margin-bottom: 0;
 }
 

docs/css.html

@@ -1228,26 +1228,26 @@ For example, <code><section></code> should be wrapped
 </pre>
 
           <h4>Inline checkboxes</h4>
-          <p>Add the <code>.inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
+          <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
           <form class="bs-docs-example">
-            <label class="checkbox inline">
+            <label class="checkbox-inline">
               <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
             </label>
-            <label class="checkbox inline">
+            <label class="checkbox-inline">
               <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
             </label>
-            <label class="checkbox inline">
+            <label class="checkbox-inline">
               <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
             </label>
           </form>
 <pre class="prettyprint linenums">
-&lt;label class="checkbox inline"&gt;
+&lt;label class="checkbox-inline"&gt;
   &lt;input type="checkbox" id="inlineCheckbox1" value="option1"&gt; 1
 &lt;/label&gt;
-&lt;label class="checkbox inline"&gt;
+&lt;label class="checkbox-inline"&gt;
   &lt;input type="checkbox" id="inlineCheckbox2" value="option2"&gt; 2
 &lt;/label&gt;
-&lt;label class="checkbox inline"&gt;
+&lt;label class="checkbox-inline"&gt;
   &lt;input type="checkbox" id="inlineCheckbox3" value="option3"&gt; 3
 &lt;/label&gt;
 </pre>

docs/templates/pages/css.mustache

@@ -1168,26 +1168,26 @@ For example, <code><section></code> should be wrapped
 </pre>
 
           <h4>Inline checkboxes</h4>
-          <p>Add the <code>.inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
+          <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
           <form class="bs-docs-example">
-            <label class="checkbox inline">
+            <label class="checkbox-inline">
               <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
             </label>
-            <label class="checkbox inline">
+            <label class="checkbox-inline">
               <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
             </label>
-            <label class="checkbox inline">
+            <label class="checkbox-inline">
               <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
             </label>
           </form>
 <pre class="prettyprint linenums">
-&lt;label class="checkbox inline"&gt;
+&lt;label class="checkbox-inline"&gt;
   &lt;input type="checkbox" id="inlineCheckbox1" value="option1"&gt; 1
 &lt;/label&gt;
-&lt;label class="checkbox inline"&gt;
+&lt;label class="checkbox-inline"&gt;
   &lt;input type="checkbox" id="inlineCheckbox2" value="option2"&gt; 2
 &lt;/label&gt;
-&lt;label class="checkbox inline"&gt;
+&lt;label class="checkbox-inline"&gt;
   &lt;input type="checkbox" id="inlineCheckbox3" value="option3"&gt; 3
 &lt;/label&gt;
 </pre>

less/bootstrap.less

@@ -23,6 +23,7 @@
 
 
 @import "tables.less";
+@import "forms.less";
 @import "buttons.less";
 
 // Components: common

less/forms.less

@@ -7,7 +7,7 @@
 // -------------------------
 
 form {
-  margin: 0 0 @line-height-base;
+  margin: 0;
 }
 
 fieldset {
@@ -55,7 +55,7 @@ input[type="search"],
 input[type="tel"],
 input[type="color"],
 .uneditable-input {
-  display: inline-block;
+  display: block;
   .box-sizing(border-box); // Makes inputs behave like true block-level elements
   min-height: @input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   padding: 6px 9px;
@@ -67,7 +67,7 @@ input[type="color"],
   background-color: @input-background;
   border: 1px solid @input-border;
   border-radius: @input-border-radius;
-  // .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
   .transition(~"border linear .2s, box-shadow linear .2s");
 }
 
@@ -203,18 +203,26 @@ textarea {
 .checkbox {
   display: block;
   min-height: @line-height-base; // clear the floating input if there is no label text
+  margin-bottom: @line-height-base / 2;
   padding-left: 20px;
+  label {
+    display: inline;
+    margin-bottom: 0;
+    font-weight: normal;
+  }
 }
-.radio label,
-.checkbox label {
-  margin-bottom: 0;
-  font-weight: normal;
-}
+
 .radio input[type="radio"],
-.checkbox input[type="checkbox"] {
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
   float: left;
   margin-left: -20px;
 }
+.radio + .radio,
+.checkbox + .checkbox {
+  margin-top: (@line-height-base / 4) * -1;
+}
 
 // Move the options list down to align with labels
 .controls > .radio:first-child,
@@ -224,15 +232,18 @@ textarea {
 
 // Radios and checkboxes on same line
 // TODO v3: Convert .inline to .control-inline
-.radio.inline,
-.checkbox.inline {
+.radio-inline,
+.checkbox-inline {
   display: inline-block;
   padding-top: 5px;
+  padding-left: 20px;
   margin-bottom: 0;
   vertical-align: middle;
+  font-weight: normal;
 }
-.radio.inline + .radio.inline,
-.checkbox.inline + .checkbox.inline {
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+  margin-top: 0;
   margin-left: 10px; // space out consecutive inline controls
 }
 
@@ -380,7 +391,7 @@ select:focus:invalid {
   margin-bottom: @line-height-base;
   background-color: @form-actions-background;
   border-top: 1px solid #e5e5e5;
-  .clearfix(); // Adding clearfix to allow for .pull-right button containers
+  .clear_float(); // Adding clearfix to allow for .pull-right button containers
 }
 
 
@@ -520,33 +531,37 @@ select:focus:invalid {
 // Horizontal forms
 // --------------------------------------------------
 
-.form-horizontal {
 
-  // Increase spacing between groups
-  .control-group {
-    position: relative;
-    margin-bottom: @line-height-base;
-    .clearfix();
+@media screen and (min-width: 768px) {
+
+  .form-horizontal {
 
-    input,
-    select,
-    textarea,
-    .uneditable-input {
-      margin-bottom: 0;
+    // Increase spacing between groups
+    .control-group {
+      position: relative;
+      margin-bottom: @line-height-base;
+      .clear_float();
+
+      input,
+      select,
+      textarea,
+      .uneditable-input {
+        margin-bottom: 0;
+      }
     }
-  }
 
-  // Float the labels left
-  .control-group > .control-label {
-    float: left;
-    width: @component-offset-horizontal - 20;
-    padding-top: 6px;
-    text-align: right;
-  }
+    // Float the labels left
+    .control-group > .control-label {
+      float: left;
+      width: @component-offset-horizontal - 20;
+      padding-top: 6px;
+      text-align: right;
+    }
 
-  // Move over all input controls and content over
-  .control-group > .controls {
-    margin-left: @component-offset-horizontal;
-  }
+    // Move over all input controls and content over
+    .control-group > .controls {
+      margin-left: @component-offset-horizontal;
+    }
 
+  }
 }