具体代码如下:

<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. 【POJ 2154】 Color (置换、burnside引理)

    Color Description Beads of N colors are connected together into a circular necklace of N beads (N< ...

  2. JZYZOJ1372 [noi2002]荒岛野人 扩展欧几里得

    http://172.20.6.3/Problem_Show.asp?id=1372 想法其实很好想,但是我扩展欧几里得还是用得不熟练,几乎是硬套模板,大概因为今天一个下午状态都不大好.扩展欧几里得算 ...

  3. 【凸包】【三分】Gym - 101309D - Dome of Circus

    容易发现,圆锥体积和点的具体x.y坐标无关,只与其到z轴的距离sqrt(x*x+y*y)有关. 于是将这些三维的点都投射到二维的xOy平面的第二象限(sqrt(x*x+y*y),z),求个上凸壳,然后 ...

  4. nginx和php-fpm的用户权限

    启动php-fpm sudo php-fpm -c /etc/php.ini [17-Sep-2018 00:36:59] ERROR: [pool www] please specify user ...

  5. HDU 5638 Toposort 拓扑排序 优先队列

    Toposort 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5638 Description There is a directed acycli ...

  6. spring boot application.properties乱码问题

    1. 在application.properties 中增加 spring.http.encoding.force=true spring.http.encoding.charset=UTF- spr ...

  7. PHP温故知新(一)

    前言 开发PHP也有几年的时间了,记得第一次接触PHP那时候还是PHP4,现在PHP版本已经是7了,虽然本人也算是一个PHP老手了,但是总觉得有些基础知识掌握的不是很好.学PHP之初只是为了混口饭吃, ...

  8. rman catalog配置简要笔记

    服务端配置: SQL> create tablespace tbs_rman datafile 'H:\oradata\test\tbs_rman.dbf' size 20m autoexten ...

  9. Visio画好的图在word中只显示一部分

    外表那个虚框是大小,原来只有一部分,设计-大小-适应绘图.

  10. 【QQ输入法】QQ输入法-剪切板 释放内存

    发现一个神奇的情况: 清除和关闭的操作: 1. 2.右键 3.点击 4.清空 5.最后需要关闭 QQ输入法的进程