bootstrap输入框组件使用方法详解

本文实例为大家分享了bootstrap输入框组的具体使用方法，供大家参考，具体内容如下

1、基本用法

我们有时需要在输入框一侧或两侧添加额外的元素
这个时候只需要把所有元素都包裹在一个.input-group的div里面就可以
但是每个输入框组只能有一个input

<div class="input-group">
 <span class="input-group-addon">@</span>
 <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
 <input type="text" class="form-control">
 <span class="input-group-addon">.00</span>
</div>

<div class="input-group">
 <span class="input-group-addon">$</span>
 <input type="text" class="form-control">
 <span class="input-group-addon">.00</span>
</div>

2、尺寸

给最外层的.input-group添加.input-group-lg.input-group-sm.input-group-xs
就可以实现输入框组的大小变化

<div class="input-group input-group-lg">
 <span class="input-group-addon">@</span>
 <input type="text" class="form-control" placeholder="Username">
</div>

3、单选框作为额外元素

只需要把span里面的文字替换成对应的radio就可以了

<div class="input-group">
 <span class="input-group-addon">
  <input type="radio"/> 
 </span>
 <input type="text" class="form-control"/>
</div>

4、多选框作为额外元素

只需要把span里面的文字替换成对应的checkbox就可以了

<div class="input-group">
 <span class="input-group-addon">
  <input type="checkbox">
 </span>
 <input type="text" class="form-control">
</div>

5、按钮作为额外元素

span的类不再是.input-group-addon，变成.input-group-btn
span里面的文字替换成button就可以了

<div class="input-group">
 <span class="input-group-btn">
  <button type="button" class="btn btn-default">Go</button>
 </span>
 <input type="text" class="form-control" />
</div>

6、下拉式菜单作为额外元素

把对应的span替换成下拉式菜单，同时修改下拉式菜单最外层的类
不是.dropdown或者.btn-group，而是.input-group-btn

<div class="input-group">
 <div class="input-group-btn">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  Action 
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a href="#">Separated link</a></li>
 </ul>
 </div>
 <input type="text" class="form-control">
</div>

<div class="input-group">
 <div class="input-group-btn">
 <button type="button" class="btn btn-default">Action</button>
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a href="#">Separated link</a></li>
 </ul>
 </div>
 <input type="text" class="form-control">
</div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# bootstrap  # 输入框  # 组件  # 学习使用Bootstrap输入框、导航、分页等常用组件  # Bootstrap输入框组件简单实现代码  # Bootstrap CSS组件之输入框组  # Bootstrap基本组件学习笔记之input输入框组(9)  # Bootstrap3 input输入框插入glyphicon图标的方法  # bootstrap下拉列表与输入框组结合的样式调整  # bootstrap布局中input输入框右侧图标点击功能  # 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除  # BootStrap点击下拉菜单项后显示一个新的输入框实现代码  # Bootstrap输入框组件使用详解  # 就可以  # 只需  # 要把  # 替换成  # 最外层  # 要在  # 这个时候  # 大家分享  # 具体内容  # 大家多多  # 多选  # 有一个  # 时需  # 单选框  # div  # role  # style  # text  # class 

相关文章： 建站主机是否等同于虚拟主机？  宝华建站服务条款解析：五站合一功能与SEO优化设置指南  制作假网页,招聘网的薪资待遇，会有靠谱的吗？一面试又各种折扣？  常州自助建站：操作简便模板丰富，企业个人快速搭建网站  如何在景安服务器上快速搭建个人网站？  如何用VPS主机快速搭建个人网站？  完全自定义免费建站平台：主题模板在线生成一站式服务  清除minerd进程的简单方法  css网站制作参考文献有哪些,易聊怎么注册？  再谈Python中的字符串与字符编码（推荐）  如何快速生成凡客建站的专业级图册？  婚礼视频制作网站,学习*后期制作的网站有哪些？  建站主机类型有哪些？如何正确选型  网站网页制作专业公司,怎样制作自己的网页？  如何高效完成独享虚拟主机建站？  网站设计制作企业有哪些,抖音官网主页怎么设置？  如何选择建站程序？包含哪些必备功能与类型？  宝塔新建站点报错如何解决？  如何在IIS7中新建站点？详细步骤解析  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  专业网站建设制作报价,网页设计制作要考什么证？  大连网站制作公司哪家好一点,大连买房网站哪个好？  设计网站制作公司有哪些,制作网页教程？  建站之家VIP精选网站模板与SEO优化教程整合指南  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  山东网站制作公司有哪些,山东大源集团官网？  如何快速重置建站主机并恢复默认配置？  如何快速搭建安全的FTP站点？  c++怎么实现高并发下的无锁队列_c++ std::atomic原子变量与CAS操作【详解】  早安海报制作网站推荐大全,企业早安海报怎么每天更换？  招贴海报怎么做,什么是海报招贴？  如何通过虚拟主机空间快速建站？  如何做静态网页,sublimetext3.0制作静态网页？  网站制作哪家好,cc、.co、.cm哪个域名更适合做网站？  建站之星安装路径如何正确选择及配置？  小型网站建站如何选择虚拟主机？  Java解压缩zip - 解压缩多个文件或文件夹实例  如何制作一个表白网站视频,关于勇敢表白的小标题？  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  如何在建站宝盒中设置产品搜索功能？  保定网站制作方案定制,保定招聘的渠道有哪些？找工作的人一般都去哪里看招聘信息？  个人网站制作流程图片大全,个人网站如何注销？  已有域名能否直接搭建网站？  如何在Golang中使用replace替换模块_指定本地或远程路径  百度网页制作网站有哪些,谁能告诉我百度网站是怎么联系？  佛山企业网站制作公司有哪些,沟通100网上服务官网？  SAX解析器是什么，它与DOM在处理大型XML文件时有何不同？  如何用腾讯建站主机快速创建免费网站？  定制建站如何定义？其核心优势是什么？  建站168自助建站系统：快速模板定制与SEO优化指南