diff options
| -rw-r--r-- | docs/_includes/components/input-groups.html | 44 | ||||
| -rw-r--r-- | docs/_includes/nav/components.html | 1 |
2 files changed, 43 insertions, 2 deletions
diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index 665c5b7cc..7ea56c1c9 100644 --- a/docs/_includes/components/input-groups.html +++ b/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><input></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><input></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><input></code>s only</h4> @@ -24,7 +24,7 @@ <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"> @@ -313,4 +313,44 @@ </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> diff --git a/docs/_includes/nav/components.html b/docs/_includes/nav/components.html index 1ec91b563..66b9ac0a0 100644 --- a/docs/_includes/nav/components.html +++ b/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> |