Thiết kế danh sách hộp kiểm trong bootstrap

Nếu bạn đang đọc bài đăng này thì bạn phải muốn thử một cái gì đó khác biệt với cùng một hộp vuông cũ và dấu tích. Đúng vậy, ô vuông và dấu tick là bạn thân từ rất lâu rồi, đến nỗi đôi khi chúng ta ngại tách rời chúng ra. Thiết kế mặc định là thiết thực và chúng tôi đã quen với nó. Khi các tương tác của người dùng ngày càng trở nên tự nhiên hơn, các hộp kiểm này được thay thế bằng các nút chuyển đổi ở một số nơi. Tuy nhiên, ở một nơi thường được sử dụng như biểu mẫu và trang web, chúng ta vẫn phải sử dụng các hộp kiểm. Chúng tôi không thể làm cho các hộp kiểm trông độc đáo, tuy nhiên, chúng tôi có thể thay đổi cách chúng tương tác. Trong bộ sưu tập này, chúng tôi đã thu thập các kiểu hộp kiểm bootstrap với các hiệu ứng hoạt hình tương tác đơn giản nhưng bắt mắt

Dễ dàng triển khai các kiểu hộp kiểm Bootstrap

Cho dù bạn đang tìm kiếm một kiểu hộp kiểm bootstrap đơn giản và các thiết kế hộp kiểm tùy chỉnh bootstrap sáng tạo, sẽ có một thiết kế dành cho bạn trong bộ sưu tập này

Nút hộp kiểm Bootstrap V03

Như tên ngụ ý, kiểu hộp kiểm bootstrap này có thiết kế nút. Thiết kế nhỏ gọn của nút bootstrap này cho phép bạn dễ dàng thêm nó vào bất kỳ phần nào của trang web và ứng dụng của mình. Các hình ảnh động đơn giản khi bạn nhấp vào nút giúp người dùng dễ dàng hiểu được nút họ chọn

Vì đây là nút hộp kiểm Bootstrap 4, bạn có thể thử hoạt ảnh tùy chỉnh để làm cho các nút phù hợp với thiết kế của bạn. Nếu bạn dự định chỉ đưa ra hai hoặc ba tùy chọn trong hộp kiểm của mình, kiểu thiết kế hộp kiểm này sẽ là một lựa chọn tốt

Thông tin / Tải xuống Bản trình diễn

Bootstrap 4 Hộp kiểm V05

Kiểu hộp kiểm Bootstrap có các nhãn trên đó cho biết số lượng thành phần/sản phẩm trong danh mục cụ thể. Nếu bạn định sử dụng hộp kiểm để cho phép người dùng chọn thể loại hoặc danh mục như trong các trang web phát trực tuyến hoặc trang web phim, thì kiểu hộp kiểm bootstrap này sẽ là một lựa chọn tốt. Người tạo đã giữ cho hoạt ảnh đơn giản và gọn gàng nhất có thể để bạn có thể dễ dàng sử dụng thiết kế hộp kiểm này trong thiết kế của mình. Ngoài ra, bạn có thể dễ dàng thêm các yếu tố thiết kế và hoạt ảnh tùy chỉnh vào thiết kế

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm V04

Bạn nhận được một kiểu hộp kiểm bootstrap cổ điển trong ví dụ này. Các hộp kiểm được nhóm gọn gàng trong thiết kế này để khán giả có thể dễ dàng chọn các tùy chọn họ muốn mà không cần cuộn nhiều. Nhãn văn bản và hộp kiểm đủ lớn để dễ dàng đọc và tương tác với các hộp kiểm, điều này làm cho điều này trở thành một lựa chọn tốt cho các thiết kế đáp ứng. Kiểu hộp kiểm này cũng sử dụng khung Bootstrap 4, vì vậy các nhà phát triển có thể dễ dàng sử dụng mã trong thiết kế của họ

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm V01

Một kiểu hộp kiểm Bootstrap đầy màu sắc được sử dụng trong mẫu này. Bạn có thể sử dụng màu sắc để nhóm các tùy chọn và làm cho quá trình lựa chọn trở nên đơn giản hơn đối với khán giả. Người tạo đã sử dụng các màu khác nhau cho mỗi hộp kiểm trong thiết kế mặc định, nhưng bạn có thể sử dụng màu cho nhiều tùy chọn nếu muốn. Chỉ các màu cơ bản được sử dụng trong thiết kế này để làm cho các hộp kiểm thu hút tất cả các loại biểu mẫu và ứng dụng. Bạn có thể thêm màu tùy chỉnh và màu gradient nếu muốn. Mẫu này sử dụng tập lệnh CSS3 mới nhất, vì vậy nó có thể xử lý tất cả các màu hiện đại mà không gặp sự cố nào. Toàn bộ tệp mã thiết kế được tải xuống miễn phí;

