Bootstrap 输入框组

有些时候，我们需要将文本输入框（Input group）和文字或者小icon组合在一起进行显示（我们称之为addon），只需要在容器上应用.inputgroup样式，然后对需要在input前后显示的个性元素上应用.input-groupaddon样式即可。

一、基本用法

代码如下;

<span style="white-space:pre">	</span><div class="input-group">
		<span class="input-group-addon">$</span>
		<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>

效果入下：

注意：请尽量避免在select元素上使用该功能，因为WebKit浏览器不完全支持input-group组件的特性。

二、尺寸大小设置

Bootstrap提供了大型和小型样式（.input-group-lg和.input-group-sm），但是未提供超小型样式，实例代码：

<div class="input-group input-group-lg">
		<span class="input-group-addon">$</span>
		<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>
	<div class="input-group input-group-sm">
		<span class="input-group-addon">￥</span>
		<input type="text" class="form-control">
		<span class="input-group-addon">.00</span>
	</div>

效果：

另外，可以在input-gruop-addon样式元素上单独使用input-lg和inp-sm来调整附加图标的大小。实例代码：

<div class="input-group input-group-lg">
		<span class="input-group-addon input-sm">$</span>
		<input type="text" class="form-control">
		<span class="input-group-addon">.00</span>
	</div>
	<div class="input-group">
		<span class="input-group-addon input-lg">￥</span>
		<input type="text" class="form-control">
		<span class="input-group-addon">.00</span>
	</div>
	<div class="input-group input-group-sm">
		<span class="input-group-addon">￥</span>
		<input type="text" class="form-control">
		<span class="input-group-addon">.00</span>
	</div>

效果：

三、复选框与单选框作为addon

只需要在.input-group-addon样式内放置带有checkbox和radio类型的input元素即可，示例代码：

<div class="row">
		<div class="col-md-4">
			<div class="input-group">
				<span class="input-group-addon"><input type="checkbox"></span>
				<input type="text" class="form-control">
			</div>
		</div>
		<div class="col-md-4">
			<div class="input-group">
				<span class="input-group-addon"><input type="radio"></span>
				<input type="text" class="form-control">
			</div>
		</div>
	</div>

效果：

四、按钮作为addon

需要将span的input-group-addon样式换成input-group-btn样式，然后在span元素中放一个按钮即可，实例代码：

<div class="row">
		<div class="col-md-4">
			<div class="input-group">
				<span class="input-group-btn">
					<button type="button" class="btn btn-default">Go</button>
				</span>
				<input type="text" class="form-control">
			</div>
		</div>
		<div class="col-md-4">
			<div class="input-group">
				<span class="input-group-addon">
					<button type="button" class="btn btn-default">Go</button>
				</span>
				<input type="text" class="form-control">
			</div>
		</div>
	</div>

效果：（注意 由于第二个span的样式仍然是inpt-group-addon，所以出现了没和谐的情况）

五、下拉菜单按钮作为addon

只需要在普通的按钮（如上节中的按钮）上应用data-toggle=“dropdown”属性即可。示例代码：

<div class="input-group">
				<div class="input-group-btn">
					<button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown">Go
					<span class="caret"></span></button>
					<ul class="dropdown-menu">
						<li><a href="#">javasript设计模式</a> </li>
						<li><a href="#">javasript设计权威指南</a> </li>
						<li><a href="#">javasript程序设计</a> </li>
					</ul>
				</div>
				<input type="text" class="form-control">
			</div>

效果：

六、多个按钮作为addon

可以设置多个按钮作为addon。，所有的按钮都必须放置在.input-group-btn样式容器内。示例代码：

<div class="input-group">
				<div class="input-group-btn">
					<button type="button" class="btn btn-default">One</button>
					<button type="button" class="btn btn-default">Two</button>
					<button type="button" class="btn btn-default">Three</button>
					<button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown">Go
					<span class="caret"></span></button>
					<ul class="dropdown-menu">
						<li><a href="#">javasript设计模式</a> </li>
						<li><a href="#">javasript设计权威指南</a> </li>
						<li><a href="#">javasript程序设计</a> </li>
					</ul>
				</div>
				<input type="text" class="form-control">
			</div>

效果：