怎么用Bootstrap 写出加减的符号

Posted 2023-05-11

左右加减数字

像京东提交订单时目前使用的是左右加减数字的效果，这个效果直接明了，操作简单。我们使用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，那么直接就可以调用它了。 参考技术A 代码如下:
< 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，那么直接就可以调用它了。 参考技术B <div class="row">
 <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>

参考技术C <div class="row">
 <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>

祝你成功

参考技术D <i class="glyphicon glyphicon-plus"></i>

如何让input number类型的标签不产生上下加减的按钮

之前用 input type="number" 来放数字框，发现有个上下加减的东西，感觉不太好

这个容易出现0 然后减为负数

这种情况下怎么去掉右边的那个上下加减的小按钮呢？前端同事告诉我加一点css就行了

<style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
    }
</style>

果然这样一加，就没有了。