Thông tin / Tải xuống Bản trình diễn

Công cụ – Bộ giao diện người dùng

Công cụ là một bộ sưu tập bộ UI bootstrap đầy đủ chức năng. Người tạo đã cung cấp cho bạn tất cả các yếu tố cơ bản mà bạn thường thấy trong tất cả các trang web và thiết kế ứng dụng. Cùng với các thiết kế hộp kiểm bootstrap, chúng tôi cũng nhận được các yếu tố đầu vào tương tác như nút radio, thanh trượt và nút chuyển đổi. Sử dụng bộ giao diện người dùng như thế này sẽ giúp bạn tránh được những công việc cơ bản và tập trung vào việc cải thiện thiết kế và thêm các tính năng bạn muốn. Các hiệu ứng hoạt hình đơn giản và thanh lịch được sử dụng trong bộ giao diện người dùng này, do đó bạn có thể sử dụng các thành phần trong tất cả các loại trang web mà không phải do dự. Nếu bạn là một nhà phát triển chuyên nghiệp, những bộ UI bootstrap như thế này sẽ giúp bạn tiết kiệm thời gian và tiền bạc

Thông tin / Tải xuống

hộp kiểm tân hình

Khái niệm Hộp kiểm Neuomorphic sử dụng khái niệm thiết kế nút 3D hiện đại. Người sáng tạo đã kết hợp mô hình đất sét và hiệu ứng hiển thị nút thực tế để mang lại trải nghiệm chân thực cho người dùng. Mặc dù mô hình trông hơi phức tạp, nhưng tập lệnh mã của thiết kế rất đơn giản. Trên thực tế, toàn bộ thiết kế được tạo bằng tập lệnh CSS. Các nhà phát triển có thể chơi với thiết kế này và có thể thêm bất kỳ hiệu ứng và thành phần tùy chỉnh nào vào thiết kế mà không phải đổ mồ hôi. Mẫu này có thể được sử dụng ngay cả trong một trang web/ứng dụng hiện có vì tính đơn giản và mã hóa rõ ràng của nó

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm của Aaron

Nhà phát triển đã cung cấp cho chúng tôi một thiết kế hộp kiểm đơn giản nhưng thanh lịch. Hai loại hiệu ứng kiểm tra và bỏ chọn hộp kiểm khác nhau có trong gói này. Mỗi hoạt ảnh đều khác nhau và cả hai đều sử dụng tập lệnh HTML & CSS mới nhất. Do tính chất đơn giản và hình ảnh động bóng bẩy của thiết kế hộp kiểm này, bạn có thể điều chỉnh hộp kiểm này trên bất kỳ phần nào của trang web và ứng dụng của mình. Người tạo đã chia sẻ toàn bộ tập lệnh mã trên trình soạn thảo CodePen;

Thông tin / Tải xuống Bản trình diễn

Hoạt hình hộp kiểm

Hộp kiểm này sử dụng hiệu ứng di chuột hợp lý để cho người dùng thấy rằng nó có thể nhấp được. Nếu bạn định sử dụng hộp kiểm làm một trong những yếu tố chính trên trang web, thì các thiết kế hộp kiểm như thế này sẽ là một lựa chọn tốt để mang lại trải nghiệm người dùng tốt hơn. Từ bản thân mã, bạn có thể thấy rằng thiết kế chủ yếu sử dụng tập lệnh CSS. Vì vậy, bạn có thể mong đợi một hình ảnh động mượt mà tải nhanh

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm SVG hoạt hình

Trong ví dụ này, bạn có một số thiết kế hộp kiểm bootstrap và thiết kế nút radio. Tác giả đã sử dụng các hiệu ứng hoạt hình đơn giản và trang nhã mang đến cho bạn cảm giác chân thực. Ví dụ: bạn nhận được các hiệu ứng hoạt hình như tô bóng hộp kiểm, gạch chéo hộp kiểm và nhiều hiệu ứng hoạt ảnh hữu ích khác. Toàn bộ tập lệnh mã được sử dụng để tạo thiết kế này được chia sẻ với bạn trong tệp tải xuống, do đó bạn có thể dễ dàng sử dụng thiết kế này trên trang web hoặc ứng dụng của mình. Tất cả những gì bạn phải làm là chọn thiết kế bạn muốn và chỉnh sửa nó theo nhu cầu thiết kế của bạn. Tối ưu hóa cơ bản được thực hiện trong gói này, vì vậy bạn có thể tập trung vào việc tùy chỉnh

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm tùy chỉnh

