The input box group extends from the form control. Using input box groups, you can easily add text or buttons as prefixes and suffixes to text-based input boxes.
You can add common elements to user input by adding prefix and suffix content to the input field. For example, you can add dollar signs, or add @ in front of your Twitter username, or other common elements required by the API.
The steps to add a prefix or suffix element to .form-control are as follows:
- Put prefix or suffix elements in an with class .input-group
<div>. - Next, inside the same , put extra content
<div>inside the with class .input-group-addon .<span> <span>Place this<input>before or after the element.
Note: To maintain cross-browser compatibility, avoid using elements as they do not render fully in WebKit browsers. Also don't apply the input group's class directly to the form group, the input group is an isolated component.
1 Basic input box group
<div style="padding: 100px 100px 10px;">
<form>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="电子邮箱">
</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>
</form>
</div>
2 Enter the size of the box group
You can change the size of the input group by adding a class relative to the form size (eg .input-group-lg, input-group-sm) to .input-group. The contents of the input box are automatically resized.
The following example demonstrates this:
<div style="padding: 100px 100px 10px;">
<form>
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="电子邮箱">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="电子邮箱">
</div>
<br>
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="电子邮箱">
</div>
</form>
</div>
3 Checkbox and radio plugins
You can use checkboxes and radios as prefixes or suffixes to input box groups, as shown in the following example:
<div style="padding: 100px 100px 10px;">
<form>
<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>
<br>
<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>
</form>
</div>
4 button plugin
You can also use the button as the prefix or suffix element of the input box group. In this case, instead of adding the .input-group-addon class, you need to use the class .input-group-btn to wrap the button. This is required because default browser styles will not be overridden. The following example demonstrates this:
<div style="padding: 100px 100px 10px;">
<form>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">搜索</button>
</span>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">搜索</button>
</span>
</div>
</div>
</div>
</form>
</div>
5 Buttons with drop-down menus
To add a button with a drop-down menu to an input group, simply wrap the button and drop-down menu in a .input-group-btn class, as shown in the following example:
<div style="padding: 100px 100px 10px;">
<form>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle"
data-toggle="dropdown" type="button">类别
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">科技</a></li>
<li><a href="#">人文</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
</form>
</div>
6 Split drop-down menu buttons
Add a split button with a drop-down menu to the input box group, using roughly the same style as the drop-down menu button, but adding the main functionality to the drop-down menu, as shown in the following example:
<div style="padding: 100px 100px 10px;">
<form>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default"
tabindex="-1">类别</button>
<button class="btn btn-default dropdown-toggle"
data-toggle="dropdown" tabindex="-1" type="button">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">科技</a></li>
<li><a href="#">人文</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
</form>
</div>