朴实无华的input默认是这样的:
<input type="text" placeholder="US Dollar">
可以为它加上前缀增补和后缀增补:
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="US Dollar">
<span class="input-group-addon">.00</span>
</div>
只要把增补控件和input的class="input-group"
内,其中的增补控件标记为class="input-group-addon"
即可。当然,你可以只是做前缀增补,或者只是增加后缀增补,只要把不需要的删除就行了。
上面的案例增补的是span内的文字。还可以增补其他类型的控件,比如button。并且可以不止一个:
<div class="input-group">
<input type="text" class="form-control" >
<span class="input-group-btn">
<button type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default">Options</button>
</span>
</div>
增补checkbox也行:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<input type="checkbox">
</span>
</div>
增补radio也行:
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
增补dropdown也行:
<div class="input-group">
<div class="input-group-btn">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2 action</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>