Nếu bạn đang tìm kiếm một ví dụ hộp kiểm bootstrap đơn giản với hiệu ứng chuyển tiếp mượt mà, thì thiết kế này có thể gây ấn tượng với bạn. Các hộp kiểm chuyển đổi sang trọng thành dấu tick khi người dùng chọn hộp kiểm. Cả hoạt ảnh đánh dấu và bỏ đánh dấu đều được đưa ra trong ví dụ này để giúp bạn hiểu đầy đủ về thiết kế. Một ưu điểm khác của thiết kế này là nó được tạo hoàn toàn bằng cách sử dụng tập lệnh CSS3. Do đó, bạn có thể dễ dàng chỉnh sửa và thêm các tính năng mà bạn muốn. Toàn bộ tập lệnh mã được chia sẻ với bạn trên trình chỉnh sửa CodePen để cho phép bạn dễ dàng chỉnh sửa và hình dung tùy chỉnh của mình trước khi sử dụng nó trên thiết kế của mình

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm/Radio ưa thích CSS thuần túy

Nếu bạn cảm thấy nhàm chán với những thiết kế hộp kiểm cũ, những thiết kế mới như thế này có thể kích thích sự sáng tạo của bạn. Thay vì chỉ chọn hộp kiểm, toàn bộ tùy chọn sẽ được đánh dấu khi bạn chọn một — điều này sẽ giúp người dùng thấy rõ các tùy chọn mà họ chọn. Do tính chất nhỏ gọn của thiết kế hộp kiểm động này, bạn cũng có thể sử dụng nó trên các thiết kế ứng dụng dành cho thiết bị di động. Vì toàn bộ thiết kế dựa trên độ dài văn bản, hãy thử sử dụng thiết kế này trên các tùy chọn văn bản nhỏ để làm cho nó hấp dẫn trực quan đối với người xem

Thông tin / Tải xuống Bản trình diễn

Thử thách hộp kiểm

Đây là một thiết kế hộp kiểm đơn giản, trọng lượng nhẹ khác. Người tạo đã sử dụng hiệu ứng gợn sóng khi bạn chọn hộp kiểm. Cả hiệu ứng tích tắc và hiệu ứng gợn đều được định thời gian hoàn hảo trong thiết kế này. Người dùng sẽ tìm thấy hộp kiểm này sử dụng tương tác vì hoạt ảnh linh hoạt của nó. Toàn bộ khái niệm được thực hiện bằng cách sử dụng tập lệnh CSS mới nhất. Do đó, bạn có thể dễ dàng xử lý mã này và có thể sử dụng nó ngay cả trên trang web và biểu mẫu hiện tại của mình

Thông tin / Tải xuống Bản trình diễn

thủ thuật hộp kiểm. Những việc cần làm

Đối với những người đang thiết kế ứng dụng danh sách việc cần làm, đoạn mã này sẽ rất hữu ích. Người tạo đã làm cho tất cả các yếu tố cơ bản hoạt động hoàn hảo để giúp bạn dễ dàng hiểu được khái niệm này. Ví dụ: khi bạn đánh dấu vào một hộp, nó sẽ di chuyển trơn tru đến danh sách nhiệm vụ đã hoàn thành. Một ưu điểm khác của thiết kế này là toàn bộ khái niệm được tạo chỉ bằng tập lệnh HTML5 và CSS3. Do cấu trúc mã đơn giản, các nhà phát triển có thể dễ dàng sử dụng mã trong ứng dụng của họ. Nhấp vào liên kết thông tin bên dưới để biết thêm về tập lệnh mã

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm CSS Ripple/Sóng

Như tên ngụ ý, cái này sử dụng hiệu ứng gợn sóng khi bạn chọn hộp kiểm. Hiệu ứng gợn sóng trong ví dụ này là đáng chú ý;
Người tạo đã cung cấp cho chúng tôi cả hộp kiểm và nút radio trong ví dụ này. Hiệu ứng di chuột rõ ràng cũng được đưa ra trong thiết kế này để cho người dùng thấy rõ họ sẽ chọn hộp nào. Cũng giống như thiết kế, toàn bộ kịch bản mã của thiết kế này rất đơn giản và dễ hiểu. Các nhà phát triển có thể hiểu mã mà không mất nhiều thời gian

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm đơn giản

