热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Bootstrap4输入框组件详解

本文详细介绍了如何利用Bootstrap4中的.input-group类来增强表单输入框的功能和样式,包括如何添加图标、文本或按钮等元素。
Bootstrap4 输入框组件

通过使用.input-group类,Bootstrap4允许开发者轻松地向标准的表单输入框中添加额外的样式和功能,例如图标、文本或按钮。


为了在输入框前或后添加文本或图标,可以分别使用.input-group-prepend.input-group-append类。此外,.input-group-text类用于定义这些附加元素的具体样式。



Bootstrap4 示例




<form>
<
div class="input-group mb-3">
<
div class="input-group-prepend">
<
span class="input-group-text">@span>
div>
<
input type="text" class="form-control" placeholder="Username">
div>
<
div class="input-group mb-3">
<
input type="text" class="form-control" placeholder="Username">
<
div class="input-group-append">
<
span class="input-group-text">@span>
div>
div>
form>

推荐阅读
author-avatar
我活该难受G
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有