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-非常好用但是容易让人忽略的地方【5】:input-group-btn的更多相关文章

  1. boostrap-非常好用但是容易让人忽略的地方------input-group-btn

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

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

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

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

    代码 显示结果 代码 结果

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

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

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

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

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

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

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

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

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

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

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

    代码 显示结果 代码 结果

随机推荐

  1. JAVA高级特性--自动拆箱-装箱,枚举类型

    基本数据类型转换为引用类型对象 一个自动装箱的例子 Integer i=10; 相当于 Integer i=new Integer(10); 一个自动拆箱的例子 Integer m=10; int n ...

  2. MyBatis映射文件的基本功能

    #{}与${}区别 "#{}"使用的是preparedStatement方式预处理,就是使用了占位符来填充数据防止SQL注入. ${}使用的是statement方式进行sql语句的 ...

  3. python if elif else 区别

    if data_ori=='医疗': # 医疗 df = pd.read_excel(path_apply + 'apply/YS_ZY_HZSQ_样例.xls', encoding='gbk', e ...

  4. python 数据集变量的数据类型总结

  5. js+canvas制作前端验证码

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. jQuery仿迅雷图片轮换效果

    jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  7. 百度小程序富文本bdParse遇到的坑

    百度开发工具能正常显示文章图文详情, web浏览也可以, app浏览就不行, 审核说兼容性问题, 都不是, 后来发现是后台传输的数据问题, 不能用json_encode()返回数据

  8. Flex AIR应用GPS定位功能(Android和IOS)

    说明: 使用AIR进行GPS定位功能实现时,会经常判断GPS是否打开.一般的官方或者书上的介绍的方法,测试后,只能对Android系统进行判断,而对ios系统则无法进行判断. 经过研究测试,终于解决实 ...

  9. joinColumns和inverseJoinColumns的用法

    最近在工作中使用springside,里面用到了hibernate的多对多 一开始我在配置department(部门表)和menu(栏目表)的时候,这样写的. Department实体类中的getMe ...

  10. @ENABLEWEBSECURITY和@ENABLEWEBMVCSECURITY有什么区别?

    @EnableWebSecurity和@EnableWebMvcSecurity有什么区别? @EnableWebSecurity JavaDoc文档: 将此注释添加到@Configuration类中 ...