具体代码如下:

<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. 关于windows环境下cordova命令行无法启动adb.exe的解决办法

    使用phonegap开发手机APP,常常需要更改代码之后进行调试,使用安卓模拟器每次启动非常缓慢,而且不能保证最终在真机上的效果.所以一般都采用真机进行调试. 搭建真机的调试环境这里就不再赘述了,网上 ...

  2. 【BZOJ 1815】【SHOI 2006】color 有色图

    http://www.lydsy.com/JudgeOnline/problem.php?id=1815 这道题好难啊,组合数学什么根本不会啊qwq 题解详见08年的Pólya计数论文. 主要思想是只 ...

  3. NOIP2005 day1 t1 谁拿了最多奖学金

    题目描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 1) 院士奖学金,每人8000元,期末平均成绩高于80分(>80),并且在本学期内发表1篇或1 ...

  4. [BZOJ3997][TJOI2015]组合数学(Dilworth定理+DP)

    题目名字是什么就不能往那方面想. 每个点拆成a[i][j]个,问题变为DAG最小路径覆盖,由Dilworth定理转成最长反链. 使用Dilworth定理的时候要注意那些点之间有边,这里任意一个点和其右 ...

  5. 【线性筛】【质因数分解】【约数个数定理】hdu6069 Counting Divisors

    d(x)表示x的约数个数,让你求(l,r<=10^12,r-l<=10^6,k<=10^7) #include<cstdio> using namespace std; ...

  6. 【BFS】POJ3669-Meteor Shower

    [思路] 预处理时先将陨石落到各点的最短时间纪录到数组中,然后在时间允许的范围内进行广搜.一旦到某点永远不会砸到,退出广搜. #include<iostream> #include< ...

  7. 问题: Packet for query is too large (1786 > 1024). You can change this value on the server by setting the max_allowed_packet' variable.

    错误描述: 今天在手机端查看之前上线的项目时,突然报了下面的错误.再之后用电脑登陆,其他设备登陆都一直报这个错误. 错误信息: ### Error querying database. Cause: ...

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

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

  9. 8VC Venture Cup 2016 - Elimination Round G. Raffles 线段树

    G. Raffles 题目连接: http://www.codeforces.com/contest/626/problem/G Description Johnny is at a carnival ...

  10. MYSQL复习笔记13-触发器trigger

    Date: 20140305Auth: Jin 一.概念1.基本概念触发器是一个被指定关联到一个表的数据对象,触发器是不需要调用的,当对一个表的特别事件出现时,它就被激活.触发器的代码也是由SQL语句 ...