bootstrap输入框组代码分享


Posted in Javascript onJune 07, 2016

Bootstrap 支持的另一个特性,输入框组。输入框组扩展自 表单控件。使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

向输入域添加前缀和后缀的内容

<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="twitterhandle">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
</form>
</div>

复选框和单选插件作为输入框组的前缀或者后缀元素

<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>

按钮作为输入框组的前缀或者后缀元素

<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
Go!
</button>
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
Go!
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>
class="input-group-btn"
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default 
dropdown-toggle" data-toggle="dropdown">
下拉菜单 
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-music"></span> GO
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">下拉菜单标题</li>
<li><a href="#">A</a></li>
<li class="divider"><</li>
<li><a href="#">B</a></li>
</ul> 
</div>
<input type="text" class="form-control"> 
</div>
<br>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-music"></span> GO
</button> 
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">下拉菜单标题</li>
<li><a href="#">A</a></li>
<li class="divider"><</li>
<li><a href="#">B</a></li>
</ul> 
</div>
<input type="text" class="form-control"> 
</div>
<br>

以上所述是小编给大家介绍的bootstrap输入框组代码分享,希望对大家有所帮助!

Javascript 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
微信小程序实现轮播图指示器
Jun 25 Javascript
javascript 数组的定义和数组的长度
Jun 07 #Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 #Javascript
原生js三级联动的简单实现代码
Jun 07 #Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 #Javascript
模仿password输入框的实现代码
Jun 07 #Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 #Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 #Javascript
You might like
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
学生个人自我鉴定范文
2014/03/28 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
个人借款协议书范本
2014/11/17 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
Redis 常见使用场景
2021/08/30 Redis