bootstrap输入框组代码分享

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输入框组代码分享,希望对大家有所帮助!

(0)

相关推荐

  • bootstrap下拉列表与输入框组结合的样式调整

    输入框组默认是div.input-group 已知可在input表单元素前后加入两类元素[分别是文本和按钮]如下所示: div.input-group-addon{文字或符号} input.form-control div.input-group-btn 其中按钮还可嵌套下拉菜单(包括分裂式下拉菜单) 一.基本用法如下: <div class="input-group"> <span class="input-group-addon">@&l

  • bootstrap布局中input输入框右侧图标点击功能

    使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标,如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的: 那么问题来了,怎样让这些小图标能够获得点击事件呢? 我也不知道,但是可以用一种迂回的方式,来间接的实现该功能. ***重点来了: 解决方案:在小图标的位置上,添加一个看不见的元素,元素的大小正好将小图标覆盖,但是没有背景颜色和边框:相当于给小图标盖了一个透明的被子: 复制代码 代码如下: <di

  • Bootstrap基本组件学习笔记之input输入框组(9)

    使用input输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

  • Bootstrap3 input输入框插入glyphicon图标的方法

    bootstrap3如何在input输入框插入glyphicon图标呢?插入图标看起来比较醒目,满足用户体验价值观,此功能应用于各大网站. 怎么把图标放在输入框的开头?? <div class="form-group has-feedback"> <label class="col-md-2 control-label" for="username">用户名</label> <div class=&quo

  • 使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法

    根据网上查找到的 typeahead使用方法,到最后一步时就出错,数据能从数据库读取出来,但在输入框显示提示时,全都显为:underfined.捉摸了半天都发现不了问题出在哪儿.后来在http://blog.64cm.com/post/2014/08/13/%E4%BD%BF%E7%94%A8bootstrap-typeahead%E6%8F%92%E4%BB%B6 上不经意发现这么一句话:"在当前版本的typeahead中,已经不再支持在source属性中直接调用ajax方法获取数据源了.&q

  • 基于Bootstrap重置输入框内容按钮插件

    当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可.  text  password  email  url  search  tel  number  datetime 使用方法 使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件. <link rel="stylesheet" href="https://maxcdn.boo

  • 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除

    本文实例为大家分享使用jQuery实现输入框组input-group的添加与删除操作,供大家参考,具体内容如下 注意这里要求使用到Bootstrap框架的输入框组,如: <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <in

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

    本文实例为大家分享了bootstrap输入框组的具体使用方法,供大家参考,具体内容如下 1.基本用法 我们有时需要在输入框一侧或两侧添加额外的元素 这个时候只需要把所有元素都包裹在一个.input-group的div里面就可以 但是每个输入框组只能有一个input <div class="input-group"> <span class="input-group-addon">@</span> <input type=&q

  • Bootstrap CSS组件之输入框组

    本文实例为大家分享了Bootstrap输入框组的具体代码,供大家参考,具体内容如下 了解table-cell的表格width设置为1%的原因. http://www.tuicool.com/articles/VzUVfyi 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如,您可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素. input-group(input-group-xs,input-group-sm,input-gr

  • Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法

    Bootstrap 弹出框modal上层的输入框不能获得焦点问题,具体内容如下 1.在使用Bootstrap框架中目前modal弹出框只支持一层 即在当前弹出框上不能再使用modal弹出框. 如果使用自定义的弹出框,例如:http://my.oschina.net/tianma3798/blog/737232 如果自定义弹出框中有input输入框,如果input 输入框不能获得焦点,则可能原因如下: 许多使用定义弹出层 <div class="modal fade" tabind

随机推荐