function wcqib_refresh_quantity_increments() { jQuery("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").each(function(a, b) { var c = jQuery(b); c.addClass("buttons_added"), c.children().first().before(''), c.children().last().after('') }) } String.prototype.getDecimals || (String.prototype.getDecimals = function() { var a = this, b = ("" + a).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/); return b ? Math.max(0, (b[1] ? b[1].length : 0) - (b[2] ? +b[2] : 0)) : 0 }), jQuery(document).ready(function() { wcqib_refresh_quantity_increments() }), jQuery(document).on("updated_wc_div", function() { wcqib_refresh_quantity_increments() }), jQuery(document).on("click", ".plus, .minus", function() { var a = jQuery(this).closest(".quantity").find(".qty"), b = parseFloat(a.val()), c = parseFloat(a.attr("max")), d = parseFloat(a.attr("min")), e = a.attr("step"); b && "" !== b && "NaN" !== b || (b = 0), "" !== c && "NaN" !== c || (c = ""), "" !== d && "NaN" !== d || (d = 0), "any" !== e && "" !== e && void 0 !== e && "NaN" !== parseFloat(e) || (e = 1), jQuery(this).is(".plus") ? c && b >= c ? a.val(c) : a.val((b + parseFloat(e)).toFixed(e.getDecimals())) : d && b <= d ? a.val(d) : b > 0 && a.val((b - parseFloat(e)).toFixed(e.getDecimals())), a.trigger("change") });/* -- quantity box -- */ .quantity { display: inline-block; } .quantity .input-text.qty { width: 35px; height: 39px; padding: 0 5px; text-align: center; background-color: transparent; border: 1px solid #efefef; } .quantity.buttons_added { text-align: left; position: relative; white-space: nowrap; vertical-align: top; } .quantity.buttons_added input { display: inline-block; margin: 0; vertical-align: top; box-shadow: none; } .quantity.buttons_added .minus, .quantity.buttons_added .plus { padding: 7px 10px 8px; height: 41px; background-color: #ffffff; border: 1px solid #efefef; cursor:pointer;} .quantity.buttons_added .minus { border-right: 0; } .quantity.buttons_added .plus { border-left: 0; } .quantity.buttons_added .minus:hover, .quantity.buttons_added .plus:hover { background: #eeeeee; } .quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; margin: 0; } .quantity.buttons_added .minus:focus, .quantity.buttons_added .plus:focus { outline: none; }
Lớp .input-group là một vùng chứa để nâng cao đầu vào bằng cách thêm biểu tượng, văn bản hoặc nút ở phía trước hoặc phía sau trường đầu vào dưới dạng "văn bản trợ giúp"
Sử dụng .input-group-prepend để thêm văn bản trợ giúp phía trước đầu vào và .input-group-append để thêm văn bản trợ giúp phía sau đầu vào
Cuối cùng, thêm lớp .input-group-text để tạo kiểu cho văn bản trợ giúp đã chỉ định
Ví dụ
@
@example. com
Tự mình thử »
Mẹo. Chúng tôi sử dụng lớp tiện ích .mb-3 để đảm bảo rằng nhóm đầu vào có đáy lề phù hợp. Đọc thêm về các lớp tiện ích trong Chương Tiện ích BS4 của chúng tôi
Kích thước nhóm đầu vào
Sử dụng lớp .input-group-sm cho các nhóm đầu vào nhỏ và .input-group-lg cho các nhóm đầu vào lớn
Ví dụ
Nhỏ
Mặc định
Lớn
Tự mình thử »
Nhiều đầu vào và người trợ giúp
Thêm nhiều đầu vào hoặc addons
Ví dụ
Người
Một
Hai
Ba
Tự mình thử »
Nhóm đầu vào với hộp kiểm và radio
Bạn cũng có thể sử dụng hộp kiểm hoặc nút radio thay vì văn bản
Ví dụ
Tự mình thử »
Nhóm nút đầu vào
Ví dụ
Nút cơ bản
Đi
ĐƯỢC RỒI
Hủy bỏ
Tự mình thử »
Nhóm đầu vào với nút thả xuống
Thêm một nút thả xuống trong nhóm đầu vào. Lưu ý rằng bạn không cần. trình bao bọc thả xuống, như bạn thường làm
Ví dụ
nút thả xuống
Tự mình thử »
Nhãn nhóm đầu vào
Đặt nhãn bên ngoài nhóm đầu vào và nhớ rằng giá trị của thuộc tính for phải khớp với id của đầu vào