Bootstrap实现基本的输入框组实例-创新互联
这篇文章主要讲解了“Bootstrap实现基本的输入框组实例”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Bootstrap实现基本的输入框组实例”吧!
成都创新互联公司专注于中大型企业的成都网站制作、成都网站设计和网站改版、网站营销服务,追求商业策划与数据分析、创意艺术与技术开发的融合,累计客户千余家,服务满意度达97%。帮助广大客户顺利对接上互联网浪潮,准确优选出符合自己需要的互联网运用,我们将一直专注成都品牌网站建设和互联网程序开发,在前进的路上,与客户一起成长!
通过向输入域添加前缀和后缀的内容,可以向用户输入添加公共的元素。例如,可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素。
向 .form-control 添加前缀或后缀元素的步骤如下:
把前缀或后缀元素放在一个带有 class .input-group 的
中。接着,在相同的
内,在 class 为 .input-group-addon 的 内放置额外的内容。把该 放置在 元素的前面或者后面。
为了保持跨浏览器的兼容性,请避免使用
基本的输入框组
下面的实例演示了基本的输入框组:
实例结果如下所示:
输入框组的大小
您可以通过向 .input-group 添加相对表单大小的 class(比如 .input-group-lg、input-group-sm)来改变输入框组的大小。输入框中的内容会自动调整大小。
下面的实例演示了这点:
实例
结果如下所示:
复选框和单选插件
您可以把复选框和单选插件作为输入框组的前缀或者后缀元素,如下面的实例所示:
实例
结果如下所示:
按钮插件
您也可以把按钮作为输入框组的前缀或者后缀元素,这个时候您就不是添加 .input-group-addon class,您需要使用 class .input-group-btn 来包裹按钮。这是必需的,因为默认的浏览器样式不会被重写。下面的实例演示了这点:
实例
结果如下所示:
带有下拉菜单的按钮
在输入框组中添加带有下拉菜单的按钮,只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可,如下面的实例所示:
实例
结果如下所示:
分割的下拉菜单按钮
在输入框组中添加带有下拉菜单的分割按钮,使用与下拉菜单按钮大致相同的样式,但是对下拉菜单添加了主要的功能,如下面的实例所示:
实例
结果如下所示:
感谢各位的阅读,以上就是“Bootstrap实现基本的输入框组实例”的内容了,经过本文的学习后,相信大家对Bootstrap实现基本的输入框组实例这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
标题名称:Bootstrap实现基本的输入框组实例-创新互联
文章地址:http://myzitong.com/article/djhjdc.html