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/bootstrap.css

@@ -904,6 +904,585 @@ table th[class*="span"] {
   background-color: #c4e3f3;
 }
 
+form {
+  margin: 0;
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 20px;
+  font-size: 21px;
+  line-height: 40px;
+  color: #333333;
+  border: 0;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+  display: block;
+  min-height: 34px;
+  padding: 6px 9px;
+  margin-bottom: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #555555;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+          transition: border linear 0.2s, box-shadow linear 0.2s;
+}
+
+input,
+select,
+textarea,
+.uneditable-input {
+  width: 100%;
+}
+
+input[type="file"],
+input[type="image"],
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
+  width: auto;
+}
+
+textarea {
+  height: auto;
+}
+
+textarea:focus,
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="date"]:focus,
+input[type="month"]:focus,
+input[type="time"]:focus,
+input[type="week"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="color"]:focus,
+.uneditable-input:focus {
+  border-color: rgba(82, 168, 236, 0.8);
+  outline: 0;
+  outline: thin dotted \9;
+  /* IE6-9 */
+
+  -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
+          box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 4px 0 0;
+  margin-top: 1px \9;
+  /* IE8-9 */
+
+  line-height: normal;
+}
+
+select,
+input[type="file"] {
+  height: 34px;
+  /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
+
+  line-height: 34px;
+}
+
+select {
+  border: 1px solid #cccccc;
+}
+
+select[multiple],
+select[size] {
+  height: auto;
+}
+
+select:focus,
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+.uneditable-input,
+.uneditable-textarea {
+  color: #999999;
+  cursor: not-allowed;
+  background-color: #fcfcfc;
+  border-color: #cccccc;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+}
+
+.uneditable-input {
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.uneditable-textarea {
+  width: auto;
+  height: auto;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #999999;
+}
+
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  color: #999999;
+}
+
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  color: #999999;
+}
+
+.radio,
+.checkbox {
+  display: block;
+  min-height: 20px;
+  padding-left: 20px;
+  margin-bottom: 10px;
+}
+
+.radio label,
+.checkbox label {
+  display: inline;
+  margin-bottom: 0;
+  font-weight: normal;
+}
+
+.radio input[type="radio"],
+.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: -5px;
+}
+
+.controls > .radio:first-child,
+.controls > .checkbox:first-child {
+  padding-top: 5px;
+}
+
+.radio-inline,
+.checkbox-inline {
+  display: inline-block;
+  padding-top: 5px;
+  padding-left: 20px;
+  margin-bottom: 0;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+  margin-top: 0;
+  margin-left: 10px;
+}
+
+select.input-large,
+textarea.input-large,
+input[type="text"].input-large,
+input[type="password"].input-large,
+input[type="datetime"].input-large,
+input[type="datetime-local"].input-large,
+input[type="date"].input-large,
+input[type="month"].input-large,
+input[type="time"].input-large,
+input[type="week"].input-large,
+input[type="number"].input-large,
+input[type="email"].input-large,
+input[type="url"].input-large,
+input[type="search"].input-large,
+input[type="tel"].input-large,
+input[type="color"].input-large,
+.uneditable-input.input-large {
+  padding: 11px 19px;
+  padding-right: 14px;
+  padding-left: 14px;
+  font-size: 17.5px;
+  border-radius: 6px;
+}
+
+select.input-small,
+textarea.input-small,
+input[type="text"].input-small,
+input[type="password"].input-small,
+input[type="datetime"].input-small,
+input[type="datetime-local"].input-small,
+input[type="date"].input-small,
+input[type="month"].input-small,
+input[type="time"].input-small,
+input[type="week"].input-small,
+input[type="number"].input-small,
+input[type="email"].input-small,
+input[type="url"].input-small,
+input[type="search"].input-small,
+input[type="tel"].input-small,
+input[type="color"].input-small,
+.uneditable-input.input-small {
+  padding: 2px 10px;
+  font-size: 11.9px;
+  border-radius: 3px;
+}
+
+select.input-mini,
+textarea.input-mini,
+input[type="text"].input-mini,
+input[type="password"].input-mini,
+input[type="datetime"].input-mini,
+input[type="datetime-local"].input-mini,
+input[type="date"].input-mini,
+input[type="month"].input-mini,
+input[type="time"].input-mini,
+input[type="week"].input-mini,
+input[type="number"].input-mini,
+input[type="email"].input-mini,
+input[type="url"].input-mini,
+input[type="search"].input-mini,
+input[type="tel"].input-mini,
+input[type="color"].input-mini,
+.uneditable-input.input-mini {
+  padding: 0 6px;
+  font-size: 10.5px;
+  border-radius: 3px;
+}
+
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.uneditable-input[class*="span"] {
+  float: none;
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.input-append input[class*="span"],
+.input-append .uneditable-input[class*="span"],
+.input-prepend input[class*="span"],
+.input-prepend .uneditable-input[class*="span"] {
+  display: inline-block;
+}
+
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.uneditable-input[class*="span"] {
+  height: 34px;
+}
+
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly],
+fieldset[disabled] input,
+fieldset[disabled] select,
+fieldset[disabled] textarea {
+  cursor: not-allowed;
+  background-color: #eeeeee;
+}
+
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly],
+fieldset[disabled] input[type="radio"],
+fieldset[disabled] input[type="checkbox"] {
+  background-color: transparent;
+}
+
+.has-warning .control-label {
+  color: #c09853;
+}
+
+.has-warning .input-with-feedback {
+  padding-right: 32px;
+  border-color: #c09853;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.has-warning .input-with-feedback:focus {
+  border-color: #a47e3c;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
+}
+
+.has-error .control-label {
+  color: #b94a48;
+}
+
+.has-error .input-with-feedback {
+  padding-right: 32px;
+  border-color: #b94a48;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.has-error .input-with-feedback:focus {
+  border-color: #953b39;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
+}
+
+.has-success .control-label {
+  color: #468847;
+}
+
+.has-success .input-with-feedback {
+  padding-right: 32px;
+  border-color: #468847;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.has-success .input-with-feedback:focus {
+  border-color: #356635;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
+}
+
+input:focus:invalid,
+textarea:focus:invalid,
+select:focus:invalid {
+  color: #b94a48;
+  border-color: #ee5f5b;
+}
+
+input:focus:invalid:focus,
+textarea:focus:invalid:focus,
+select:focus:invalid:focus {
+  border-color: #e9322d;
+  -webkit-box-shadow: 0 0 6px #f8b9b7;
+          box-shadow: 0 0 6px #f8b9b7;
+}
+
+.form-actions {
+  padding: 19px 20px 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border-top: 1px solid #e5e5e5;
+}
+
+.form-actions:before,
+.form-actions:after {
+  display: table;
+  content: " ";
+}
+
+.form-actions:after {
+  clear: both;
+}
+
+.help-block,
+.help-inline {
+  color: #737373;
+}
+
+.help-block {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.help-inline {
+  display: inline-block;
+  padding-left: 5px;
+  vertical-align: middle;
+}
+
+.input-group {
+  display: table;
+}
+
+.input-group[class*="span"] {
+  float: none;
+  padding: 0;
+}
+
+.input-group input,
+.input-group select,
+.input-group .uneditable-input {
+  width: 100%;
+}
+
+.input-group-addon,
+.input-group-btn,
+.input-group input,
+.input-group .uneditable-input {
+  display: table-cell;
+  margin: 0;
+  border-radius: 0;
+}
+
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  vertical-align: middle;
+}
+
+.input-group-addon {
+  padding: 6px 8px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  text-align: center;
+  text-shadow: 0 1px 0 #fff;
+  background-color: #eeeeee;
+  border: 1px solid #ccc;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.input-group input:first-child,
+.input-group .uneditable-input:first-child,
+.input-group-addon:first-child {
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+}
+
+.input-group-addon:first-child {
+  border-right: 0;
+}
+
+.input-group input:last-child,
+.input-group .uneditable-input:last-child,
+.input-group-addon:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.input-group-addon:last-child {
+  border-left: 0;
+}
+
+.input-group-btn,
+.input-group-btn .btn {
+  white-space: nowrap;
+}
+
+.input-group-btn > .btn {
+  float: left;
+  border-radius: 0;
+}
+
+.input-group-btn > .btn + .btn {
+  border-left: 0;
+}
+
+.input-group-btn.btn-group {
+  display: table-cell;
+}
+
+.input-group-btn:first-child > .btn,
+.input-group-btn.btn-group:first-child > .btn {
+  border-right: 0;
+}
+
+.input-group-btn:first-child > .btn,
+.input-group-btn.btn-group:first-child > .btn {
+  border-radius: 4px 0 0 4px;
+}
+
+.input-group-btn:last-child > .btn,
+.input-group-btn.btn-group:last-child > .btn:first-child {
+  border-left: 0;
+}
+
+.input-group-btn:last-child > .btn,
+.input-group-btn.btn-group:last-child > .btn {
+  border-radius: 0 4px 4px 0;
+}
+
+@media screen and (min-width: 768px) {
+  .form-horizontal .control-group {
+    position: relative;
+    margin-bottom: 20px;
+  }
+  .form-horizontal .control-group:before,
+  .form-horizontal .control-group:after {
+    display: table;
+    content: " ";
+  }
+  .form-horizontal .control-group:after {
+    clear: both;
+  }
+  .form-horizontal .control-group input,
+  .form-horizontal .control-group select,
+  .form-horizontal .control-group textarea,
+  .form-horizontal .control-group .uneditable-input {
+    margin-bottom: 0;
+  }
+  .form-horizontal .control-group > .control-label {
+    float: left;
+    width: 160px;
+    padding-top: 6px;
+    text-align: right;
+  }
+  .form-horizontal .control-group > .controls {
+    margin-left: 180px;
+  }
+}
+
 .btn {
   display: inline-block;
   padding: 6px 12px;

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