Update forms

* Overhaul the form control sizing section to only show sizing via grid columns as parents, not as classes on inputs
* Restore the inline-form option
* Restore the bottom margin on form controls and make them block level instead of inline-block
* More misc docs cleanup for forms

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e8ddf5bb10f594e643b35212b648bc98e8f3c62b..6b904d6e85ace53e2ca92c01dd59222680b8616e 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1249,9 +1249,10 @@ input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"] {
-  display: inline-block;
+  display: block;
   min-height: 34px;
   padding: 6px 9px;
+  margin-bottom: 10px;
   font-size: 14px;
   line-height: 20px;
   color: #555555;
@@ -1374,6 +1375,7 @@ textarea::-webkit-input-placeholder {
   min-height: 20px;
   padding-left: 20px;
   margin-bottom: 10px;
+  vertical-align: middle;
 }
 
 .radio label,
@@ -1619,21 +1621,24 @@ select:focus:invalid:focus {
   display: table;
 }
 
-.input-group[class*="span"] {
+.input-group.col {
   float: none;
-  padding: 0;
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .input-group input,
 .input-group select {
   width: 100%;
+  margin-bottom: 0;
 }
 
 .input-group-addon,
 .input-group-btn,
 .input-group input {
   display: table-cell;
-  margin: 0;
+  /*margin: 0;*/
+
   border-radius: 0;
 }
 
@@ -1779,6 +1784,15 @@ select:focus:invalid:focus {
   border-bottom-right-radius: 3px;
 }
 
+.form-inline input,
+.form-inline select,
+.form-inline textarea,
+.form-inline .radio,
+.form-inline .checkbox {
+  display: inline-block;
+  margin-bottom: 0;
+}
+
 @media screen and (min-width: 768px) {
   .form-horizontal .control-group {
     position: relative;

diff --git a/docs/docs.html b/docs/docs.html
index 88ab16d7ce2a09bc7ef5a78b64b2f0f069736285..f3370dfbdf18a0848c7e2a8ad0c6f161f25bd38e 100644 (file)
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -1327,10 +1327,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Included with Bootstrap are optional form layouts for common use cases.</p>
 
     <h3 id="forms-inline">Inline form</h3>
-    <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
+    <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
+    <div class="bs-docs-sidenote">
+      <h4>Requires custom widths</h4>
+      <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
+    </div>
     <form class="bs-docs-example form-inline">
-      <input type="text" class="col col-lg-3" placeholder="Email">
-      <input type="password" class="col col-lg-3" placeholder="Password">
+      <input type="text" placeholder="Email" style="width: 180px;">
+      <input type="password" placeholder="Password" style="width: 180px;">
       <div class="checkbox">
         <label>
           <input type="checkbox"> Remember me
@@ -1340,8 +1344,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </form><!-- /example -->
 {% highlight html %}
 <form class="form-inline">
-  <input type="text" class="col col-lg-3" placeholder="Email">
-  <input type="password" class="col col-lg-3" placeholder="Password">
+  <input type="text" placeholder="Email" style="width: 180px;">
+  <input type="password" placeholder="Password" style="width: 180px;">
   <div class="checkbox">
     <label>
       <input type="checkbox"> Remember me
@@ -1927,74 +1931,30 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h4>Column sizing</h4>
-    <p>Use <code>.col col-lg-1</code> to <code>.col col-lg-12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
-    <form class="bs-docs-example" style="padding-bottom: 15px;">
-      <div class="controls docs-input-sizes">
-        <input class="col col-lg-1" type="text" placeholder=".col col-lg-1">
-        <input class="col col-lg-2" type="text" placeholder=".col col-lg-2">
-        <input class="col col-lg-3" type="text" placeholder=".col col-lg-3">
-        <select class="col col-lg-1">
-          <option>1</option>
-          <option>2</option>
-          <option>3</option>
-          <option>4</option>
-          <option>5</option>
-        </select>
-        <select class="col col-lg-2">
-          <option>1</option>
-          <option>2</option>
-          <option>3</option>
-          <option>4</option>
-          <option>5</option>
-        </select>
-        <select class="col col-lg-3">
-          <option>1</option>
-          <option>2</option>
-          <option>3</option>
-          <option>4</option>
-          <option>5</option>
-        </select>
-      </div>
-    </form>
-{% highlight html %}
-<input class="col col-lg-1" type="text" placeholder=".col col-lg-1">
-<input class="col col-lg-2" type="text" placeholder=".col col-lg-2">
-<input class="col col-lg-3" type="text" placeholder=".col col-lg-3">
-<select class="col col-lg-1">
-  ...
-</select>
-<select class="col col-lg-2">
-  ...
-</select>
-<select class="col col-lg-3">
-  ...
-</select>
-{% endhighlight %}
-
-    <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.col-span-*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
+    <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
     <form class="bs-docs-example" style="padding-bottom: 15px;">
       <div class="row">
-        <div class="col col-lg-4">
-          <input type="text" placeholder=".col col-lg-4">
+        <div class="col col-lg-2">
+          <input type="text" placeholder="col col-large-2">
         </div>
-        <div class="col col-lg-4">
-          <input type="text" placeholder=".col col-lg-4">
+        <div class="col col-lg-3">
+          <input type="text" placeholder="col col-large-3">
         </div>
         <div class="col col-lg-4">
-          <input type="text" placeholder=".col col-lg-4">
+          <input type="text" placeholder="col col-large-4">
         </div>
       </div>
     </form>
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-4">
-    <input type="text" placeholder=".col col-lg-4">
+  <div class="col col-lg-2">
+    <input type="text" placeholder="col col-large-2">
   </div>
-  <div class="col col-lg-4">
-    <input type="text" placeholder=".col col-lg-4">
+  <div class="col col-lg-3">
+    <input type="text" placeholder="col col-large-3">
   </div>
   <div class="col col-lg-4">
-    <input type="text" placeholder=".col col-lg-4">
+    <input type="text" placeholder="col col-large-4">
   </div>
 </div>
 {% endhighlight %}
@@ -5833,7 +5793,6 @@ $('#example').tooltip(options)
 
           <div class="clearfix"></div>
         </div>
-        <p>No markup shown as popovers are generated from JavaScript and content within a <code>data</code> attribute.</p>
 
         <h3>Live demo</h3>
         <div class="bs-docs-example" style="padding-bottom: 24px;">

diff --git a/less/forms.less b/less/forms.less
index 2a1a4e90cf5f78f45461e4134828c7a32da4d186..6162cd4f1357df21b7cb3b4b045840647a14e0d0 100644 (file)
--- a/less/forms.less
+++ b/less/forms.less
@@ -54,10 +54,10 @@ input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"] {
-  display: inline-block;
+  display: block;
   min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   padding: 6px 9px;
-  // margin-bottom: (@line-height-base / 2);
+  margin-bottom: 10px;
   font-size: @font-size-base;
   line-height: @line-height-base;
   color: @gray;
@@ -174,6 +174,7 @@ textarea {
   min-height: @line-height-base; // clear the floating input if there is no label text
   margin-bottom: (@line-height-base / 2);
   padding-left: 20px;
+  vertical-align: middle;
   label {
     display: inline;
     margin-bottom: 0;
@@ -387,14 +388,16 @@ select:focus:invalid {
   display: table;
 
   // Undo padding and float of grid classes
-  &[class*="span"] {
+  &.col {
     float: none;
-    padding: 0;
+    padding-left: 0;
+    padding-right: 0;
   }
 
   input,
   select {
     width: 100%;
+    margin-bottom: 0;
   }
 }
 
@@ -404,7 +407,7 @@ select:focus:invalid {
 .input-group-btn,
 .input-group input {
   display: table-cell;
-  margin: 0;
+  /*margin: 0;*/
   border-radius: 0;
   &.input-small {
     border-radius: 0;
@@ -515,6 +518,21 @@ select:focus:invalid {
 
 
 
+// Inline forms
+// --------------------------------------------------
+
+.form-inline {
+  input,
+  select,
+  textarea,
+  .radio,
+  .checkbox {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+}
+
+
 // Horizontal forms
 // --------------------------------------------------