mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-10 22:24:19 +01:00
b648a77ed3
Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
197 lines
6.8 KiB
Markdown
197 lines
6.8 KiB
Markdown
---
|
|
layout: page
|
|
title: Input group
|
|
---
|
|
|
|
Extend form controls by adding text or buttons before, after, or on both sides of any text-based `<input>`. Use `.input-group` with an `.input-group-addon` to prepend or append elements to a single `.form-control`.
|
|
|
|
<div class="bs-callout bs-callout-danger">
|
|
<h4>Textual <code><input></code>s only</h4>
|
|
<p>Avoid using <code><textarea></code> elements here as their <code>rows</code> attribute will not be respected in some cases.</p>
|
|
</div>
|
|
<div class="bs-callout bs-callout-warning">
|
|
<h4>Tooltips & popovers in input groups require special setting</h4>
|
|
<p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
|
|
</div>
|
|
<div class="bs-callout bs-callout-warning">
|
|
<h4>Don't mix with other components</h4>
|
|
<p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
|
|
</div>
|
|
|
|
## Basic example
|
|
|
|
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
|
|
|
|
**We do not support multiple add-ons on a single side.**
|
|
|
|
**We do not support multiple form-controls in a single input group.**
|
|
|
|
{% example html %}
|
|
<div class="input-group">
|
|
<span class="input-group-addon">@</span>
|
|
<input type="text" class="form-control" placeholder="Username">
|
|
</div>
|
|
<br>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control">
|
|
<span class="input-group-addon">.00</span>
|
|
</div>
|
|
<br>
|
|
<div class="input-group">
|
|
<span class="input-group-addon">$</span>
|
|
<input type="text" class="form-control">
|
|
<span class="input-group-addon">.00</span>
|
|
</div>
|
|
{% endexample %}
|
|
|
|
## Sizing
|
|
|
|
Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
|
|
|
|
{% example html %}
|
|
<div class="input-group input-group-lg">
|
|
<span class="input-group-addon">@</span>
|
|
<input type="text" class="form-control" placeholder="Username">
|
|
</div>
|
|
<br>
|
|
<div class="input-group">
|
|
<span class="input-group-addon">@</span>
|
|
<input type="text" class="form-control" placeholder="Username">
|
|
</div>
|
|
<br>
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-addon">@</span>
|
|
<input type="text" class="form-control" placeholder="Username">
|
|
</div>
|
|
{% endexample %}
|
|
|
|
## Checkboxes and radio addons
|
|
|
|
Place any checkbox or radio option within an input group's addon instead of text.
|
|
|
|
{% example html %}
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">
|
|
<input type="checkbox">
|
|
</span>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">
|
|
<input type="radio">
|
|
</span>
|
|
<input type="text" class="form-control">
|
|
</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.
|
|
|
|
{% example html %}
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="input-group">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-secondary" type="button">Go!</button>
|
|
</span>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-secondary" type="button">Go!</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endexample %}
|
|
|
|
## Buttons with dropdowns
|
|
|
|
{% example html %}
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="input-group">
|
|
<div class="input-group-btn">
|
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control">
|
|
<div class="input-group-btn">
|
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
|
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endexample %}
|
|
|
|
## Segmented buttons
|
|
|
|
{% example html %}
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="input-group">
|
|
<div class="input-group-btn">
|
|
<button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
|
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1" aria-expanded="false">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control">
|
|
<div class="input-group-btn">
|
|
<button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
|
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1" aria-expanded="false">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endexample %}
|