具体代码如下:

<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框里面增加一个图标的方式的更多相关文章

  1. bootstrap的两种在input框后面增加一个图标的方式

    第一种: <div class="input-group"> <div class="input-icon-group"> <di ...

  2. 解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题

    注册表单部分代码如下: <form id="registForm" class="form-horizontal" action="${page ...

  3. 记Bootstrap Table两种渲染方式

    这里主要区别两种Bootstrap Table的数据渲染方式,一.属性渲染方式,二.JS渲染方式 工作直接接手前人的,之前都直接在table标签上渲染属性,后面因为项目需要,同一页面的表格,需要申请不 ...

  4. bootstrap在input框中加入icon图标

    <form class="form-horizontal"> <div class="form-group has-feedback"> ...

  5. Delphi函数指针的两种定义(对象方法存在一个隐藏参数self,所以不能相互赋值)

    delphi中经常见到以下两种定义 Type TMouseProc = procedure (X,Y:integer); TMouseEvent = procedure (X,Y:integer) o ...

  6. 两种为wangEditor添加拖拽调整高度的方式:CSS3和jQuery UI

    wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...

  7. 关于键盘事件-查询:有多个input框,任意一个支持enter键查询

    应用场景:同一个界面有多个input框支持任意一个Enter查询. 实现:在input框中添加onkeypress="函数名()". 函数里面编写对应键盘code值,在里面直接调用 ...

  8. 测开之路一百零五:bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

  9. MVC两种获取上传的文件数据变量的方式

    第一种方式,在控制器中利用HttpPostedFileBase参数对象获取. [HttpPost] public ActionResult SaveFile(HttpPostedFileBase up ...

随机推荐

  1. 【大视野入门OJ】1083:数组的二分查找

    Description 在1500个整数中查整数x的位置,这些数已经从小到大排序了.若存在则输出其位置,若不存在则输出-1. Input 第一行,一个整数x 后面1500行,每行一个整数 Output ...

  2. response (响应对象)

    一.response响应过程 在去发送一个请求时, 会找到tomcat引擎 引擎会找到对应的web应用,并且会创建request对象和response对象 找到应用后, 会执行应用的web.xml再去 ...

  3. 【数据结构】The Falling Leaves(6-10)

    [UVA699]The Falling Leaves 算法入门经典第6章例题6-10(P159) 题目大意:有一颗二叉树,求水平位置的和. 试题分析:乱搞就可以过,将树根节点的pos记为0,向左-1, ...

  4. ZOJ 2589 Circles(平面图欧拉公式)

    [题目链接] http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2589 [题目大意] 给出一些圆,问这些圆可以把平面分为几个部 ...

  5. Mac电脑,Andorid studio 配置 Flutter

    1,下载flutter cd ~/Library/ git clone -b dev https://github.com/flutter/flutter.git 2,环境配置: 这里配置用户级别环境 ...

  6. Ubuntu下查看APT安装的软件安装路径和版本

    1.查询安装路径 dpkg -L 软件名 例如:dpkg -L gedit dpkg -L gedit /. /usr /usr/bin /usr/bin/gedit /usr/share /usr/ ...

  7. python多线程以及同步队列(转)

    转自:http://www.w3cschool.cc/python/python-multithreading.html 多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长 ...

  8. Phpstorm-svn配置

    参考网站; http://blog.csdn.net/Knight_quan/article/details/51889476 1 打开PhpStorm,找到工具  VCS—>Checkout ...

  9. HDU 3360 National Treasures(二分匹配,最小点覆盖)

    National Treasures Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  10. Linux操作系统下的常见系统资源共享

    转:http://www.360doc.com/content/07/0420/10/25127_457022.shtml linux下如何挂接(mount)光盘镜像文件.移动硬盘.U盘.Window ...