1、基本案例
通过在基于文本的输入框前面,后面或是两边加上文字或按钮,可以扩展对表单的控制。用带有.input-group-addon
的.input-group
,可以给.form-control
前面或后面追加元素。
跨浏览器兼容性
这里请避免使用 <select>
元素,因为 WebKit 浏览器不能完全支持它的样式。
输入框组中的工具提示和弹出框需要特别的设置
When using tooltips or popovers on elements within an .input-group
, you'll have to specify the option container: 'body'
to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
不要和.form-group
混用
不要直接将.input-group
和.form-group
混合使用,因为.input-group
是一个独立的组件。
<h1 class="page-header">输入框组</h1>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" placeholder="UserName" class="form-control" />
</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">%</span>
</div>
预览效果:
2、尺寸
给.input-group
添加标明尺寸的class,它自己和其中的内容都会自动调整尺寸。没必要给每个元素都重复添加尺寸class。
代码段:
<h1 class="page-header">输入框组</h1>
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" placeholder="UserName" class="form-control" />
</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 input-group-sm">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" />
<span class="input-group-addon">%</span>
</div>
预览:
3、复选框与单选框
可以把复选框或单选框放在输入组里而不是文本前。
代码段:
<h1 class="page-header">复选框与单选框</h1>
<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>
预览:
首先看到的这个是在屏幕宽度足够大的情况下,两个组合控件在同一行进行排列。接下来我们通过收缩浏览器的宽度。可以看到如下效果
4、附加按钮
输入组里的有点不同,它需要多加一层元素。 你要用 .input-group-btn
包住按钮而不是 .input-group-addon
。这是因为默认的浏览器样式不能被覆盖。
代码段:
<h1 class="page-header">附加按钮</h1>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" 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-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
预览:
5、带下拉菜单的按钮
代码段:
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<!--这是下拉列表的按钮-->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</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-default dropdown-toggle" data-toggle="dropdown">
Action<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
</ul>
</div>
</div>
</div>
</div>
预览
6、分段按钮
代码段:
<h1 class="page-header">分段按钮</h1>
<div class="input-group">
<!--按钮-->
<div class="input-group-btn">
<button type="button" class="btn btn-default ">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
</ul>
</div>
<input type="text" class="form-control" />
</div>
预览: