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>

预览：