Nếu bạn muốn một thiết kế hộp kiểm động ít phức tạp hơn, thiết kế này có thể gây ấn tượng với bạn. Toàn bộ thiết kế gọn gàng và đơn giản; . Cả hai hiệu ứng kiểm tra và bỏ chọn đều được đưa ra trong ví dụ này để giúp bạn hiểu khái niệm một cách dễ dàng. Vì tất cả các hiệu ứng hoạt hình xuất hiện trong hộp kiểm, nên bạn không phải sắp xếp lại các thành phần khác trên trang web hoặc biểu mẫu

Thông tin / Tải xuống Bản trình diễn

Hoạt hình hộp kiểm danh sách Todo chỉ dành cho CSS

Trong ví dụ về hộp kiểm bootstrap này, bạn sẽ có một hoạt ảnh hộp kiểm danh sách việc cần làm được thiết kế hợp lý. Vì là danh sách việc cần làm nên người sáng tạo đã sử dụng thiết kế gạch ngang để biểu thị nhiệm vụ đã hoàn thành. Hộp kiểm cũng hơi sinh động để mang lại cảm giác hài lòng khi bạn kiểm tra hộp. Cả hoạt ảnh kiểm tra và bỏ chọn đều được cung cấp trong gói này, vì vậy bạn có thể sử dụng đoạn mã này nếu muốn. Hoặc bạn chỉ có thể sử dụng hoạt hình hộp kiểm một mình để làm cho nó phù hợp với tất cả các loại trang web và ứng dụng. Toàn bộ đoạn code chia sẻ với các bạn để các bạn dễ dàng chỉnh sửa và sử dụng ảnh động theo ý muốn

Thông tin / Tải xuống Bản trình diễn

Hoạt hình hộp kiểm thú vị

Đây là một thiết kế hộp kiểm hoạt hình trông đơn giản và gọn gàng khác. Tác giả đã giữ hiệu ứng hoạt ảnh nhanh để người dùng không phải đợi quá lâu để hoạt ảnh hoàn thành. Cũng giống như thiết kế, đoạn mã cũng được giữ đơn giản; . Bằng cách thực hiện một số thay đổi đối với thiết kế, bạn có thể sử dụng thiết kế này trên trang web hoặc ứng dụng của mình

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm Với mo. js

Trong ví dụ này, bạn sẽ có một thiết kế hộp kiểm bootstrap sống động. Thiết kế hộp kiểm ban đầu rất đơn giản và không có bất kỳ điều gì lạ mắt về nó. Nhà phát triển đã sử dụng hiệu ứng hoạt hình để làm cho hộp kiểm đơn giản trở nên sống động và hấp dẫn hơn. Hiệu ứng hình ảnh được làm mượt để người dùng thực sự có thể cảm nhận được cú nhấp chuột khi họ lựa chọn. Nếu bạn đang sử dụng hiệu ứng này cho các ứng dụng iOS, hãy thử sử dụng phản hồi xúc giác để mang lại trải nghiệm chân thực. Nói về iOS, nếu bạn là nhà phát triển ứng dụng, hãy xem mô hình iPhone của chúng tôi để trình bày thiết kế của bạn một cách trang nhã với khán giả

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm CSS tùy chỉnh

Thiết kế hộp kiểm dựa trên Bootstrap này sẽ là một lựa chọn tốt cho các biểu mẫu khảo sát và phản hồi. Sử dụng thiết kế biểu cảm trong biểu mẫu phản hồi hoặc khảo sát cho phép người dùng liên hệ cảm xúc của họ với khảo sát của bạn. Trong thiết kế mặc định, bạn chỉ nhận được hai hộp kiểm. Tuy nhiên, bạn có thể thêm một vài cách diễn đạt để hiểu khách hàng hơn. Vì đây là thiết kế dựa trên CSS3, bạn có thể thêm bất kỳ màu sắc hợp thời trang và hiệu ứng hoạt hình nào để làm cho nó trở nên độc đáo. Để cải thiện khả năng sáng tạo hoạt ảnh CSS của bạn, hãy xem bộ sưu tập ví dụ về hoạt ảnh CSS3 của chúng tôi. Bằng cách thực hiện một vài điều chỉnh đối với mã, bạn có thể sử dụng hộp kiểm này trong biểu mẫu và trang web của mình

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm tùy chỉnh

