怎么用Bootstrap 写出加减的符号
发布网友
发布时间：2022-04-26 17:58
共5个回答
热心网友
时间：2022-05-15 11:44
像京东提交订单时目前使用的是左右加减数字的效果，这个效果直接明了，操作简单。我们使用jquery.spinner.js插件实现左右加减数字，调用方法非常简单。
复制代码 代码如下:
<input type="text" class="spinner"/>
调用也非常简单，先载入jquery库文件和jquery.spinner.js，然后使用以下代码：
复制代码 代码如下:
$('.spinner').spinner();
Bootstrap风格，右侧加减
Bootstrap火了很久了，基于bootstrap风格的各类应用也非常多，下面给大家介绍一个基于bootstrap的数字加减插件，可以设置最小值、最大值、递增递减（步长值），可手动输入数字。
复制代码 代码如下:
<div class="input-group spinner" data-trigger="spinner" id="spinner">
<input type="text" class="form-control" value="1" data-max="10" data-min="1" data-step="1">
<div class="input-group-addon">
<a href="javascript：;" class="spin-up" data-spin="up"><i class="icon-sort-up"></i></a>
<a href="javascript：;" class="spin-down" data-spin="down"><i class="icon-sort-down"></i></a>
</div>
</div>
将bootstrap相关css和js文件载入后，便可直接看到页面效果，如果你的项目基于bootstrap，那么直接就可以调用它了。
热心网友
时间：2022-05-15 13:02
< div class="input-group spinner" data-trigger="spinner" id="spinner">
<input type="text" class="form-control" value="1" data-max="10" data-min="1" data-step="1">
<div class="input-group-addon">
<a href="javascript：;" class="spin-up" data-spin="up"><i class="icon-sort-up"></i></a>
<a href="javascript：;" class="spin-down" data-spin="down"><i class="icon-sort-down"></i></a>
</div>
< /div>
将bootstrap相关css和js文件载入后，便可直接看到页面效果，如果项目基于bootstrap，那么直接就可以调用它了。
热心网友
时间：2022-05-15 14:37
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">-</button>
</span>
<input type="text" class="form-control" placeholder="2">
<span class="input-group-btn">
<button class="btn btn-default" type="button">+</button>
</span>
</div>
</div>
</div>
热心网友
时间：2022-05-15 16:28
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">-</button>
</span>
<input type="text" class="form-control" placeholder="2">
<span class="input-group-btn">
<button class="btn btn-default" type="button">+</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
祝你成功
热心网友
时间：2022-05-15 18:36
