Khung Bootstrap có các lớp tích hợp để sử dụng các hộp kiểm dưới dạng các trang web của bạn. Bằng cách sử dụng các lớp đó, hộp kiểm cũng sẽ có kiểu mặc định Show
Bạn có thể bao gồm hộp kiểm Bootstrap trong biểu mẫu một cách độc lập, giống như biểu mẫu HTML thông thường và cũng bao gồm điều này trong hộp văn bản để thêm chức năng như bật/tắt hộp văn bản Trong hướng dẫn này, tôi sẽ chỉ cho bạn các ví dụ về cách sử dụng một hộp kiểm và nhiều hộp kiểm cùng với các khả năng khác trong Bootstrap liên quan đến hộp kiểm Bản trình diễn để sử dụng hộp kiểm Bootstrap trong biểu mẫuTrong ví dụ này, một hộp kiểm được tạo ở dạng Bootstrap đơn giản. Về cơ bản, biểu mẫu này là biểu mẫu đăng nhập trong đó người dùng được cung cấp tùy chọn “Ghi nhớ tôi” bằng cách nhấp vào hộp kiểm  Trong mã, bạn có thể thấy một hộp kiểm được tạo bằng cách sử dụng mã đơn giản 1 <đầu vào loại="hộp kiểm">< type="checkbox"> Remember me Một ví dụ về nhiều hộp kiểmTrong ví dụ này, nhiều hộp kiểm được tạo để cho phép người dùng thực hiện nhiều lựa chọn Nhiều hộp kiểm được tạo bằng cách sử dụng lớp hộp kiểm trong mỗi div có chứa hộp kiểm. Hộp kiểm cuối cùng bị vô hiệu hóa Trong các hộp kiểm đang hoạt động, khi bạn di chuột qua văn bản hoặc nhãn, biểu tượng bàn tay sẽ được hiển thị. Trong khi hộp kiểm “Bootstrap” bị vô hiệu hóa, biểu tượng 'ban-circle' được hiển thị cho biết không thể chọn hộp kiểm này Ví dụ về nhiều hộp kiểm nội tuyếnTrong ví dụ về hộp kiểm Bootstrap này, tôi sẽ sử dụng các hộp kiểm nội tuyến thay vì từng hộp kiểm ở dòng mới (mà tôi đã sử dụng trong ví dụ trên) Bạn có thể thấy trong đầu ra, các hộp kiểm là nội tuyến. Điều này được thực hiện bằng cách sử dụng lớp do Bootstrap cung cấp. hộp kiểm-nội tuyến Lớp checkbox-inline được sử dụng trong thẻ nhãn cho mỗi hộp kiểm. Giống như trong ví dụ trên, bốn hộp kiểm đầu tiên (PHP, CSS, Java và HTML) được bật khi biểu tượng bàn tay được hiển thị khi bạn di chuột qua nó. Trong khi hộp kiểm cuối cùng (hộp kiểm Bootstrap) bị vô hiệu hóa với biểu tượng vòng tròn cấm Các hộp kiểm đẹp mắt của BootstrapBạn cũng có thể áp dụng các kiểu tùy chỉnh trong các hộp kiểm khi sử dụng khung Bootstrap. Đối với điều đó, CSS tùy chỉnh có thể được thiết kế hoặc có thể sử dụng các plugin bên thứ ba có sẵn Tôi sẽ chỉ cho bạn một vài phong cách thiết kế hộp kiểm bằng một plug-in awesome-bootstrap-checkbox đơn giản của bên thứ ba. Nó chỉ yêu cầu giới thiệu hai tệp CSS trong phần đầu trong đó một tệp được lưu trữ tại CDN và tệp thứ hai có thể được lưu trữ tại máy chủ của riêng bạn Hãy để tôi chỉ cho bạn một vài phong cách theo hướng dẫn từng bước để thiết lập Bạn có thể xem danh sách các kiểu khác nhau đẹp mắt bằng cách sử dụng trình cắm Đây là cách bạn có thể thiết lập trình cắm này để tạo các hộp kiểm Bootstrap Bước 1 Tham khảo phông chữ tuyệt vời. tối thiểu. tập tin CSS css Bước 2 Ngoài ra, tham khảo xây dựng. css trong phần đầu Bạn có thể lấy phong cách trong trang web github, tại đây. Đây là một tệp nhỏ mà bạn có thể lưu trữ trong máy chủ của riêng mình Bước 3 Tham khảo các lớp trong phần tử div của thẻ hộp kiểm đầu vào. Ví dụ: tên lớp khớp với mẫu của kiểu Bootstrap cảnh báo hộp kiểm, hộp kiểm chính, v.v. Mã hoàn chỉnh để tạo hộp kiểm có thể là 1 2 3 4 5 6 7 8 9 10 11 phong cách khác 1 2 3 4 5 6 7 8 9 10 11 id="hộp kiểm2"lớp< id="checkbox2" class="styled" type="checkbox" checked> Kiểu 8 (Tròn) Mã hoàn chỉnh sử dụng các kiểu khác nhau có thể được nhìn thấy trong trang demo hoặc truy cập trang web bổ trợ theo liên kết được cung cấp bên dưới Một ví dụ để sử dụng hộp kiểm trong một biểu mẫuTrong ví dụ này, tôi sẽ sử dụng một vài kiểu hộp kiểm đã tạo ở trên ở dạng Bootstrap. Vì vậy, mã hộp kiểm kết hợp với một số điều khiển khác của biểu mẫu để hiển thị giao diện của nó Bạn có thể thấy trong hình và trang demo, biểu mẫu sử dụng các điều khiển khác nhau bao gồm hộp văn bản, chọn menu thả xuống và một vài kiểu hộp kiểm khác nhau. Các hộp kiểm đang sử dụng tiện ích bổ sung awesome-bootstrap-checkbox và bạn có thể thấy cách nó kết hợp với các thành phần biểu mẫu khác Trong phần đầu, các tệp phụ thuộc được bao gồm. Đó là 1 2 3 rel = "stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
rel="stylesheet"href< . css">rel="stylesheet" href="build.css"> Mặc dù phần đầu cũng bao gồm một kiểu CSS tùy chỉnh được áp dụng cho các điều khiển biểu mẫu Tài liệu tham khảo và tín dụng cho phần này. URL trình cắm Ví dụ về đính kèm hộp kiểm vào hộp văn bảnBạn có thể đính kèm hộp kiểm vào hộp văn bản bằng cách sử dụng các lớp tích hợp. Điều này có thể hữu ích cho các tình huống khác nhau Bạn có thể thấy hình hoặc kết quả của ví dụ trên mà hai hộp văn bản được hiển thị. Một hộp kiểm được đính kèm ở bên trái của hộp kiểm trong khi ở hộp văn bản khác, hộp kiểm được đính kèm ở bên phải Vì thế, lớp input-group-addon được sử dụng trong phần tử span có chứa hộp kiểm Nếu bạn thêm mã hộp văn bản trước khoảng thời gian đó, hộp kiểm sẽ được đính kèm ở bên phải. Trong khi Nếu mã được đặt sau phần tử span chứa mã hộp kiểm, hộp kiểm sẽ được thêm vào bên trái Bạn cũng có thể thêm các lớp tùy chỉnh để tạo kiểu cho hộp văn bản và phần tử span có chứa hộp kiểm. Một bản demo được hiển thị dưới đây Các lớp CSS sau được tạo, bạn có thể thay đổi theo nhu cầu của dự án Đối với hộp văn bản 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .inputstl {
phần đệm. 9px;
đường viền. hình đặc 1px #517B97;
đường viền. 0;
nền. -webkit-gradient(tuyến tính, trái top, left 25, from(#FFFFFF), color-stop(4%, #CDDBE4), to(#FFFFFF));
nền. -moz-linear-gradient(top, #FFFFFF,top,#FFFFFF,top,#FFFFFF,top,#FFFFFF,top,#FFFFFF,top,#FFFFFF,top,#FFFFFF,top,#FFFFFF,top,#FFFFFF,top,#FFFFFF,top,#FFFFFF, #CDDBE4 1px, #FFFFFF 25px);
bóng hộp. rgba(0,0,0, 0. 1) 0px 0px 8px;
-moz-box-shadow. rgba(0,0,0, 0. 1) 0px 0px 8px;
-webkit-box-shadow. rgba(0,0,0, 0. 1) 0px 0px 8px;
} Đối với thẻ span chứa hộp kiểm 1 2 3 4 5 6 7 .frspan {
đường viền. hình đặc 1px #517B97;
nền. #517B97;
} Các lớp này được thêm vào bên cạnh các lớp tích hợp trong thẻ đầu vào tạo hộp văn bản và thẻ span Biến hộp kiểm Bootstrap thành công tắcBạn có thể tạo các công tắc đẹp mắt dựa trên các hộp kiểm sử dụng các lớp Bootstrap cùng với jQuery. Các công tắc đẹp mắt có thể nâng cao trải nghiệm người dùng và làm cho biểu mẫu của bạn tương tác hơn Hãy xem một vài bản trình diễn về cách tạo các công tắc dựa trên hộp kiểm Bootstrap. Sau đó, bạn cũng có thể thấy liên kết hướng dẫn chi tiết để thiết lập trên trang web của mình Bản trình diễn 1. BẬT / TẮT chuyển đổiCông tắc bật và tắt với các tùy chọn để nhận giá trị được chọn hiện tại của hộp kiểm. Đó là nếu được chọn hoặc bật, giá trị đúng sẽ trả về nếu không sẽ trả về giá trị sai Bản trình diễn 2. Màu sắc khác nhau chuyển đổi bằng cách sử dụng hộp kiểmTạo các công tắc chủ đề được xác định trước khi bạn thường sử dụng cho các thành phần Bootstrap khác như các nút. có một cái nhìn Sử dụng văn bản khác ngoài Bật/TắtTất nhiên, bạn có thể đặt văn bản theo ngữ cảnh của biểu mẫu của mình. Ví dụ: một hộp kiểm Bootstrap chuyển đổi thành Đúng/Sai hoặc Đồng ý/Không đồng ý, v.v. Tương tự, bạn có thể tạo các công tắc có kích thước khác nhau, đặt các màu khác nhau cho trạng thái Bật/Tắt và sử dụng các tùy chọn khác. Tôi đã viết một hướng dẫn chi tiết về công tắc dựa trên hộp kiểm tuyệt vời này Sử dụng các hộp kiểm trong Bootstrap với treeviewBản demo tiếp theo là một plug-in hay khác dựa trên jQuery và sử dụng khung Bootstrap. Nó cho phép tạo treeview với nhiều tùy chọn/lựa chọn hoặc giá trị như bạn yêu cầu. Chống lại, mỗi giá trị hoặc tùy chọn, một hộp kiểm được đưa ra Bạn có thể xem bản demo bằng cách nhấp vào liên kết bên dưới Để biết chi tiết và cách thiết lập điều này trên trang web của bạn, hãy theo liên kết này. treeview với các hộp kiểm Tạo danh sách thả xuống chọn với các hộp kiểm trong Bootstrap với jQueryBản trình diễn sau đây hiển thị bằng cách sử dụng menu thả xuống chọn với các hộp kiểm để với mỗi tùy chọn trong phần chọn, một hộp kiểm được đính kèm với nó. Tất cả các tùy chọn đã chọn xuất hiện trên cùng Làm cách nào để thay đổi kiểu hộp kiểm của tôi?Có thể tạo kiểu cho hộp kiểm bằng cách sử dụng Phần tử giả như. trước,. sau, di chuột và. đã chọn . Để tạo kiểu cho hộp kiểm, trước tiên người dùng cần ẩn hộp kiểm mặc định có thể được thực hiện bằng cách đặt giá trị của thuộc tính khả năng hiển thị thành ẩn.
Làm cách nào để đặt hộp kiểm đã chọn trong bootstrap?form-check-label để gắn nhãn các phần tử và. các hộp kiểm biểu mẫu-kiểm tra-đầu vào để tạo kiểu bên trong. container kiểm tra biểu mẫu. Sử dụng thuộc tính đã chọn nếu bạn muốn hộp kiểm được chọn theo mặc định .
Làm cách nào để thay đổi kích thước của hộp kiểm trong bootstrap?Cách tốt nhất để thay đổi kích thước hộp kiểm bootstrap trong CSS là sử dụng thuộc tính scale .
Làm cách nào để thay đổi màu nền của hộp kiểm trong bootstrap?Trong Bootstrap 4, màu nền của công tắc bật/tắt là màu xanh lam. Màu này có thể được thay đổi bằng cách thao tác với lớp đầu vào kiểm soát tùy chỉnh . |
