基本案例:通过在基于文本的输入框前面,后面或是两边加上文字或按钮,可以扩展对表单的控制。用带有.input-group-addon
的.input-group
,可以给.form-control
前面或后面追加元素。
<div class="input-group">
<span class="input-group-addon">@</span> <input type="text"
class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control"> <span
class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span> <input type="text"
class="form-control"> <span class="input-group-addon">.00</span>
</div>
尺寸:input-group添加标明尺寸的class,它自己和其中的内容都会自动调整尺寸。没必要给每个元素都重复添加尺寸class。
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
复选框与单选框:可以把复选框或单选框放在输入组里而不是文本前。
<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><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<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><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
附加按钮:要用 .input-group-btn
包住按钮而不是 .input-group-addon
。这是因为默认的浏览器样式不能被覆盖
<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>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
<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>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
带下拉菜单的按钮:
<div class="row">
<div class="col-lg-4">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">链接按钮 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">链接一</a></li>
<li><a href="#">链接二</a></li>
<li><a href="#">其他链接</a></li>
<li class="divider"></li>
<li><a href="#">指定链接</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">链接按钮 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">链接一</a></li>
<li><a href="#">链接二</a></li>
<li><a href="#">其他链接</a></li>
<li class="divider"></li>
<li><a href="#">指定链接</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->