具体代码如下:

<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”。

bootstrap的两种在input框里面增加一个图标的方式的更多相关文章

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

    第一种: <div class="input-group"> <div class="input-icon-group"> <di ...

  2. 解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题

    注册表单部分代码如下: <form id="registForm" class="form-horizontal" action="${page ...

  3. 记Bootstrap Table两种渲染方式

    这里主要区别两种Bootstrap Table的数据渲染方式,一.属性渲染方式,二.JS渲染方式 工作直接接手前人的,之前都直接在table标签上渲染属性,后面因为项目需要,同一页面的表格,需要申请不 ...

  4. bootstrap在input框中加入icon图标

    <form class="form-horizontal"> <div class="form-group has-feedback"> ...

  5. Delphi函数指针的两种定义(对象方法存在一个隐藏参数self,所以不能相互赋值)

    delphi中经常见到以下两种定义 Type TMouseProc = procedure (X,Y:integer); TMouseEvent = procedure (X,Y:integer) o ...

  6. 两种为wangEditor添加拖拽调整高度的方式:CSS3和jQuery UI

    wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...

  7. 关于键盘事件-查询:有多个input框,任意一个支持enter键查询

    应用场景:同一个界面有多个input框支持任意一个Enter查询. 实现:在input框中添加onkeypress="函数名()". 函数里面编写对应键盘code值,在里面直接调用 ...

  8. 测开之路一百零五:bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

  9. MVC两种获取上传的文件数据变量的方式

    第一种方式,在控制器中利用HttpPostedFileBase参数对象获取. [HttpPost] public ActionResult SaveFile(HttpPostedFileBase up ...

随机推荐

  1. WebService协议

    http://www.cnblogs.com/lm3515/archive/2011/03/17/1987009.html http://blog.csdn.net/chjttony/article/ ...

  2. 【最短路】【位运算】It's not a Bug, it's a Feature!

    [Uva658] It's not a Bug, it's a Feature! 题目略 UVA658 Problem PDF上有 试题分析:     本题可以看到:有<=20个潜在的BUG,那 ...

  3. BZOJ 3676 [Apio2014]回文串(回文树)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3676 [题目大意] 考虑一个只包含小写拉丁字母的字符串s. 我们定义s的一个子串t的& ...

  4. BZOJ 2697 特技飞行(贪心)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2697 [题目大意] 神犇航空开展了一项载客特技飞行业务. 每次飞行长N个单位时间,每个 ...

  5. css3背景属性 background-size 对背景图进行缩小放大

    background-size需要两个值,它的类型可以是像素(px).百分比(%)或是auto,还可以是cover和contain.第一个值为背景图的width,另外一个值用于指定背景图上的heigh ...

  6. CentOS6安装NodeJS(非编译)

    由于编译安装需要各种依赖库,会远远高于生产环境下的默认版本,强行升级会产生很多不必要的问题,所以一般用官网编译好的安装 下载nodejs并安装 wget https://nodejs.org/dist ...

  7. Ubuntu 16.04安装RabbitMQ(单机版)

    说明: 1.如果是做RabbitMQ方面的开发时,建议先不要了解集群的安装和部署,先安装一个单机版之后,尽快的熟悉里面的功能和特性.毕竟单机版支持的QPS相当的高.同样,集群方式也没有想象中的多点复制 ...

  8. 将WPF版的弹幕播放器给优化了一下

    年前较闲的时候研究了一下WPF的性能优化,练手的时将之前写的弹幕播放器给重新写了一下.年前的时间不大够,没有写完,这两天接着弄了一下,基本上弄得差不多了. 主要重写了底层的渲染算法,优化后效果还是非常 ...

  9. GCC,LLVM,Clang编译器对比

    http://www.cnblogs.com/qoakzmxncb/archive/2013/04/18/3029105.html   在XCode中,我们经常会看到这些编译选项(如下图),有些人可能 ...

  10. unitest跳过测试用例

    http://www.51testing.com/html/35/n-3718035.html @unittest.skip(u"强制跳过示例") @unittest.skip(u ...