bootstrap的两种在input框里面增加一个图标的方式
2017-03-14 10:39
387 查看
具体代码如下:
效果如下:
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”。
<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框后面增加一个图标的方式
- 有一个Map集合里面存储的是学生的姓名和年龄,内容如下{赵四=21,王二=17,张三=18,小丫=25,李四=26,王五=38}(15分) * a.将里面的元素用两种遍历方式打印到控制台上 *
- 使用font-awesome 在input框中增加一个图标
- 0324的学习笔记----里面最重要的就是一个tom猫的动画,和涉及到的内存问题(创建imageview的两种方式,imagenamed就会形成缓存,占用很多内
- 一个form表单需要多个提交按钮的实现 (两种方式)
- 采用new运算符创建一个指向二维数组的指针的两种方式
- 借用一个程序 来说明 多线程 和单态 以及 对象在两种情况下的存储方式。
- 加载图标的两种方式
- Watir 截图两种方式,保存截图到PPT里面
- 用 公平的算法 把一个数组打乱(两种实现方式)
- 以下代码实现了在“我的电脑”里面添加一个图标
- 如何在wince控制面板增加一个响应指定程序的图标——转载
- 在新建Word文档后,复制某处的文字,并在新的WORD里面粘贴,出现一个图标:m2(m平方)!【解决办法】
- 两种方式实现SQLite 主键自动增加
- 两种方式 用 ArCGIS API for Silverlight增加标注
- day16Map集合,map集合的两种取出方式。map里面有集合类,map扩展。
- 一个链接按两种方式打开两个网址的方法
- 【开源】QuickPager ASP.NET2.0分页控件V2.0.0.7 增加了一个js函数的分页方式。
- Windows Mobile下在开始菜单增加应用程序快捷方式的两种办法
- 两有序链表合并为一个--递归与非递归两种方式