Bài viết này sẽ bao gồm các chủ đề sau:
- Làm cách nào để Tắt trường nhập văn bản?
- Làm cách nào để Tắt tùy chọn Hộp chọn?
- Làm cách nào để Tắt phần tử đầu vào hộp kiểm?
- Làm cách nào để Tắt phần tử đầu vào nút?
Điều kiện tiên quyết: Tạo biểu mẫu
Đầu tiên, tạo một biểu mẫu bằng cách sử dụng HTML “
< hình thức >< / hình thức >
Sau đó, thêm một “
< bộ trường tầng lớp = 'col-md-12' >
< huyền thoại >Mẫu đăng ký của sinh viên< / huyền thoại >
< / bộ trường >
đầu ra
Làm cách nào để Tắt trường nhập văn bản?
Đối với ví dụ đang diễn ra, hãy làm theo các hướng dẫn đã cho:
- Bên trong “
” phần tử, sau phần tử chú thích, thêm thẻ và gán cho nó một lớp “ nhóm hình thức ”.- Sau đó, bao gồm “
' và ' <đầu vào> ” tương ứng cho các trường chú thích và trường nhập liệu. Gán phần tử đầu vào một lớp “ điều khiển biểu mẫu ”. - Sau đó, phân bổ “ tàn tật ” thuộc tính để vô hiệu hóa trường đầu vào:
< div tầng lớp = 'nhóm hình thức' >
< nhãn > Nhập của bạn Tên
< đầu vào loại = 'chữ' tầng lớp = 'kiểm soát hình thức' vô hiệu hóa>
< / nhãn >
< / div >Sau đây là lời giải thích của các lớp được đề cập ở trên:
- “ nhóm hình thức ” là một lớp linh hoạt cung cấp cách đơn giản nhất để đưa cấu trúc vào biểu mẫu.
- “ điều khiển biểu mẫu ” tự động thêm kiểu dáng cho các phần tử biểu mẫu.
đầu ra
Thêm một trường nhập khác mà không có “ tàn tật ' thuộc tính:
< div tầng lớp = 'nhóm hình thức' >
< nhãn > Nhập cha của bạn Tên
< đầu vào loại = 'chữ' tầng lớp = 'kiểm soát hình thức' >
< / nhãn >
< / div >Có thể thấy rằng trường đầu vào đầu tiên bị tắt và trường thứ hai được bật:
Làm cách nào để Tắt tùy chọn Hộp chọn?
Để tạo một hộp chọn trong biểu mẫu, hãy sử dụng HTML “
' yếu tố. Các ' ” các phần tử sau đó được thêm vào các mục hộp được chọn. Trong ví dụ này, lưu ý rằng tùy chọn thứ hai được đặt là tắt bằng cách sử dụng “ tàn tật ' thuộc tính:
< div tầng lớp = 'nhóm hình thức' >
< nhãn > Tàn tật Chọn hộp
< lựa chọn tầng lớp = 'kiểm soát hình thức' >
< quyền mua > chọn < / quyền mua >
< quyền mua vô hiệu hóa> Tàn tật chọn < / quyền mua >
< quyền mua >Thực đơn< / quyền mua >
< / lựa chọn >
< / nhãn >
< / div >đầu ra
Làm cách nào để Tắt phần tử đầu vào hộp kiểm?
Hãy tạo một hộp kiểm kiểm soát biểu mẫu khác. Để vô hiệu hóa hộp kiểm, nút “ tàn tật ” thuộc tính được quy định như sau:
< div tầng lớp = 'kiểm tra biểu mẫu' >
< nhãn tầng lớp = 'biểu mẫu-kiểm tra-nhãn' >
< đầu vào tầng lớp = 'form-check-input' loại = 'hộp kiểm' vô hiệu hóa>
Bạn có thể không kiểm tra cái này
đầu ra
Làm cách nào để Tắt phần tử đầu vào nút?
Bạn cũng có thể thêm phần tử nút HTML để gửi biểu mẫu. Bây giờ, hãy vô hiệu hóa nút này bằng cách sử dụng “ tàn tật ' tầng lớp:
< cái nút loại = 'Gửi đi' tầng lớp = ' btn btn-btn-lg chính bị vô hiệu hóa' >Gửi< / cái nút >đầu ra
Đó là tất cả về việc vô hiệu hóa các trường đầu vào trong Bootstrap.
Phần kết luận
Trong Bootstrap, các điều khiển biểu mẫu có thể bị vô hiệu hóa bằng cách sử dụng “ tàn tật ” thuộc tính hoặc lớp. Thuộc tính được đặt bên trong thẻ bắt đầu của phần tử. Mặt khác, “ tàn tật ” lớp được đặt trong “ tầng lớp ' thuộc tính. Bài viết này đã cung cấp các ví dụ để minh họa cách tắt các điều khiển biểu mẫu trong Bootstrap.
- Sau đó, bao gồm “