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 相关文章推荐
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 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自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
Python获取网段内ping通IP的方法
2019/01/31 Python
python实发邮件实例详解
2019/11/11 Python
pytorch标签转onehot形式实例
2020/01/02 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
详解Canvas事件绑定
2018/06/27 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
竞争上岗演讲稿
2014/01/05 职场文书
音乐教学反思
2014/02/02 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
导游词之桂林山水
2019/09/20 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript