mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-17 14:54:30 +01:00
add example of multiple add-ons to docs
This commit is contained in:
parent
23d47122ef
commit
9c3ba540b4
@ -37,6 +37,12 @@ Place one add-on or button on either side of an input. You may also place one on
|
||||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<span class="input-group-addon">0.00</span>
|
||||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Sizing
|
||||
@ -53,11 +59,6 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
|
||||
<span class="input-group-addon" id="sizing-addon2">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-addon" id="sizing-addon3">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Checkboxes and radio addons
|
||||
@ -85,6 +86,32 @@ Place any checkbox or radio option within an input group's addon instead of text
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Multiple addons
|
||||
|
||||
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
|
||||
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<input type="checkbox" aria-label="Checkbox for following text input">
|
||||
</span>
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text" class="form-control" aria-label="Text input with checkbox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<span class="input-group-addon">0.00</span>
|
||||
<input type="text" class="form-control" aria-label="Text input with radio button">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## Button addons
|
||||
|
||||
Buttons in input groups are a bit different and require one extra level of nesting. Instead of `.input-group-addon`, you'll need to use `.input-group-btn` to wrap the buttons. This is required due to default browser styles that cannot be overridden.
|
||||
|
Loading…
x
Reference in New Issue
Block a user