Chọn ngày bootstrap 5

        
            
            const datepickerTranslated = document.querySelector('.datepicker-translated');
            new mdb.Datepicker(datepickerTranslated, {
              title: 'Datum auswählen',
              monthsFull: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
              monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov','Dez'],
              weekdaysFull: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
              weekdaysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
              weekdaysNarrow: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
              okBtnText: 'Ok',
              clearBtnText: 'Klar',
              cancelBtnText: 'Schließen',
            });
        
        
    

Các ví dụ và hướng dẫn sử dụng cho các kiểu điều khiển biểu mẫu, tùy chọn bố cục và các thành phần tùy chỉnh để tạo nhiều biểu mẫu khác nhau

Tổng quan

Điều khiển biểu mẫu Bootstrap mở rộng với các lớp. Sử dụng các lớp này để chọn tham gia hiển thị tùy chỉnh của chúng để hiển thị nhất quán hơn trên các trình duyệt và thiết bị

Đảm bảo sử dụng thuộc tính

Đây là một ví dụ nhanh để minh họa các kiểu biểu mẫu của Bootstrap. Tiếp tục đọc tài liệu về các lớp bắt buộc, bố cục biểu mẫu, v.v.

Chúng tôi sẽ không bao giờ chia sẻ email của bạn với bất kỳ ai khác

  

    Email address
    
    We'll never share your email with anyone else.
  
  

    Password
    
  
  

    
    Check me out
  
  Submit

Điều khiển biểu mẫu

Kiểm soát hình thức văn bản—như

Đối với đầu vào tệp, hoán đổi

  

    Example file input
    
  

định cỡ

Đặt chiều cao bằng cách sử dụng các lớp như

Chỉ đọc

Thêm thuộc tính boolean

Văn bản thuần túy chỉ đọc

Nếu bạn muốn có các phần tử

Hộp kiểm và radio

Các hộp kiểm và radio mặc định được cải thiện với sự trợ giúp của

Các hộp kiểm và radio bị vô hiệu hóa được hỗ trợ, nhưng để cung cấp con trỏ

Các hộp kiểm và việc sử dụng radio được xây dựng để hỗ trợ xác thực biểu mẫu dựa trên HTML và cung cấp các nhãn ngắn gọn, dễ tiếp cận. Như vậy, các

Mặc định (xếp chồng)

Theo mặc định, bất kỳ số hộp kiểm và đài nào là anh chị em trực tiếp sẽ được xếp chồng lên nhau theo chiều dọc và cách nhau một cách thích hợp bằng

nội tuyến

Nhóm các hộp kiểm hoặc radio trên cùng một hàng ngang bằng cách thêm

không có nhãn

Thêm

  

    Example file input
    
  

Cách trình bày

Vì Bootstrap áp dụng

Nhóm biểu mẫu

Lớp

s hoặc gần như bất kỳ phần tử nào khác

  

    Example file input
    
  

lưới biểu mẫu

Các biểu mẫu phức tạp hơn có thể được tạo bằng cách sử dụng các lớp lưới của chúng tôi. Sử dụng những thứ này cho bố cục biểu mẫu yêu cầu nhiều cột, độ rộng khác nhau và các tùy chọn căn chỉnh bổ sung

  

    Example file input
    
  

hàng biểu mẫu

Bạn cũng có thể hoán đổi

  

    Example file input
    
  

Bố cục phức tạp hơn cũng có thể được tạo bằng hệ thống lưới

  

    Example file input
    
  

dạng ngang

Tạo biểu mẫu ngang với lưới bằng cách thêm lớp

Đôi khi, bạn có thể cần sử dụng các tiện ích lề hoặc đệm để tạo sự căn chỉnh hoàn hảo mà bạn cần. Ví dụ: chúng tôi đã xóa

  

    Example file input
    
  

Định cỡ nhãn dạng ngang

Đảm bảo sử dụng

  

    Example file input
    
  

Kích thước cột

Như đã trình bày trong các ví dụ trước, hệ thống lưới của chúng tôi cho phép bạn đặt bất kỳ số lượng

  

    Example file input
    
  

tự động định cỡ

Ví dụ dưới đây sử dụng tiện ích flexbox để căn giữa nội dung theo chiều dọc và thay đổi

  

    Example file input
    
  

Sau đó, bạn có thể phối lại điều đó một lần nữa với các lớp cột theo kích thước cụ thể

Và tất nhiên là được hỗ trợ

biểu mẫu nội tuyến

Sử dụng lớp

• Các điều khiển là
  55, thu gọn bất kỳ khoảng trắng HTML nào và cho phép bạn cung cấp điều khiển căn chỉnh với các tiện ích khoảng cách và hộp linh hoạt
• Các nhóm điều khiển và đầu vào nhận được
  56 để ghi đè lên mặc định của Bootstrap là
  90
• Các điều khiển chỉ xuất hiện nội tuyến trong các cổng xem rộng ít nhất 576px để giải thích cho các cổng xem hẹp trên thiết bị di động

Bạn có thể cần giải quyết thủ công chiều rộng và căn chỉnh của các điều khiển biểu mẫu riêng lẻ bằng các tiện ích giãn cách (như minh họa bên dưới). Cuối cùng, hãy đảm bảo luôn bao gồm một

Các điều khiển và lựa chọn biểu mẫu tùy chỉnh cũng được hỗ trợ

Các lựa chọn thay thế cho nhãn ẩn

Các công nghệ hỗ trợ như trình đọc màn hình sẽ gặp sự cố với các biểu mẫu của bạn nếu bạn không bao gồm nhãn cho mọi thông tin nhập vào. Đối với các biểu mẫu nội tuyến này, bạn có thể ẩn nhãn bằng lớp

văn bản trợ giúp

Có thể tạo văn bản trợ giúp cấp khối trong các biểu mẫu bằng cách sử dụng ________ 386 (trước đây gọi là ________ 387 trong v3). Văn bản trợ giúp nội tuyến có thể được triển khai linh hoạt bằng cách sử dụng bất kỳ phần tử HTML nội tuyến và lớp tiện ích nào như

Liên kết văn bản trợ giúp với các điều khiển biểu mẫu

Văn bản trợ giúp phải được liên kết rõ ràng với điều khiển biểu mẫu liên quan đến việc sử dụng thuộc tính

Văn bản trợ giúp bên dưới đầu vào có thể được tạo kiểu bằng

Mật khẩu của bạn phải dài 8-20 ký tự, chứa các chữ cái và số và không được chứa dấu cách, ký tự đặc biệt hoặc biểu tượng cảm xúc

Văn bản nội tuyến có thể sử dụng bất kỳ phần tử HTML nội tuyến điển hình nào (có thể là

Phải dài 8-20 ký tự

biểu mẫu bị vô hiệu hóa

Thêm thuộc tính boolean