Hộp kiểm tùy chỉnh là một thiết kế hộp kiểm sang trọng. Đôi khi bạn không cần phải sử dụng bất kỳ hình ảnh động hoặc màu sắc nào để làm cho thiết kế của bạn trông phong phú, đơn giản và sang trọng sẽ làm được điều đó. Ở thiết kế này, người sáng tạo đã đánh dấu tích ở góc hộp. Thiết kế này chỉ chiếm một ít không gian màn hình để bạn có thể dễ dàng bóp hộp kiểm này trong bất kỳ phần nào của trang web hoặc ứng dụng. Một ưu điểm khác với thiết kế này là nó được tạo hoàn toàn bằng cách sử dụng tập lệnh CSS3. Do đó bạn có thể dễ dàng chỉnh sửa mã theo ý thích của mình

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm CSS Cảm hứng

Trong bộ này, nhà phát triển đã mang đến cho bạn rất nhiều cảm hứng thiết kế hộp kiểm. Chủ yếu là nhà phát triển đã cung cấp cho bạn các hiệu ứng hoạt hình khác nhau trong ví dụ này. Tất cả các hiệu ứng hoạt hình đều đơn giản và gọn gàng nên bạn không cần lo lắng về việc tải chậm. Ngoài ra, tất cả chúng đều trông hợp thời trang và phù hợp với thiết kế giao diện người dùng ngày nay. Tất cả sáu thiết kế hộp kiểm đều được tạo hoàn toàn bằng cách sử dụng tập lệnh CSS3 và HTML5. Bạn có thể dễ dàng sử dụng đoạn mã này cho thiết kế của mình. Tất cả những gì bạn phải làm là chọn thiết kế bạn thích, chỉnh sửa và sử dụng nó trong thiết kế của bạn

Thông tin / Tải xuống Bản trình diễn

Nút chuyển đổi tiện lợi

Trong thiết kế giao diện người dùng hiện đại, các nhà thiết kế cố gắng làm cho các yếu tố tương tác hơn. Các hộp kiểm được thay thế bằng các nút chuyển đổi trong một số ứng dụng để mang lại trải nghiệm độc đáo cho người dùng. Nếu bạn cũng định sử dụng các nút chuyển đổi thay vì các thiết kế hộp kiểm cũ, thì ví dụ này sẽ cung cấp cho bạn một số ý tưởng. Các loại hiệu ứng hoạt hình tương tác khác nhau được sử dụng trong ví dụ này để mang lại cảm giác chân thực khi bật/tắt một nút. Các nút chuyển đổi 3D cũng được cung cấp trong thiết kế này, điều này sẽ giúp bạn có trải nghiệm chân thực. Để mang đến cho bạn hiệu ứng hoạt hình mượt mà, nhà phát triển đã sử dụng cả CSS3 và Javascript framework trong thiết kế

Thông tin / Tải xuống Bản trình diễn

Nút chuyển đổi giới tính

Trong vài năm, một trong những nơi hộp kiểm được sử dụng phổ biến là lựa chọn giới tính. Trong thiết kế này, nhà phát triển đã sử dụng một nút chuyển đổi để lựa chọn giới tính. Khi quá trình phát triển web đã được cải thiện rất nhiều, giờ đây bạn có thể thêm các hoạt ảnh nhỏ để tạo các yếu tố sinh động. Nhà phát triển đã sử dụng các hiệu ứng hoạt hình và màu sắc đơn giản để biểu thị tùy chọn do người dùng chọn. Hiệu ứng hoạt hình trôi chảy và gọn gàng để người dùng có thể cảm nhận được hiệu ứng. Thiết kế mặc định sẽ phù hợp hoàn hảo cho cả trang web và ứng dụng di động. Bằng cách thực hiện một vài điều chỉnh đối với mã, thiết kế hộp kiểm bootstrap này có thể dễ dàng được tích hợp vào bất kỳ trang web nào

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm lấy cảm hứng từ iOS

