XShell aircrack-ng VBA npm安装 log4j dart cookies matlab向上取整 yii stl Notify.js 系统后台模板 java设计模式视频 纯html网页模板 java获取字符串 mysql分区表优劣分析 python环境配置 python中items python开发 python指令 python语言编程 java数据类型 java中的数据类型 java语言 java系统时间 java开发语言 java日期转时间戳 vs2010sp1 字幕制作软件哪个好 js格式化时间 渐变事件 反转颜色 raid0教程 通讯录管理系统 dll下载 凤凰刷机 iar下载 碧桂园园宝 猫眼电影票 解压tar
当前位置: 首页 > 学习教程  > 

bootstrap~在input框中加入icon图标

2020/10/16 17:43:29 文章标签: bootstrap文本框

今天在bootstrap前端框架中这样一个需求,在input框的前一部分展示图标,如下图: 解决方式: 在input前面添加span标签,span通过class 设置bootstrap组件图标。 配合form-control-feedback将图标显示在input内。但是这时…

今天在bootstrap前端框架中这样一个需求,在input框的前一部分展示图标,如下图:

解决方式:

在input前面添加span标签,span通过class 设置bootstrap组件图标。 配合form-control-feedback将图标显示在input内。但是这时显示在input的后端。打开f12,可以发现.form-control-feedback{}的选择器是相对定位的,通过调节将其调到需要展示的位置。

代码展示:

<form class="form-horizontal" id = "my_form_active">
    <div class="form-group">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
            <input type="text" class="form-control form-control-pl-30" name = "name"      placeholder="参会人员姓名">
        </div>
    </div>
</form>

主要通过:form-control-feedback 实现。

参考:https://www.cnblogs.com/xiaqilin/p/8987183.html

 

 


本文链接: http://www.dtmao.cc/news_show_300045.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?