dtcms模板 Appuim环境搭建 微信小程序教程 希腊字母 劝酒文化 azure dataframe 找公司做网站 mysql在线测试 python数据类型转换 python正则表达式 python基础教程 java获取本地时间 java文件输入输出 sql综合利用工具 一键刷入recovery 路由器有没有辐射 迅雷去广告版 安卓刷机精灵 京东钱包客户端 苹果手机总是自动重启 博途v14安装教程 我的世界透视 python电子书 网络驱动 无主之地2联机超时 painter下载 a1530是什么版本 js继承的几种方式 csgo帧数显示 例程 mysql联合查询 shell数组遍历 错误1004 wps求和 x怎么关机 ndarray 苹果笔怎么充电 淘宝退货上门取件流程 链克口袋国际版
当前位置: 首页 > 学习教程  > 

bootstrap的两种在input框里面增加一个图标的方式

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

具体代码如下&#xff1a; <div class"input-group"><div class"input-icon-group"><input type"text" class"form-control fc-clear" /> <span id"scan" data-role"md" class"md md-c…

具体代码如下:

<div class="input-group">
    <div class="input-icon-group">
        <input type="text" class="form-control fc-clear" /> 
        <span id="scan" data-role="md" class="md md-center-focus-weak fa-lg input-icon input-icon-md" style="display: inline;"> 
        </span>
    </div>
    <span class="input-group-btn">
        <button class="btn btn-primary" type="button">
            批号
        </button>
    </span>
</div>

效果如下:

1,首先使得他们在一行主要是"input-group"和,“input-icon-group”和“input-group-btn”属性起作用

2,使得input里面的图标在input里面展现的效果主要是“input-icon input-icon-md”起作用,和“display: inline”起作用。

3,对于input框能够占据整行空隙,而不是宽度很小,起作用的是“form-control”。

4,对于input框里面输入文字后,不会覆盖图标,起作用的是“fc-clear”。


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

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?