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 ...
随机推荐
- Python开发基础-Day20继承实现原理、子类调用父类的方法、封装
继承实现原理 python中的类可以同时继承多个父类,继承的顺序有两种:深度优先和广度优先. 一般来讲,经典类在多继承的情况下会按照深度优先的方式查找,新式类会按照广度优先的方式查找 示例解析: 没有 ...
- [NOI2016]循环之美(杜教筛)
首先要求每个数互不相等,故有$x\perp y$. 可以发现$\frac{x}{y}$在$k$进制下为纯循环小数的充要条件为$x\cdot k^{len}\equiv x(mod\ y)$,即$y\p ...
- 2017 ACM-ICPC ECFINAL过山车体验
这次采用domjudge判题,算是比较好玩的啦.外榜地址:http://board.acmicpc.cn/ 然后我们很可惜地止步于192名QAQ,没看出C是个傻逼题,没读懂B..我得背锅,亏我还打了那 ...
- BZOJ 1109 [POI2007]堆积木Klo(树状数组)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1109 [题目大意] Mary在她的生日礼物中有一些积木.那些积木都是相同大小的立方体. ...
- bzoj 3790: 神奇项链
3790: 神奇项链 Description 母亲节就要到了,小 H 准备送给她一个特殊的项链.这个项链可以看作一个用小写字 母组成的字符串,每个小写字母表示一种颜色.为了制作这个项链,小 H 购买了 ...
- [转]SpringMVC入门
目录 介绍 实例 总结 参考资料 介绍 SpringMVC是一款Web MVC框架. 它跟Struts框架类似,是目前主流的Web MVC框架之一. 本文通过实例来介绍SpringMVC的入门知识. ...
- 十大流行linux
你可曾知道Linux的魅力或威力来自哪里?那就是,由于众多发行版百花齐放,Linux的阵营日益壮大,每一款发行版都拥有一大批用户,开发者自愿为相关项目投入精力.Linux发行版可谓是形形色色,它们旨在 ...
- java ArrayList源码分析(转载)
1.ArrayList是一个相对来说比较简单的数据结构,最重要的一点就是它的自动扩容,可以认为就是我们常说的“动态数组”. 来看一段简单的代码: 12345 ArrayList<String&g ...
- Jenkins和Docker以及Kubernetes结合考虑
今天搞了一下Jenkins和Docker的结合,我在想几个问题: 构建是经常的,构建最大的目标还是生成一个包或者应用 发布应用也是频繁的,发布本质上是把这个包放到可运行的环境中便于测试 如果每次构建我 ...
- Git 学习(一)简介及安装
Git 简介及安装 Git是目前世界上最先进的分布式版本控制系统(没有之一).它的诞生也颇具传奇,Linux创始人Linus花了两周时间自己用C写了一个分布式版本控制系统,这就是Git!有兴趣的话,可 ...