Chọn Bootstrap

Tùy chỉnh gốc bằng CSS tùy chỉnh thay đổi giao diện ban đầu của phần tử. Default#import Form from 'react-bootstrap/Form';function SelectBasicExample() { export default SelectBasicExample;Sizing#Bạn cũng có thể chọn từ các lựa chọn tùy chỉnh nhỏ và lớn để phù hợp với các kiểu nhập văn bản có kích thước tương tự của chúng tôi. nhập Biểu mẫu từ 'react-bootstrap/Form';function SelectSizesExample() {xuất mặc định SelectSizesExample;API#import Biểu mẫu từ 'react-bootstrap/Form'Sao chép mã nhập cho thành phần Biểu mẫuNameTypeDefaultDescriptiondisabled Tắt điều khiểnhtmlSize Thuộc tính kích thước của HTML cơ bản . Chỉ định số lượng tùy chọn hiển thị. isInvalid falseThêm kiểu xác thực "không hợp lệ" vào điều khiển và nhãn đi kèmisValid falseThêm kiểu xác thực "hợp lệ" vào controlonChange Một cuộc gọi lại được kích hoạt khi giá trị prop thay đổi kích thước chuỗi giá trị. mảngcủa. số được kiểm soát bởi. onChange, chỗ dựa ban đầu. defaultValueThuộc tính giá trị của inputbsPrefix {'form-select'}Thay đổi tên lớp cơ sở CSS thành phần cơ bản và tiền tố tên lớp bổ trợ. Đây là một lối thoát hiểm để làm việc với css bootstrap được tùy chỉnh nhiều

$( '#single-select-clear-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    allowClear: true
} );

        
            

        
          
            
            
            
            
            
            
          
          Submit
        

      
        
    

        
            
        $(document).ready(function() {
          $('.mdb-select.validate').materialSelect({
            validate: true,
            labels: {
              validFeedback: 'Correct choice',
              invalidFeedback: 'Wrong choice'
            }
          });
          function validateSelect(e) {
            e.preventDefault();
            $('.needs-validation').addClass('was-validated');
            if ($('.needs-validation select').val() === null) {
              $('.needs-validation').find('.valid-feedback').hide();
              $('.needs-validation').find('.invalid-feedback').show();
              $('.needs-validation').find('.select-dropdown').val('').prop('placeholder', 'No countries selected')
            } else {
              $('.needs-validation').find('.valid-feedback').show();
              $('.needs-validation').find('.invalid-feedback').hide();
            }
          }
          $('.needs-validation select').on('change', e => validateSelect(e))
          $('.needs-validation').on('submit', e => validateSelect(e))
        });
      
        
    

Sử dụng tùy chọn

        
            
          
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
          
          

            Save
          
        
        
    

        
            
          
            
            
            
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
          
          Example label
        
        
    

        
            
          
            
            
            
            
            
          
          Example label