在Bootstrap 3中添加字形图标加减函数,可以通过以下步骤实现:
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
这里使用了BootCDN提供的CDN链接,确保可以正常加载Bootstrap和字形图标的样式。
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="minus-btn"><i class="fa fa-minus"></i></button>
</span>
<input type="text" class="form-control" id="quantity" value="1">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="plus-btn"><i class="fa fa-plus"></i></button>
</span>
</div>
上述代码中,使用了Bootstrap的input-group和input-group-btn类来创建一个输入框组合,左右两侧分别放置了一个按钮。按钮的样式使用了Bootstrap的btn和btn-default类,按钮内部使用了字形图标类fa和fa-minus/fa-plus来显示减号和加号图标。
$(document).ready(function() {
// 减号按钮点击事件
$('#minus-btn').click(function() {
var quantity = parseInt($('#quantity').val());
if (quantity > 1) {
$('#quantity').val(quantity - 1);
}
});
// 加号按钮点击事件
$('#plus-btn').click(function() {
var quantity = parseInt($('#quantity').val());
$('#quantity').val(quantity + 1);
});
});
上述代码中,通过jQuery的ready函数来确保DOM加载完成后执行代码。减号按钮的点击事件会获取输入框的值,如果大于1则减1并更新输入框的值;加号按钮的点击事件会获取输入框的值,加1并更新输入框的值。
通过以上步骤,就可以在Bootstrap 3中添加字形图标加减函数。这样用户可以通过点击加减按钮来增加或减少输入框中的数值。
领取专属 10元无门槛券
手把手带您无忧上云