Commit 7b23005f authored by Supergibbs's avatar Supergibbs

Clarified documentation about input groups and added an example of

multiple buttons
parent c111c291
<div class="bs-docs-section"> <div class="bs-docs-section">
<h1 id="input-groups" class="page-header">Input groups</h1> <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"> <div class="bs-callout bs-callout-danger" id="callout-inputgroup-text-input-only">
<h4>Textual <code>&lt;input&gt;</code>s only</h4> <h4>Textual <code>&lt;input&gt;</code>s only</h4>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<h2 id="input-groups-basic">Basic example</h2> <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>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> <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"> <form class="bs-example bs-example-form" data-example-id="simple-input-groups">
<div class="input-group"> <div class="input-group">
...@@ -312,5 +312,45 @@ ...@@ -312,5 +312,45 @@
<!-- Button and dropdown menu --> <!-- Button and dropdown menu -->
</div> </div>
</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 %} {% endhighlight %}
</div> </div>
...@@ -45,6 +45,7 @@ ...@@ -45,6 +45,7 @@
<li><a href="#input-groups-buttons">Button addons</a></li> <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-dropdowns">Buttons with dropdowns</a></li>
<li><a href="#input-groups-buttons-segmented">Segmented buttons</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> </ul>
</li> </li>
<li> <li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment