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 ...
随机推荐
- 【BZOJ 2212】【POI 2011】Tree Rotations
http://www.lydsy.com/JudgeOnline/problem.php?id=2212 自下而上贪心. 需要用权值线段树来记录一个权值区间内的出现次数. 合并线段树时统计逆序对的信息 ...
- 2017icpc 乌鲁木齐网络赛
A .Banana Bananas are the favoured food of monkeys. In the forest, there is a Banana Company that pr ...
- Java高级架构师(一)第35节:Nginx的Location区段
没有修饰符 表示:必须以指定模式开始. 表示/abc下的所有内容都可以被访问. = 表示与指定的模式精确匹配,可以带参数. 实例中要求区分大小写,并以c结尾. 实例中指定的正则表达式不区分大小写. 注 ...
- Android应用程序的解析
一: 文件架构 二: 图片,语音资源的使用 图片的两种使用方法: 第一种: 使用imageView控件 <ImageView android:id="@+id/imageView1&q ...
- IIS_右键点击浏览网站没有反应
现象: 点击浏览不会打开浏览器,没有任何反应 解决方法: 将IE设为默认浏览器即可
- appium+python自动化47-首次打开app权限弹窗问题
前言 用真机运行appium代码,首次打开app有的手机会出现权限弹窗问题,一般这种弹窗都是在引导页前面或者引导页后面出现.权限弹窗上面的按钮都是固定的, 只需要定位到"始终允许" ...
- AS3.0 效率优化
1.显示对象:1.1.静态的不需互动的图形,使用Shape对象.(eg:getSize(newShape())=236) 1.2.不需要时间轴的互动图形,使用Sprite对象.(eg:getSize( ...
- 查看Ubuntu服务器的版本信息
第一种: uname -a 第二种: cat/etc/issue 第三种: lsb_release -a 这个查看的信息更加详细 使用命令:cat /proc/version 查看 proc目录下记录 ...
- 使用SQL Server 扩展事件来创建死锁的跟踪
我们通过SQL Server 2014图形界面来部署一个扩展事件跟踪会话.然后可以生成SQL脚本. 步骤如下: 步骤1: 通过“对象资源管理器”连接到实例,展开“管理”.“扩展事件”.“会话”. 步骤 ...
- WCF和Socket
WCF的全称是:Windows Communication Foundation.它是建立在Web Service架构上的一个全新的通信平台.它使用相同的基础结构和 API 来创建应用程序,这些应用程 ...