Bootstrap3实用教程
3.5.1 创建输入框组
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

下拉菜单

按钮组

按钮下拉菜单

输入框组

输入框组是对表单控件的扩展。使用输入框组,你可以很容易地在文本输入框<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 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验