<div class="container">
<div class="page-header"><h1>Bootstrap 3 input-spinner</h1></div>
<label for="sign_times" class="hr-label col-md-6"><span
class="required">*</span><span class="hr-span">签订次数</span> </label>
<div class="input-group spinner">
<input type="text" class="form-control" value="42">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
.spinner {
width: 100px;
}
.spinner input {
text-align: right;
}
.input-group-btn-vertical {
position: relative;
white-space: nowrap;
width: 1%;
vertical-align: middle;
display: table-cell;
}
.input-group-btn-vertical > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
padding: 8px;
margin-left: -1px;
position: relative;
border-radius:;
}
.input-group-btn-vertical > .btn:first-child {
border-top-right-radius: 4px;
}
.input-group-btn-vertical > .btn:last-child {
margin-top: -2px;
border-bottom-right-radius: 4px;
}
.input-group-btn-vertical i{
position: absolute;
top:;
left: 4px;
}
(function ($) {
$('.spinner .btn:first-of-type').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
});
$('.spinner .btn:last-of-type').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
});
})(jQuery);

jquery+bootstrap使用数字增减按钮的更多相关文章

  1. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  2. Bootstrap历练实例:按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

  3. bootstrap历练实例:按钮作为输入框组前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. Bootstrap历练实例:按钮组大小

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. jQuery+bootstrap实现有省略号的数据分页

    1.前言 在前端通过ajax请求数据后,可以通过bootstrap实现分页.由于bootstrap只提供分页的按钮的样式.数据分页我们需要实现页码跳转,上一页下一页,数据过多显示省略号,点击省略号能快 ...

  6. JQuery Mobile入门——设置后退按钮文字(转)

    http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28  CSDN博客原文  h ...

  7. html+css复习之第3篇 | jquery | bootstrap

    html+css复习之第3篇 | jquery  | bootstrap

  8. jquery只能输入数字方法

    本方法为验证文本框的输入内容,如果输入的是数字,则提示"√".否则提示“必填,且只能输入数字字符”.在线体验效果:http://keleyi.com/keleyi/phtml/zz ...

  9. jQuery制作go to top按钮

    转自:http://www.w3cplus.com/jquery/scrolling-to-the-top-with-jquery 每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人 ...

随机推荐

  1. 描述Linux运行级别的0-6的各自含义(计时1分钟)

    中文: 0:关机 1:单用户模式 2:无网络支持的多用户模式 3:有网络支持的多用户模式(文本模式,工作中最常使用的模式) 4:保留,未使用 5:有网络支持有X-Window支持的多用户模式 6:重新 ...

  2. MySQL字符集的修改和查看

    1.关于MySQL字符集 MySQL的字符集支持(Character Set Support)有两个方面: 字符集(Character set)和排序方式(Collation). MySQL对于字符集 ...

  3. margin-top无效的解决方法

    先上代码: <div id="content" style=" width:750px; height:300px; background:#C29A29; mar ...

  4. Book LIst

    Go ahead. Linux APUE Linux Kernel Development 鸟哥的linux私房菜 基础篇 鸟哥的linux私房菜 服务器篇 Network Computer Netw ...

  5. Vim 命令整理

    1. 文件命令 2. 模式切换 3. 移动命令 4. 书签命令 5. 修改命令 6. 可视化操作 7. 区域选择 8. 宏命令 9. 分屏 10. 系统设置命令 1. 文件命令 [:]开始的命令需要输 ...

  6. using关键字的用法

    1.using 关键字可以用来导命名空间,与java中的import类似. 2.using关键字可以用来释放资源,并且被释放的资源代码是非托管代码. 既然可以释放非托管代码,那么什么是非托管代码? 我 ...

  7. Google Play笔记之上架

    我最近负责Google Play上架的主要工作 ,现已进入开放测试阶段(随后就可全球首发~~).接入工作已完成,这篇记录一下上架后期的笔记. 开放测试 开放测试是指对所有玩家进行开放式测试,玩家可以通 ...

  8. stunnel+CCProxy,搭建加密代理

    总所周知,不可抗拒的特别有用心的原因,我们无法访问youtube,picasa,Twitter……国外优秀网站,很多人采用了代理服务器的方法访问. 如果您有一台放在海外的服务器,这个就好办了.下载一个 ...

  9. Visual Studio 2015 Community连接到Mysql

    版权声明:本文为博主原创文章,未经博主允许不得转载. 本文首发于CSDN:http://blog.csdn.net/cxq2046/article/details/51108256 至今暂未授权其他任 ...

  10. SqlHelper.cs

    public static class SqlHelper { public static object FromDbValue(object value) { if (value == DBNull ...