Bootstrap创建输入框组

输入框组

输入框组是对表单控件的扩展。使用输入框组，你可以很容易地在文本输入框<input>的前面或后面添加文本或按钮。

通过输入框组，你可以向输入框添加公共的元素。如，添加人民币符号、电子邮件的 @ 符号、或应用程序接口所需要的其他公共内容。

创建输入框组

要在输入框的前面或后面添加内容，首先创建一个.input-group的 <div> 容器，然后在这个 <div> 中，把要前置或后置的内容放到一个.input-group-addon或 .input-group-btn的 <span> 中，再把这个 <span> 元素放到 <input> 元素的前面或后面。

你可以在文本输入框的任意一侧添加额外元素或按钮。如，在文本输入框的前面或后面插入电子邮件的 @ 符号：

<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

效果如图 3‑26所示：

图3-26 前置和后置内容

你也可以在文本输入框的前面和后面同时添加内容。如：

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

效果如图 3‑27所示：

图3-27 同时前置和后置内容

说明：

Bootstrap不支持在输入框的单独一侧添加多个 .input-group-addon 或 .input-group-btn，也不支持在单个输入框组中添加多个表单控件。

输入框组只支持文本输入框 <input> 元素，请避免使用 <select> 元素，因为 WebKit 浏览器不能完全绘制它的样式。也避免使用 <textarea> 元素，因为它们的 rows 属性在某些情况下不被支持。

为 .input-group 中所包含的元素应用工具提示（tooltip）或popover（弹出框）时，必须设置 container: 'body' 参数，为的是避免意外的副作用。比如，工具提示或弹出框被激活后，可能会让当前元素变得更宽或/和变得失去其圆角。

不要将表单组或栅格列的类直接和输入框组混合使用，而是将输入框组嵌套到表单组或栅格相关元素的内部

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。