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. 使用异步HTTP提升客户端性能(HttpAsyncClient)

    使用异步HTTP提升客户端性能(HttpAsyncClient) 大家都知道,应用层的网络模型有同步.异步之分. 同步,意为着线程阻塞,只有等本次请求全部都完成了,才能进行下一次请求. 异步,好处是不 ...

  2. Android-IA Power Manager (S3)

    Sleep and wake up

  3. hdu4857 逃生 bestcoder round1 A

    题目要求要求在满足约束条件的情况下,使小的序号尽力靠前. 坑点就在这里.小的序号尽量靠前并非代表字典序,它要求多种情况时,先使1靠前(可能1仅仅能在第2或第3位 那么就要使它在第2位),其次2,3. ...

  4. Jquery 对话框确认

    $("#aa").click(function(){ if(confirm("是否继续")){ $(#aa).fadeOut(500); } })

  5. c# 通过解析mp3规范命名并上传服务器

    引用using Shell32; private void Open_Click(object sender, RoutedEventArgs e) { OpenFileDialog ofd = ne ...

  6. VS解决BEX错误但不能关闭DEP保存

    报道近期计划BEX错误: 问题签名: 问题事件名称: BEX 应用程序名: Auth.exe 应用程序版本号: 0.0.0.0 应用程序时间戳: 546d9e0c 故障模块名称: Auth.exe 故 ...

  7. Android asynctask使用

    继承asynctask,有三个參数 三个參数的含义是第一个表示输入參数.第二个为progress,表示当前的进度,第三个为doInbackground    返回值 须要一个參数传入url,返回一个r ...

  8. activity点击时各种方法的区别

    用到不同方法时候某些系统有不太一样的情况: public class MainActivity extends Activity { private static String TAG = " ...

  9. FusionCharts简单教程---建立第一个FusionCharts图形

    由于项目需求需要做一个报表,选择FusionCharts作为工具使用.由于以前没有接触过报表,网上也没有比较详细的fusionCharts教程,所以决定好好研究FusionCharts,同时做一个比较 ...

  10. SQLServer2014新功能

    随机存取存储器 OLTP:提供了内置在芯 SQL Server 数据库内存 OLTP 特征,为了显著提高事务数据库应用程序的速度和吞吐量.随机存取存储器 OLTP 它是包含在 SQL Server 2 ...