Nếu bạn từng có cơ hội sử dụng hệ điều hành Symbian hoặc các phiên bản Android cũ hơn, bạn có thể thấy các hộp kiểm trong bảng điều khiển và trong khu vực cài đặt. Thiết kế giao diện người dùng đã phát triển rất nhiều, giờ đây chúng tôi có các yếu tố rất tự nhiên để sử dụng. Trong ví dụ này, nhà phát triển đã sử dụng các hộp kiểm được sử dụng trong iOS. Nếu bạn định bắt chước các nút chuyển đổi hộp kiểm iOS trong thiết kế của mình, mã này có thể tiết kiệm thời gian của bạn. Để mang đến cho bạn cảm giác chân thực, nhà phát triển đã sử dụng một mẫu iPhone trong các thiết kế. Hãy xem bộ sưu tập mô hình iPhone cầm tay của chúng tôi để cho biết thiết kế của bạn trông như thế nào trong cuộc sống hàng ngày

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm tùy chỉnh

Một khu vực khác mà các hộp kiểm vẫn được sử dụng là trong danh sách kiểm tra. Có một số ứng dụng giúp bạn sắp xếp công việc của mình và nếu bạn đang định tạo một danh sách kiểm tra theo phong cách viết tay, thì thiết kế này sẽ cho bạn một ý tưởng. Các hộp kiểm rất đơn giản và có thể được sử dụng mà không gặp vấn đề gì. Nhà phát triển đã lựa chọn phông chữ một cách khôn ngoan, để mang lại cảm giác chân thực về danh sách việc cần làm theo phong cách viết tay. Vẫn còn nhiều chỗ cần cải thiện và mã được chia sẻ trực tiếp với bạn. Sử dụng mã, bạn có thể tạo các hộp kiểm tùy chỉnh của riêng mình trong vòng vài phút

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm kiểu

Những nhà thiết kế giỏi nhất không làm những điều khác biệt, họ làm những điều khác biệt. Bạn không cần phải mô phỏng lại hoàn toàn thiết kế hộp kiểm, nhưng bạn có thể thay đổi phong cách của nó. Trong ví dụ này, nhà phát triển đã cung cấp cho bạn các khái niệm khác nhau về thiết kế hộp kiểm. Để thuận tiện cho bạn, cả hộp kiểm hình chữ nhật và hình tròn được cung cấp trong bộ này. Với các hiệu ứng và hình dạng hoạt hình tinh tế, nhà phát triển đã mang đến cho chúng ta các phần tử hộp kiểm trông rất phong cách. Một số thiết kế thậm chí sẽ giúp bạn tạo các nút radio trông độc đáo. Vì toàn bộ thiết kế được tạo bằng tập lệnh CSS3, bạn có thể dễ dàng triển khai bất kỳ thiết kế nào trong dự án của mình

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm nhỏ hạnh phúc

Tác giả của hộp kiểm này đã sử dụng hiệu ứng nảy đàn hồi cho các hộp. Vì hiệu ứng được sử dụng rất mạnh nên người dùng có thể thấy rõ họ đang chọn ô nào. Trong thiết kế mặc định, hộp bóp theo chiều dọc. Nhưng nếu bạn đang sắp xếp các hộp theo hàng dọc, bạn có thể thay đổi hướng hoạt ảnh theo thiết kế của mình. Code được cấu trúc hợp lý sẽ giúp bạn dễ dàng tìm và chỉnh sửa tính năng mình muốn. Một điều quan trọng khác trong thiết kế này là tác giả đã sử dụng hiệu ứng hoạt hình cho cả việc chọn và bỏ chọn hộp kiểm. Thời gian hoạt hình là hoàn hảo trong thiết kế này và người dùng sẽ không cảm thấy bất kỳ độ trễ nào

Thông tin / Tải xuống Bản trình diễn

Di chuyển hộp/nút

Hoạt hình viền là hiệu ứng hoạt hình rất đơn giản nhưng hấp dẫn. Bản chất đơn giản của hoạt hình đường viền làm cho nó trở thành một lựa chọn hoàn hảo cho cả trang web tối giản và đầy màu sắc. Trong ví dụ này, nhà phát triển đã sử dụng hiệu ứng đường viền cho cả nút và hộp kiểm. Vì nhà phát triển đã tập trung nhiều hơn vào hoạt ảnh nên bạn không nhận được hộp kiểm có thể nhấp được. Nhưng đó là một vấn đề nhỏ, bạn có thể dễ dàng khắc phục nó ngay lập tức. Tất cả các hình ảnh động đều rất nhỏ do đó bạn có thể dễ dàng sử dụng hiệu ứng này trên bất kỳ trang web nào. Sử dụng các hiệu ứng hoạt hình như thế này cho các nút quan trọng trên trang web của bạn sẽ giúp người dùng hiểu được tầm quan trọng của nút

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm thiết kế vật liệu

