bootstrap输入框组代码分享
2016-06-07 10:03
686 查看
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输入框组代码分享,希望对大家有所帮助!
您可能感兴趣的文章:
- Bootstrap CSS组件之输入框组
- Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
- Bootstrap基本组件学习笔记之input输入框组(9)
- bootstrap下拉列表与输入框组结合的样式调整
- 使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
- Bootstrap3 input输入框插入glyphicon图标的方法
- bootstrap布局中input输入框右侧图标点击功能
- 基于Bootstrap重置输入框内容按钮插件
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
- bootstrap输入框组件使用方法详解
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- Firefox2中输入框丢失光标bug的解决方法
- 很可爱的输入框
- js限制输入框可输入字节数代码
- 学习使用PHP数组
- 基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
- Bootstrap教程JS插件弹出框学习笔记分享
- Bootstrap框架动态生成Web页面文章内目录的方法
- JS组件Bootstrap Table使用实例分享
- Bootstrap表单组件教程详解
- Bootstrap每天必学之前端开发框架
- Bootstrap 粘页脚效果
- JavaScript动态提示输入框输入字数的方法
- bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
- JS组件中bootstrap multiselect两大组件较量
- Bootstrap模仿起筷首页效果
- 基于Bootstrap的网页设计实例
- Bootstrap表格和栅格分页实例详解