bootstrap如何通过加减按钮实现输入框组功能

Bootstrap提供了Input Group来扩展输入框的功能，通过添加小组件可实现一些常见的输入框扩展功能，例如带图标的输入框、带按钮的输入框等。

其中，带按钮的输入框可以通过加减按钮实现输入框组功能。下面我们来看一下如何实现。

首先，我们需要在 input-group-addon 组件中添加两个按钮，一个是加号按钮，另一个是减号按钮。代码如下：

<div class="input-group">
  <span class="input-group-addon minus">-</span>
  <input type="text" class="form-control" placeholder="0">
  <span class="input-group-addon plus">+</span>
</div>

这里，我们用了Bootstrap提供的input-group组件来包裹加减按钮和输入框，使它们作为一个整体来显示。

我们添加了两个span元素，分别作为加号按钮和减号按钮，它们的class分别为plus和minus。我们可以自定义这些class来设置按钮的样式。

接着，我们需要使用jQuery来实现加减按钮的功能。我们可以使用click()方法来监听按钮的点击事件，并通过val()方法来获取当前输入框的值。

具体来说，当点击加号按钮时，我们先获取当前输入框的值，然后将它加1后再赋值回去。当点击减号按钮时，我们同样获取当前输入框的值，然后将它减1后再赋值回去。这里需要注意，我们需要对输入框的值进行一些校验，确保它是一个合法的数字。

代码如下：

$(function(){
  $('.input-group-addon').on('click', function(){
    var $button = $(this);
    var oldValue = $button.parent().find('input').val();
    if ($button.hasClass('plus')) {
      var newVal = parseFloat(oldValue) + 1;
    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
      } else {
        newVal = 0;
      }
    }
    $button.parent().find('input').val(newVal);
  });
});

这里我们使用了jQuery的on()方法来监听点击事件，将所有的input-group-addon元素作为监听对象。然后我们通过hasClass()方法来判断是加号按钮还是减号按钮被点击了。

在上述代码中，我们也加入了一些校验逻辑，保证输入框的值不会小于0。

最后，我们还可以通过CSS来自定义加减按钮的样式，例如改变背景颜色、修改文字颜色等。例如：

.input-group-addon {
  background-color: #eee;
  border-color: #ccc;
  color: #555;
}

.input-group-addon:hover {
  background-color: #ccc;
  border-color: #aaa;
  color: #333;
}

这样，我们就完成了通过加减按钮实现输入框组的功能。通过这种方式，我们能够将加减按钮和输入框组成一个整体，并使用户更加方便地输入和操作数据。