Hộp kiểm Thiết kế Vật liệu là một thiết kế hộp kiểm dựa trên hoạt ảnh đường viền khác. Nhưng trong thiết kế này, hoạt ảnh được kích hoạt khi bạn nhấp vào nút. Hộp kiểm trong thiết kế này có thể nhấp được và người dùng sẽ thích sử dụng hộp kiểm này. Trong thiết kế mặc định, hộp kiểm rất nhỏ và cách phối màu cũng không tốt. Vì toàn bộ cấu trúc mã được chia sẻ trực tiếp với bạn nên bạn có thể dễ dàng điều chỉnh mã theo nhu cầu của mình. Ngoài ra, thiết kế này sử dụng tập lệnh CSS3, do đó bạn có nhiều tùy chọn tùy chỉnh

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm tạo kiểu

Trong ví dụ này, nhà phát triển đã cung cấp cho bạn các ví dụ khác nhau về cách tạo kiểu hộp kiểm. Bằng cách giữ nguyên chức năng cốt lõi, nhà phát triển chỉ thay đổi giao diện của các hộp kiểm. Cùng với các hộp kiểm, bạn cũng có các thiết kế nút radio trong bộ này. Màu sắc được sử dụng hiệu quả để hiển thị các nút rõ ràng cho người dùng. Nếu bạn cảm thấy các nút không có hoạt ảnh này hơi nhàm chán, bạn có thể sử dụng các hoạt ảnh tùy chỉnh của riêng mình. Vì đây là các hộp kiểm bootstrap nên bạn có thể dễ dàng chỉnh sửa chúng theo nhu cầu thiết kế của mình và thậm chí có thể sử dụng nó trong thiết kế đáp ứng

Thông tin / Tải xuống Bản trình diễn

Khóa

Khóa là một thiết kế hộp kiểm sáng tạo. Với những thiết kế như thế này, bạn có thể giao tiếp rõ ràng với người dùng của mình. Thiết kế mặc định đơn giản, bạn có thể khóa hoặc mở tùy chọn. Nếu bạn định sử dụng một yếu tố tương tác cho cài đặt ứng dụng của mình, thì thiết kế này sẽ làm được. Không chỉ thiết kế mà cấu trúc mã cũng đơn giản trong thiết kế này. Bạn có thể dễ dàng thiết kế dựa trên CSS3 này và có thể thêm gia vị cho thiết kế. Trong thiết kế hộp kiểm bootstrap này, người tạo đã sử dụng khóa, bằng cách giữ điều này làm nguồn cảm hứng, bạn có thể sử dụng bất kỳ yếu tố nào khác dựa trên nhu cầu thiết kế của mình

Thông tin / Tải xuống Bản trình diễn

Đầu vào hộp kiểm Chippy

Các hộp kiểm cũng được sử dụng để chọn nhiều mục. Nếu bạn đang thiết kế một thanh tìm kiếm nâng cao, các hộp kiểm như thế này sẽ giúp người dùng dễ dàng chọn các tùy chọn họ muốn. Không chỉ trong các hộp tìm kiếm mà bạn còn có thể sử dụng điều này trong các trang web có nội dung phong phú như trang web tạp chí và trang web thư mục. Một hình động xoay nhỏ được sử dụng cho biểu tượng dấu cộng trong thiết kế. Quá trình chuyển đổi của dấu tích đủ nhanh để trộn lẫn dấu tích và dấu cộng. Giống như thiết kế Khóa trước, thiết kế này cũng được tạo bằng tập lệnh HTML5 và CSS3. Cấu trúc mã đơn giản sẽ giúp bạn dễ dàng tùy chỉnh thiết kế hộp kiểm bootstrap này

Thông tin / Tải xuống Bản trình diễn

Chuyển đổi nút hoạt ảnh

