1.正常的使用

    <div class="form-group">
<div class="input-group">
<input class="form-control" type="text" placeholder="1000">
<div class="input-group-addon">人民币</div>
     </div>
</div>

效果

2.特殊使用(两个控件合并成一个)

<div class="form-group">
<div class="input-group">
  <div class="input-group-btn">
          <select class="form-control" style="width: 110px;">
            <option>http://</option>
            <option>https://</option>
          </select>
        </div>
  <input class="form-control" type="email" placeholder="www.baidu.com">
</div>
</div>

 效果

  

boostrap-非常好用但是容易让人忽略的地方------input-group-btn的更多相关文章

  1. boostrap-非常好用但是容易让人忽略的地方------Font Awesome

    font-awesome基本用法 官方代码传送门 font-awesome在bootstrap中的特殊用法(这个才是重点) 要点归纳1(官方) 官方代码传送门 要点归纳2(我的) <a href ...

  2. boostrap-非常好用但是容易让人忽略的地方------clearfix

    代码 显示结果 代码 结果

  3. boostrap-非常好用但是容易让人忽略的地方------row

    row是非常好用但是却非常容易忽略的地方. 想实现内部元素相对父级的padding=0,则在父子中间加个row.如下图 列嵌套也是同样的道理 经验之谈:学会row的用法,在手机版布局的时候会很方便,否 ...

  4. boostrap-非常好用但是容易让人忽略的地方------modal

    使用bootstrap框架好久了,在开发中也用到了或者遇到了很多的问题,所以跟大家分享一下 bootstrap modal 组件的样式 .modal-lg .modal-sm 说明:这个是bootst ...

  5. boostrap-非常好用但是容易让人忽略的地方【7】:list-unstyled list-inline

    无样式列表 list-unstyled:去掉ul的默认样式 内联列表 list-inline:将ul子元素放置于同一行

  6. boostrap-非常好用但是容易让人忽略的地方【6】:role属性

    普通样式,鼠标hover没有任何效果 <span>content</span> 加上role属性的样式,鼠标hover会有cursor:pointer的效果 <span ...

  7. boostrap-非常好用但是容易让人忽略的地方【5】:input-group-btn

    1.正常的使用 <div class="form-group"> <div class="input-group"> <input ...

  8. boostrap-非常好用但是容易让人忽略的地方【4】:Font Awesome

    font-awesome基本用法 官方代码传送门 font-awesome在bootstrap中的特殊用法(这个才是重点) 要点归纳1(官方) 官方代码传送门 要点归纳2(我的) <a href ...

  9. boostrap-非常好用但是容易让人忽略的地方【3】:clearfix

    代码 显示结果 代码 结果

随机推荐

  1. JAVA的class打包成dll

    一.将已经编译后的java中Class文件进行打包:打包命令JAR 如:将某目录下的所有class文件夹全部进行打包处理: 使用的命令:jar cvf test.jar -C com/ . //注意这 ...

  2. ASP.NET 成员资格 Part.2(使用安全控件 Login)

    原文:ASP.NET 成员资格 Part.2(使用安全控件 Login)        准备好提供程序以及用户信息的存储,就可以开始构建验证用户.注册用户或者让用户能够重置密码的用户界面了.ASP.N ...

  3. Microsoft Build 2016

    Microsoft Build 2016 Day 1 记录   去年今日:Microsoft Build 2015 汇总 今年的 Bulid 时间是 3.30-4.1,第一天的主角主要是 Window ...

  4. html中返回上一页

    <a href="<a href="javascript :history.back(-1)">返回上一页</a>或<a href=& ...

  5. CENTOS安装部署zabbix

    果学网 -专注IT在线www.prismcollege.com 參考原文:http://www.showerlee.com/archives/13 RHCE过的EMAIL已经下来.所以近期闲了就准备把 ...

  6. Ext4功能和文件系统的简单功能

    Linux kernel 自 2.6.28 開始正式支持新的文件系统 Ext4. Ext4 是 Ext3 的改进版,改动了 Ext3 中部分重要的数据结构,而不只像 Ext3 对 Ext2 那样,不过 ...

  7. HDU 1201

    18岁生日 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  8. Swift正在使用NSURLConnection异步下载同步(实例解析)

    原版的blog.转载请注明出处 http://blog.csdn.net/hello_hwc 一.同步异步两个概念 简单来讲.同步就是函数或者闭包(objective c中的block)运行完成才干返 ...

  9. C/C++大型项目错误管理

    在C/C++大型项目中,错误管理在项目中起着举足轻重的作用,以我自己的项目经验以及观摩其它项目,错误管理对项目框架以及开发效率有着非常大的影响.对于错误管理的认识大致分为三类: 刚刚開始敲代码的新手, ...

  10. Android源码文件夹结构

    Android 2.2 |-- Makefile |-- bionic               (bionic C库) |-- bootable            (启动引导相关代码) |-- ...