输入框组 基本语法

W3CSchool > bootstrap3中文手册 > Bootstrap 输入框组 > 输入框组 基本语法

本章将讲解 Bootstrap 支持的另一个特性,输入框组。输入框组扩展自 表单布局控件。使用输入框组,您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

.form-control 添加前缀或后缀元素的步骤如下:

把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中。
接着,在相同的 <div> 内,在 class 为 .input-group-addon 的 <span> 内放置额外的内容。

把该 <span> 放置在 <input> 元素的前面或者后面。
为了保持跨浏览器的兼容性,请避免使用 <select> 元素,因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class,输入框组是一个孤立的组件。

通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。
.input-group 赋予 .input-group-addon 类,可以给 .form-control 的前面或后面添加额外的元素。

只支持文本输入框 <input>

这里请避免使用 <select> 元素,因为 WebKit 浏览器不能完全绘制它的样式。

避免使用 <textarea> 元素,由于它们的 rows 属性在某些情况下不被支持。

输入框组中的工具提示和弹出框需要特别的设置

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

不要和其他组件混用

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

通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素。

例如,您可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素。


CTRL + D 收藏本页

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)