bootstrap表单左右键添加或减少
时间: 2023-08-06 22:02:59 浏览: 76
要在Bootstrap表单中添加增加或减少按钮,可以使用Bootstrap的input group组件。以下是一个例子:
```html
<div class="form-group row">
<label for="inputQuantity" class="col-sm-2 col-form-label">Quantity</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" onclick="decrement()">-</button>
</div>
<input type="number" class="form-control" id="inputQuantity" value="1">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" onclick="increment()">+</button>
</div>
</div>
</div>
</div>
```
在这个例子中,我们使用了`input-group`类来创建一个输入组件。然后,我们在左侧使用了`input-group-prepend`类来创建一个输入组件的前置元素,即减少按钮。在减少按钮中,我们使用了`btn`和`btn-outline-secondary`类来创建一个Bootstrap按钮,并在`onclick`事件中调用了`decrement()`函数。这个函数将会在点击减少按钮时减少输入框中的值。
接下来,我们在中间使用了一个普通的输入框,用于输入数量。在右侧,我们使用了`input-group-append`类来创建一个输入组件的后置元素,即增加按钮。在增加按钮中,我们使用了`btn`和`btn-outline-secondary`类来创建一个Bootstrap按钮,并在`onclick`事件中调用了`increment()`函数。这个函数将会在点击增加按钮时增加输入框中的值。
你可以根据需要调整按钮和输入框的样式和功能,并编写相应的JavaScript函数来实现增加和减少的功能。
阅读全文