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 ...
随机推荐
- poj 2940
Wine Trading in Gergovia Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3187 Accepte ...
- 【BZOJ 3166】【HEOI 2013】Alo
http://www.lydsy.com/JudgeOnline/problem.php?id=3166 这道题难点在于求能对一个次大值有贡献的区间. 设这个次大值为\(a_i\),\(a_i\)左边 ...
- noip 2016 day1 T1玩具谜题
题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业. 有一天, 这些玩具小人把小南的眼镜藏了起来. 小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的面朝圈外.如下图: 这时singer告诉 ...
- 【数论】【中国剩余定理】【LCM】hdu1788 Chinese remainder theorem again
根据题目容易得到N%Mi=Mi-a. 那么可得N%Mi+a=Mi. 两侧同时对Mi取余,可得(N+a)%Mi=0. 将N+a看成一个变量,就可以把原问题转化成求Mi的LCM,最后减去a即可. #inc ...
- SpringBoot整合Mybatis多数据源 (AOP+注解)
SpringBoot整合Mybatis多数据源 (AOP+注解) 1.pom.xml文件(开发用的JDK 10) <?xml version="1.0" encoding=& ...
- express路由和中间件
路由 简单来说,express路由就是用来处理一些请求,响应一些url地址. var express = require('express'); var app = express(); app.ge ...
- codevs 1959 拔河比赛--判断背包内刚好装满n/2个物品
1959 拔河比赛 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 一个学校举行拔河比赛,所有的 ...
- Android:导入工程
File->new->Project->android->Android Project from Existing code 在Root Directory:中填写Andro ...
- Ubuntu下查看APT安装的软件安装路径和版本
1.查询安装路径 dpkg -L 软件名 例如:dpkg -L gedit dpkg -L gedit /. /usr /usr/bin /usr/bin/gedit /usr/share /usr/ ...
- PostgreSQL配置文件--AUTOVACUUM参数
8 AUTOVACUUM参数 AUTOVACUUM PARAMETERS 8.1 autovacuum 字符型 默认: autovacuum = on Enable autovacuum subpro ...