rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #16560 from supergibbs/multiple-button-input-groups

Browse Source 
Multiple button input groups
This commit is contained in:
Mark Otto 2015-08-04 19:54:19 -07:00
commit 10cc97cdd9
2 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
docs/_includes/components/input-groups.html
View File

@ -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 @@
<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 @@
</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 @@
</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 @@
{% 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 @@
<!-- 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>

1
docs/_includes/nav/components.html
View File

@ -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>