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. 强制去除xcode的编译警告

    使用 #pragma clang diagnostic ignored 语法来强制去除xcode的编译警告,代码举例如下: #pragma clang diagnostic push #pragma ...

  2. 巨蟒python全栈开发-第11阶段 ansible3_1入门四个模块command&shell&script&copy

    大纲 1.系统安装与机器克隆 2.ansible介绍和host-pattern格式 3.command模块 4.shell模块 5.script模块 6.copy模块

  3. python基础---字符串常用方法汇总

    s3 = '123's2 = ' 's1 = 'This Is \t Cash's='abcdefghijklmnopqrstuvwxyz's4 = "0000000this is stri ...

  4. HDU 5672 String【尺取法】

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5672 题意: 有一个10≤长度≤1,000,000的字符串,仅由小写字母构成.求有多少个子串,包含有 ...

  5. 2019-2-3-VisualStudio-扩展开发-添加输出窗口

    title author date CreateTime categories VisualStudio 扩展开发 添加输出窗口 lindexi 2019-02-03 11:41:40 +0800 2 ...

  6. springboot&mybatis 增删改查系列(一)

    创建父项目 首先,我们需要创建一个Maven项目. 在这个项目的pom文件中加入以下几个依赖: <!-- spring boot --> <parent> <groupI ...

  7. CODE FESTIVAL 2017 qual B D 101 to 010(dp)

    除非人品好,能碰巧想到思路,否则基本是做不出来dp的,除了那几个经典的dp模型.. 看了几个前几名的代码,还是t神的代码比较清晰.膜tourist 代码的思路和题解思路基本一致..... #inclu ...

  8. array_map 用法

    array_map - 将回调函数作用到数组中的每一个元素上 function add2($value) { return $value + 2; } $arr = array(1, 2, 3, 4, ...

  9. gradle在build的时候找不到某个jar包的解决办法

    前几天公司来新人, 我给他装项目环境的时候遇到一个问题, 在执行gradle build时遇到一系列的错误, 我一个个分析并解决了, 特此记录, 以供他人参考. 一, 首先遇到了找不到spring-b ...

  10. 前端开发之BOM和DOM(转载)

    BOM BOM:是指浏览器对象模型,它使JavaScript可以和浏览器进行交互. 1,navigator对象:浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息. naviga ...