Đó là một hoạt ảnh nút khác cho hộp kiểm. Người tạo đã sử dụng hoạt ảnh cho cả dấu tích và dấu chéo. Vì điện thoại thông minh hiện đại có RAM lớn hơn và đồ họa lớn hơn, nên việc sử dụng hoạt ảnh trong ứng dụng dành cho thiết bị di động của bạn sẽ đưa thiết kế của bạn lên một tầm cao mới. Nhưng chúng tôi phải rất ý thức về các hiệu ứng hoạt hình vì hầu hết người dùng không bao giờ quay lại ứng dụng nếu trải nghiệm đầu tiên của họ không tốt. Hoạt hình hộp kiểm này nhanh và rõ ràng, sẽ dễ dàng phù hợp với bất kỳ phần nào của ứng dụng và trong các trang web. Để cung cấp cho bạn trải nghiệm hoạt hình mượt mà, nhà phát triển đã sử dụng cả CSS3 và Javascript trong mã này

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm bút chì và giấy

Trong tất cả các ví dụ về hộp kiểm bootstrap trước đây, chúng ta đã thấy hoạt ảnh trong các phần tử. Nhà phát triển thiết kế này đã sử dụng hoạt hình chuyên dụng cho các hộp kiểm. Khi đánh dấu vào một hộp, bạn có thể thấy một chiếc bút chì đang đánh dấu và xóa dấu đánh dấu khi bạn bỏ đánh dấu tùy chọn. Nếu bạn đang sử dụng một thiết kế khảo sát tương tác như thế này sẽ rất thú vị cho người dùng. Nhiều blogger có lượng độc giả lớn tiến hành một cuộc thăm dò ý kiến ​​hoặc khảo sát trên blog của họ để tìm ra giải pháp tốt hơn. Nếu bạn đang tạo một biểu mẫu khảo sát cho một đối tượng độc đáo như vậy, thiết kế này sẽ là một lựa chọn tốt. Hãy nhìn vào ba của chúng tôi. js để có thêm cảm hứng như thế này

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm CSS thuần túy

Trong ví dụ này, nhà phát triển đã sử dụng hiệu ứng hoạt hình lật cho hộp kiểm. Thiết kế đơn giản và áp dụng thực tế trong tất cả các trang web và biểu mẫu. Trong thiết kế mặc định, hộp và dấu tích có thể trông hơi lỗi thời, nhưng bạn có thể sửa chúng dễ dàng. Vì toàn bộ thiết kế được tạo bằng tập lệnh HTML5 và CSS3, bạn có thể dễ dàng chỉnh sửa các thành phần. Ngoài ra, nhà phát triển đã xử lý mã đúng cách để bạn có thể dễ dàng tìm và chỉnh sửa các phần tử trong vài phút

Thông tin / Tải xuống Bản trình diễn

Hộp kiểm tra các tông

Cardboard CheckBox là một thiết kế hộp kiểm bootstrap thú vị và sáng tạo khác. Đúng như tên gọi, nhà phát triển đã sử dụng thiết kế bìa cứng cho các hộp kiểm. Nếu bạn đang tạo hộp kiểm cho trang web của công ty đóng gói hoặc cho trang giao hàng thì thiết kế này sẽ hoàn toàn phù hợp. Các hiệu ứng hoạt hình nhanh và mượt mà để người dùng không phải đợi hộp được chọn. Nếu bạn đang kinh doanh bao bì hoặc thiết kế bao bì, hãy xem các mẫu bao bì của chúng tôi để giới thiệu sản phẩm và thiết kế của bạn một cách trang nhã tới người dùng

Thông tin / Tải xuống Bản trình diễn

hộp kiểm thạch

Jelly Checkbox là một phiên bản đơn giản và sang trọng của thiết kế hộp kiểm Happy little bootstrap đã đề cập ở trên. Trong thiết kế này cũng có một hộp kiểm nảy. Nhà phát triển đã cung cấp cho bạn một hộp kiểm đầy màu sắc và trông sạch sẽ mà bạn có thể dễ dàng sử dụng trên bất kỳ phần nào của trang web. Trong thiết kế mặc định, bạn có một hộp kiểm nhỏ, nhưng bạn có thể dễ dàng thay đổi kích thước chúng. Vì nhà phát triển chủ yếu sử dụng tập lệnh CSS3 để tạo thiết kế này, sử dụng thiết kế này sẽ là một công việc dễ dàng. Nhà phát triển đã chia sẻ toàn bộ mã với bạn để giúp bạn dễ dàng sử dụng mã trong thiết kế của mình

Làm cách nào để tạo danh sách hộp kiểm trong Bootstrap?

Làm cách nào để tùy chỉnh hộp kiểm Bootstrap?

Làm cách nào để sử dụng nhiều hộp kiểm trong Bootstrap?

Nhóm danh sách tuôn ra là gì?