bootstrap的两种在input框里面增加一个图标的方式
具体代码如下:
<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框里面增加一个图标的方式的更多相关文章
- bootstrap的两种在input框后面增加一个图标的方式
第一种: <div class="input-group"> <div class="input-icon-group"> <di ...
- 解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题
注册表单部分代码如下: <form id="registForm" class="form-horizontal" action="${page ...
- 记Bootstrap Table两种渲染方式
这里主要区别两种Bootstrap Table的数据渲染方式,一.属性渲染方式,二.JS渲染方式 工作直接接手前人的,之前都直接在table标签上渲染属性,后面因为项目需要,同一页面的表格,需要申请不 ...
- bootstrap在input框中加入icon图标
<form class="form-horizontal"> <div class="form-group has-feedback"> ...
- Delphi函数指针的两种定义(对象方法存在一个隐藏参数self,所以不能相互赋值)
delphi中经常见到以下两种定义 Type TMouseProc = procedure (X,Y:integer); TMouseEvent = procedure (X,Y:integer) o ...
- 两种为wangEditor添加拖拽调整高度的方式:CSS3和jQuery UI
wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...
- 关于键盘事件-查询:有多个input框,任意一个支持enter键查询
应用场景:同一个界面有多个input框支持任意一个Enter查询. 实现:在input框中添加onkeypress="函数名()". 函数里面编写对应键盘code值,在里面直接调用 ...
- 测开之路一百零五:bootstrap的两种引用方式
一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...
- MVC两种获取上传的文件数据变量的方式
第一种方式,在控制器中利用HttpPostedFileBase参数对象获取. [HttpPost] public ActionResult SaveFile(HttpPostedFileBase up ...
随机推荐
- nyoj 1007 GCD(数学题 欧拉函数的应用)
GCD 描述 The greatest common divisor GCD(a,b) of two positive integers a and b,sometimes written (a,b) ...
- JavaScript中的Date类型
ECMAScript中的Date类型是在早起Java中的java.util.Date类基础上构建的.为此,Date类型使用自UTC(Coordinated Universal Time,国际协调时间) ...
- Codeforces 961E 主席树
题意: 给出一个n个数的序列,求有几对(i,j)满足a[i]>=j&&a[j]>=i,(i,j)和(j,i)只能算一对. 考虑第i个数会有几个j(j<i)满足条件,首 ...
- andorid关于selector更换图片失效
写selector的xml文件时,需注意item的顺序,不带状态的item放在最后,否则selector无效 为按钮写了一个selector,一个正常状态,一个点击的状态,用了两张不同的图片.以求达到 ...
- 最小生成树之Prim算法--蓝白点思想
Prim算法: 以前一直不是很明白,Prim算法,今天就来终结一下. Prim算法采用与Dijkstra.Bellman-Ford算法一样的“蓝白点”思想:白点代表已经进入最小生成树的点,蓝点代表未进 ...
- 神勇的产品经理之路系列-10 PD三板斧
一.三板斧的来源及理解 三板斧 古代长兵器的一种,又名“马战斧”.相传为程咬金所用.斧阔五寸,柄长七尺.用法有劈.砍.剁.搂.截.撩.云.片.推.支等. 比喻义:解决问题的方法不多,但却非常管用. ...
- Linux下Git命令中文显示乱码的问题解决:274\232\350\256\256\346\200\273\347\273\223
使用git add添加要提交的文件的时候,如果文件名是中文,会显示形如274\232\350\256\256\346\200\273\347\273\223的乱码. 解决方案:在bash提示符下输入: ...
- Ubuntu 16.04通过NetworkManager(GUI)配置网桥
说明:配置好网桥之后一定要重启,不然不生效.这个是Desktop版GUI设置的问题.Server版不会. 配置: 参考: http://www.jb51.net/LINUXjishu/333778.h ...
- 1前端案例-tag标签+随机位置
tag标签随机位置+js数组随机+js添加一段html代码段 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- jQuery中的Ajax全局事件
Ajax全局事件 全局事件会在有ajax请求的情况下触发. 方法名称 说明 ajaxStart(callback) Ajax请求开始时执行的函数 ajaxStop(callback) Ajax请求结束 ...