3.3Bootstrap学习组件篇之输入框组

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>预览：