Merge branch 'master' of https://github.com/twbs/bootstrap

Author: mdo

docs/_includes/components/input-groups.html

@@ -1,7 +1,7 @@
 <div class="bs-docs-section">
   <h1 id="input-groups" class="page-header">Input groups</h1>
 
-  <p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code>&lt;input&gt;</code>. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a single <code>.form-control</code>.</p>
+  <p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code>&lt;input&gt;</code>. Use <code>.input-group</code> with an <code>.input-group-addon</code> or <code>.input-group-btn</code> to prepend or append elements to a single <code>.form-control</code>.</p>
 
   <div class="bs-callout bs-callout-danger" id="callout-inputgroup-text-input-only">
     <h4>Textual <code>&lt;input&gt;</code>s only</h4>
@@ -24,7 +24,7 @@ <h4>Always add labels</h4>
 
   <h2 id="input-groups-basic">Basic example</h2>
   <p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
-  <p><strong class="text-danger">We do not support multiple add-ons on a single side.</strong></p>
+  <p><strong class="text-danger">We do not support multiple add-ons (<code>.input-group-addon</code> or <code>.input-group-btn</code>) on a single side.</strong></p>
   <p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
   <form class="bs-example bs-example-form" data-example-id="simple-input-groups">
     <div class="input-group">
@@ -108,7 +108,6 @@ <h2 id="input-groups-sizing">Sizing</h2>
 </div>
 {% endhighlight %}
 
-
   <h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>
   <p>Place any checkbox or radio option within an input group's addon instead of text.</p>
   <form class="bs-example bs-example-form" data-example-id="input-group-with-checkbox-radio">
@@ -152,7 +151,6 @@ <h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>
 </div><!-- /.row -->
 {% endhighlight %}
 
-
   <h2 id="input-groups-buttons">Button addons</h2>
   <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
   <form class="bs-example bs-example-form" data-example-id="input-group-with-button">
@@ -197,7 +195,6 @@ <h2 id="input-groups-buttons">Button addons</h2>
 {% endhighlight %}
 
   <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
-  <p></p>
   <form class="bs-example bs-example-form" data-example-id="input-group-dropdowns">
     <div class="row">
       <div class="col-lg-6">
@@ -324,5 +321,45 @@ <h2 id="input-groups-buttons-segmented">Segmented buttons</h2>
     <!-- Button and dropdown menu -->
   </div>
 </div>
+{% endhighlight %}
+
+  <h2 id="input-groups-buttons-multiple">Multiple buttons</h2>
+  <p>While you can only have one add-on per side, you can have multiple buttons inside a single <code>.input-group-btn</code>.</p>
+  <form class="bs-example bs-example-form" data-example-id="input-group-multiple-buttons">
+    <div class="row">
+      <div class="col-lg-6">
+        <div class="input-group">
+          <div class="input-group-btn">
+            <button type="button" class="btn btn-default" aria-label="Bold"><span class="glyphicon glyphicon-bold"></span></button>
+            <button type="button" class="btn btn-default" aria-label="Italic"><span class="glyphicon glyphicon-italic"></span></button>
+          </div>
+          <input type="text" class="form-control" aria-label="Text input with multiple buttons">
+        </div><!-- /.input-group -->
+      </div><!-- /.col-lg-6 -->
+      <div class="col-lg-6">
+        <div class="input-group">
+          <input type="text" class="form-control" aria-label="Text input with multiple buttons">
+          <div class="input-group-btn">
+            <button type="button" class="btn btn-default" aria-label="Help"><span class="glyphicon glyphicon-question-sign"></span></button>
+            <button type="button" class="btn btn-default">Action</button>
+          </div>
+        </div><!-- /.input-group -->
+      </div><!-- /.col-lg-6 -->
+    </div><!-- /.row -->
+  </form>
+{% highlight html %}
+<div class="input-group">
+  <div class="input-group-btn">
+    <!-- Buttons -->
+  </div>
+  <input type="text" class="form-control" aria-label="...">
+</div>
+
+<div class="input-group">
+  <input type="text" class="form-control" aria-label="...">
+  <div class="input-group-btn">
+    <!-- Buttons -->
+  </div>
+</div>
 {% endhighlight %}
 </div>

docs/_includes/css/forms.html

@@ -609,6 +609,30 @@ <h2 id="forms-control-readonly">Readonly state</h2>
 {% endhighlight %}
 
 
+  <h2 id="forms-help-text">Help text</h2>
+  <p>Block level help text for form controls.</p>
+  <div class="bs-callout bs-callout-info" id="callout-help-text-accessibility">
+    <h4>Associating help text with form controls</h4>
+    <p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
+  </div>
+  <div class="bs-example" data-example-id="simple-help-text">
+    <form>
+      <div class="form-group">
+        <label for="inputHelpBlock">Input with help text</label>
+        <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
+      </div>
+      <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
+    </form>
+  </div><!-- /.bs-example -->
+{% highlight html %}
+<label class="sr-only" for="inputHelpBlock">Input with help text</label>
+<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
+...
+<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
+{% endhighlight %}
+</div>
+
+
   <h2 id="forms-control-validation">Validation states</h2>
   <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
 
@@ -622,7 +646,8 @@ <h4>Conveying validation state to assistive technologies and colorblind users</h
     <form>
       <div class="form-group has-success">
         <label class="control-label" for="inputSuccess1">Input with success</label>
-        <input type="text" class="form-control" id="inputSuccess1">
+        <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
+        <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
       </div>
       <div class="form-group has-warning">
         <label class="control-label" for="inputWarning1">Input with warning</label>
@@ -661,7 +686,8 @@ <h4>Conveying validation state to assistive technologies and colorblind users</h
 {% highlight html %}
 <div class="form-group has-success">
   <label class="control-label" for="inputSuccess1">Input with success</label>
-  <input type="text" class="form-control" id="inputSuccess1">
+  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
+  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
 </div>
 <div class="form-group has-warning">
   <label class="control-label" for="inputWarning1">Input with warning</label>
@@ -1001,25 +1027,3 @@ <h3>Column sizing</h3>
 </div>
 {% endhighlight %}
 
-  <h2 id="forms-help-text">Help text</h2>
-  <p>Block level help text for form controls.</p>
-  <div class="bs-callout bs-callout-info" id="callout-help-text-accessibility">
-    <h4>Associating help text with form controls</h4>
-    <p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
-  </div>
-  <div class="bs-example" data-example-id="simple-help-text">
-    <form>
-      <div class="form-group">
-        <label for="inputHelpBlock">Input with help text</label>
-        <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
-      </div>
-      <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
-    </form>
-  </div><!-- /.bs-example -->
-{% highlight html %}
-<label class="sr-only" for="inputHelpBlock">Input with help text</label>
-<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
-...
-<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
-{% endhighlight %}
-</div>

docs/_includes/nav/components.html

@@ -45,6 +45,7 @@
     <li><a href="#input-groups-buttons">Button addons</a></li>
     <li><a href="#input-groups-buttons-dropdowns">Buttons with dropdowns</a></li>
     <li><a href="#input-groups-buttons-segmented">Segmented buttons</a></li>
+    <li><a href="#input-groups-buttons-multiple">Multiple buttons</a></li>
   </ul>
 </li>
 <li>

docs/_includes/nav/css.html

@@ -73,9 +73,9 @@
     <li><a href="#forms-control-focus">Focus state</a></li>
     <li><a href="#forms-control-disabled">Disabled state</a></li>
     <li><a href="#forms-control-readonly">Readonly state</a></li>
+    <li><a href="#forms-help-text">Help text</a></li>
     <li><a href="#forms-control-validation">Validation states</a></li>
     <li><a href="#forms-control-sizes">Control sizing</a></li>
-    <li><a href="#forms-help-text">Help text</a></li>
   </ul>
 </li>
 <li>