Bootstrap 4 số đầu vào cộng trừ

  
    
    
    
  

  
    

	
 Nội dung chính Show
 
Kích thước nhóm đầu vào
Nhiều đầu vào và người trợ giúp
Nhóm đầu vào với hộp kiểm và radio
Nhóm nút đầu vào
Nhóm đầu vào với nút thả xuống
Nhãn nhóm đầu vào
Có thể thêm các nút cộng trừ trong đầu vào của loại số không?
Làm cách nào để thêm tiền tệ vào đầu vào trong Bootstrap?
Làm cách nào để làm cho trường đầu vào phản hồi nhanh trong Bootstrap 4?
Các loại đầu vào trong Bootstrap 4 là gì?
 
  

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
   

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
   

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
   

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ụ

Nhóm nút đầu vào

Ví dụ

Nút cơ bản
 

Đi
 

ĐƯỢC RỒI
Hủy bỏ
 

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
    
    

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

Có thể thêm các nút cộng trừ trong đầu vào của loại số không?

Làm cách nào để thêm tiền tệ vào đầu vào trong Bootstrap?

Làm cách nào để làm cho trường đầu vào phản hồi nhanh trong Bootstrap 4?

Các loại đầu vào trong Bootstrap 4 là gì?