A、把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
B、接着,在相同的 <div> 内,在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
C、把该 <span> 放置在 <input> 元素的前面或者后面。
为了保持跨浏览器的兼容性,请避免使用 <select> 元素,因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向
表单组应用输入框组的 class,输入框组是一个孤立的组件。
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control"placeholder="twitterhandle">
<span class="input-group-addon">.00</span>
</div>
</form>
((1)、输入框组的大小)、输入框组的大小
您可以通过向 .input-group 添加相对表单大小的 class(比如 .input-group-lg、input-group-sm、input-group-xs)来改变输
入框组的大小。输入框中的内容会自动调整大小。
((2)、复选框和单选插件)、复选框和单选插件
您可以把复选框和单选插件作为输入框组的前缀或者后缀元素
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
((3)、按钮插件)、按钮插件
您也可以把按钮作为输入框组的前缀或者后缀元素,这个时候您就不是添加 .input-group-addon class,您需要使用class
.input-group-btn 来包裹按钮。这是必需的,因为默认的浏览器样式不会被重写。
<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>