MongoDB safari gulp xampp bootstrap后台管理 it教学视频 nginx学习视频 jq获取第一个子元素 jquery清除子元素 idea整理代码 python取随机数 python指数函数 python中for循环的用法 python入门例子 linux配置python环境 java继承 java课程学习 java中基本数据类型 javac linux中sudo python教程视频 din字体 51脚本 python的用途 mac画图软件 考试练习系统 wine模拟器 idea导出jar包 adobe卸载工具 证书小精灵 ajaxpro oemdiy 红米手机怎么连接电脑 kz文件 b450 h5支付接口 js观察者模式 shell数组遍历 vue数组更新 微博实名认证
当前位置: 首页 > 学习教程  > 

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_300046.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?