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. Android之查看外部依赖jar的源代码_android private libralies does not allow modifications to source

    在Eclipse中开发android的应用程序时,有时想查看函数的内部实现.可是当在函数上点击ctrl和鼠标左键的时候. 往往出现例如以下提示: Class File Editor Source no ...

  2. JAVA 保留两位小数的四种方法

    import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberFormat; publiccl ...

  3. My97 DatePicker

    支持日期以及时分秒的选择, 国人开发, 还不错! 官网: http://www.my97.net/

  4. 对于Web开发来说 8 个最好的跨平台编辑器

    1) Best Cross Platform IDE - Brackets Brackets是一个在前端Web开发和设计人员中最流行的开放源代码IDE/代码编辑器之中的一个.它拥有一些有用工具可以将H ...

  5. jenkins集群加入Windows 2012 server作为slave

    必须安装.net framework 3.5, 參考: http://technet.microsoft.com/en-us/library/dn482071.aspx 不要在windows 2012 ...

  6. 优化移动设备上SharePoint 2013网站

    优化移动设备上SharePoint 2013网站 本文由SPFarmer翻译自Waldek Mastykarz的文章 移动市场在持续的增长.在不远的将来,使用移动设备浏览站点将会超过电脑.为了保证用户 ...

  7. mongodb笔记2

    成功启动MongoDB后,再打开一个命令行窗口输入mongo,就可以进行数据库的一些操作. 输入help可以看到基本操作命令: show dbs:显示数据库列表 show collections:显示 ...

  8. C++习题 对象转换

    [Submit][Status][Web Board] Description 定义一个Teacher(教师)类(教师号,姓名,性别,薪金)和一个Student(学生)类(学号,姓名,性别,成绩),二 ...

  9. Java面试题集(136-150)

    摘要:目,尽管仅仅有15道题目.可是包括的信息量还是非常大的,非常多题目背后的解题思路和算法是非常值得玩味的. 136.给出以下的二叉树先序.中序.后序遍历的序列? 答:先序序列:ABDEGHCF.中 ...

  10. 【转】Android Web Server

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://vaero.blog.51cto.com/4350852/1188602 Andr ...