20 Kotak Multiselect Bootstrap Untuk Aplikasi Web Anda

Widget multiselect Bootstrap kami membantu pengguna Anda memilih beberapa item dengan nyaman di ponsel dan desktop. (Anda bahkan dapat menetapkan batas!)

Kami memastikan untuk membuat kumpulan contoh SERBAGUNA yang dapat Anda terapkan pada apa pun.

Kode ini sederhana dan ramah bagi pemula, cocok untuk pengguna dari semua tingkat keahlian .

Berkenaan dengan menggunakan widget multiselect Bootstrap, Anda harus terlebih dahulu memasukkan library Javascript jQuery.

Selesaikan tepat sebelum Anda menampilkan file JavaScript utama Bootstrap. File plugin JS dan CSS juga perlu diatur di <head. Anda dapat menginstalnya langsung dari halaman web GitHub dari pengembang web.

Ide sederhana untuk mengembangkan elemen <select> memastikan bahwa Anda memiliki atribut yang unik dan ditunjuk untuknya. Ada kebutuhan untuk mengidentifikasi atribut multiple="multiple" value="somevalue".

Ini adalah pilihan opsi yang perlu Anda bungkus di dalam komponen jumlah elemen <option>. Ini akan memberi mereka atribut value="some-value" yang dibutuhkan.

Anda juga memiliki KONTROL atas gaya. Perkaya multiselect pilihan sesuka Anda .

cepat. Dan. Mudah.

Widget Multiselect Bootstrap Terbaik

Multipilih V01

Mari kita mulai dengan widget multiselect Bootstrap sederhana untuk memilih bahasa pemrograman. Sebelum kita melangkah lebih jauh, jika Anda ingin menggunakan cuplikan gratis ini untuk hal lain, Anda dapat memodifikasinya sesuka hati Anda.

Tapi sungguh, desainnya sangat mendasar dan sederhana, memastikannya bekerja dengan berbagai proyek dan aplikasi secara default.

Sementara pengguna dapat memilih item yang berbeda secara MANUAL, mereka juga dapat menekan kotak pilih semua jika semuanya menarik bagi mereka. Selain itu, bilah utama menampilkan pilihan pengguna.

Info lebih lanjut / Unduh Demo

Multipilih V02

Permudah dan nyaman bagi pengguna Anda untuk memilih topik yang berbeda dengan Multiselect V02. Ini adalah widget Bootstrap yang tampil elegan di perangkat seluler dan desktop.

Widget mengikuti tampilan yang cukup minimalis, pastikan Anda TIDAK perlu melakukan perubahan apa pun untuk menggunakannya apa adanya.

Saat Anda memilih topik, topik tersebut akan muncul di bidang tampilan dengan opsi untuk mengklik tanda X untuk menghapusnya. Baik itu memilih satu topik atau semua, pilihan ganda ini mendukung keduanya.

Info lebih lanjut / Unduh Demo

Multipilih V03

Jika cuplikan multiselect Bootstrap di atas menampilkan nama topik saat dipilih, yang ini membuatnya SANGAT sederhana dengan pilihan nomor.

Namun, keistimewaan utama Multiselect V03 adalah perubahan warna font bahasa. Saat diarahkan, itu berubah menjadi biru, tetapi saat diklik, itu berubah menjadi biru dan tebal.

Struktur yang fleksibel juga memastikan adaptasi yang mulus ke perangkat seluler, tablet, dan desktop.

Info lebih lanjut / Unduh Demo

Multipilih V04

Multiselect V04 adalah bilah dengan "tidak ada yang dipilih" di dalamnya dan chevron. Setelah Anda mengkliknya, drop-down terbuka dengan beberapa opsi untuk dipilih.

Setelah Anda memilih item, efek klik biru muncul dengan tanda centang merah dan tampilan item di bilah utama.

Setiap orang dapat memilih atau membatalkan pilihan sebanyak mungkin item, topik, atau lainnya yang mereka inginkan, terlepas dari perangkat yang mereka gunakan.

Info lebih lanjut / Unduh Demo

Multipilih V05

Multiselect V05 adalah cuplikan Bootstrap gratis yang fantastis yang membantu Anda mewujudkan multi-pilihan pada aplikasi atau situs web Anda.

Tidak masalah apa tujuan utama dari multi-pilih, Anda dapat dengan nyaman dan efektif memanfaatkan yang satu ini untuk semuanya.

Widget memiliki tata letak yang sedikit lebih lebar daripada beberapa alternatif kami yang lain, yang membuat tampilan pilihan yang berbeda menjadi lebih nyaman.

Drop-down juga menampilkan kotak centang dan lima opsi secara default. Jadikan itu milik Anda, sempurnakan dan mulai dari sana.

Info lebih lanjut / Unduh Demo

Multipilih V06

Multiselect V06 mungkin terlihat seperti widget multiselect Bootstrap rata-rata lainnya, tetapi jauh dari itu. Dengan desain modern dan animasi keren, cuplikan gratis ini tahu cara membumbui segalanya .

Dengan kata lain, jika Anda mencari sesuatu yang tidak terlalu tradisional, Anda akan melakukan hal yang benar dengan memilih Multiselect V06.

Tetapi pertama-tama, Anda dapat MENGUJInya dengan mengunjungi pratinjau demo langsung (bahkan di perangkat seluler).

Info lebih lanjut / Unduh Demo

Multipilih V07

Beberapa multiselect dari koleksi ini lebih pada sisi minimalis sementara beberapa datang cukup kreatif. Jika Anda lebih menyukai yang terakhir, Anda harus mengintip kinerja Multiselect V07 sekarang.

Ini fitur bidang yang merespon pada hover, mengubah warna teks dan garis. Setelah Anda mengkliknya, drop-down tebal muncul dengan topik berbeda yang menghilang dari drop-down dan muncul di bilah utama saat diklik.

Silakan, coba dan buktikan sendiri.

Info lebih lanjut / Unduh Demo

Multipilih V08

Multiselect Bootstrap dapat terdiri dari hanya topik atau item untuk dipilih, tetapi Anda juga dapat memecahnya ke dalam kategori yang berbeda .

Ini sangat membantu jika ada banyak item, karena akan MENINGKATKAN pengalaman pengguna ketika menemukan hal-hal yang menarik bagi mereka.

Multiselect V08 adalah ilustrasi yang bagus tentang itu, yang sekarang dapat Anda mainkan dan mewujudkannya dengan cepat.

Ini juga menampilkan efek hover dan struktur kode ramah pemula untuk semua orang untuk mendapatkan hasil maksimal darinya.

Info lebih lanjut / Unduh Demo

Multipilih V09

Untuk semua orang yang datang ke koleksi ini untuk mencari cuplikan multiselect yang gelap , bantulah diri Anda sendiri dan pilih Multiselect V09. Ini adalah alternatif modern dengan semua yang diperlukan untuk membuat Anda segera bergerak maju.

Alat ini dioptimalkan untuk kinerja seluler dan desktop yang hebat dan menyertakan kode yang mudah dicerna.

Untuk membuat keseluruhan presentasi LEBIH dinamis dan menarik bagi mata, Multiselect V09 memperkaya berbagai hal dengan nada kuning yang menarik.

Info lebih lanjut / Unduh Demo

Multipilih V10

Ketika datang ke multiselect dengan banyak potongan di dalamnya, menemukannya dengan menggulir bisa sangat merepotkan. Untuk membuat hidup pengguna jauh lebih sederhana, inilah Multiselect V10.

Cuplikan gratis ini hadir dengan fungsi pencarian langsung praktis yang mengungkapkan hit segera setelah Anda mulai mengetik.

Anda kemudian dapat mengklik tanda X untuk menghapus bilah pencarian dan memulai dengan pencarian baru.

Info lebih lanjut / Unduh Demo

Multipilih V11

Multiselect Bootstrap ini memiliki dua cara untuk memilih item dari drop-down.

Pertama, Anda dapat menelusurinya dan memilih yang Anda suka dengan mengkliknya .

Dan kedua, multiselect ini juga menawarkan pilihan dengan mengetiknya dan memisahkan pick yang berbeda dengan koma.

Hal keren lainnya tentang Multiselect V11 adalah fungsi pencarian langsung yang menawarkan riset cepat langsung dari bilah utama. Juga, item yang Anda pilih berubah menjadi abu-abu untuk visibilitas yang lebih baik.

Info lebih lanjut / Unduh Demo

Multipilih V12

Multiselect V12 tahu betul bagaimana memadukan kesederhanaan dengan kepraktisan untuk pengalaman pengguna yang HEBAT.

Sementara alat gratis berfokus pada status secara default, dropdown multiselect ini dengan fungsi pencarian langsung (dipisahkan dengan koma) sangat bagus untuk hal lain.

Anda dapat menggunakannya untuk memilih topik, item, bahasa, yah, Anda mendapatkan intinya – semuanya berfungsi .

Info lebih lanjut / Unduh Demo

Multipilih V13

Ya, Anda bahkan dapat menggunakan multiselect Bootstrap untuk nama, seperti dalam kasus Multiselect V13. Meskipun cuplikan gratis ini cukup SERUPA dengan yang di atas, perbedaan utamanya adalah pilihan warna untuk seleksi.

Yang satu ini memiliki warna pirus yang indah. Pencarian langsung, pemisahan item koma, atau pemilihan manual dari drop-down adalah semua hal yang menarik dari Multiselect V13.

Info lebih lanjut / Unduh Demo

Multipilih V14

Multiselect V14 adalah cuplikan gratis yang luar biasa untuk pemilihan negara. Saat Anda mengklik bilah, drop-down terbuka dengan lima puluh negara bagian untuk dipilih.

Meskipun Anda dapat memilih sebanyak atau sesedikit yang Anda inginkan, ada juga tombol CEPAT " pilih semua " untuk memilih seluruh daftar.

Selain itu, nama hingga empat muncul di bilah tetapi lebih dari itu, widget menampilkan angka. Tata letak juga berubah secara instan ke perangkat seluler .

Info lebih lanjut / Unduh Demo

Multipilih V15

Jika Anda tertarik dengan gaya multiselect Bootstrap yang lebih mirip daripada yang sebelumnya, Multiselect V15 adalah alternatif yang bagus. Ini menampilkan lima puluh negara bagian dalam tiga kolom dengan fungsi serupa.

Gaya yang sama tetap utuh baik melihatnya di ponsel, tablet, atau desktop. Terlebih lagi, Multiselect V15 menampilkan efek hover dan mengubah status terpilih menjadi biru, yang menunjukkannya dengan tanda centang.

Anda juga dapat memilih semua dengan SATU klik.

Info lebih lanjut / Unduh Demo

Multipilih V16

Multiselect V16 adalah widget multiselect Bootstrap terbaik lainnya untuk pemilihan negara secara default. Itu membuat desain tetap modern dan minimal dengan beberapa fitur keren.

Efek hover abu-abu, animasi klik, tanda centang, dan pintasan keyboard cepat untuk memilih item berdasarkan karakter alfabet adalah sorotan utama Multiselect V16.

Tidak ada opsi "pilih semua" di sini, jadi pengguna perlu membuat semua pilihan secara MANUAL.

Info lebih lanjut / Unduh Demo

Multipilih V17

Terkadang, Anda ingin MEMBATASI jumlah pilihan yang dapat dibuat pengguna. Jika ini masalahnya, saat itulah Multiselect V17 ikut bermain. Cuplikan gratis ini membatasi pilihan hingga tujuh, tetapi Anda dapat membuat perubahan jika perlu.

Selain itu, status muncul di bilah di atas dan pilihan di drop-down berubah menjadi hijau dan menampilkan tanda centang. Ketika batas terpenuhi, efek klik masih ada, tetapi pemilihan tidak terjadi.

Info lebih lanjut / Unduh Demo

Multipilih V18

Multiselect V18 adalah multiselect Bootstrap yang cukup canggih dengan spesialisasi berbeda yang membuatnya menonjol.

Hal pertama yang pertama, ini menampilkan grup di drop-down, memecah segalanya dengan indah untuk meningkatkan pengalaman pengguna. Selain itu, setiap grup dilengkapi dengan batasan pilihan individual, seperti widget sebelumnya.

Meskipun pilihan ganda ini adalah untuk keadaan di luar kotak, Anda tidak perlu membatasi diri Anda dengan cara, bentuk, atau bentuk apa pun. Manfaatkan TOTAL Anda dan hemat waktu.

Info lebih lanjut / Unduh Demo

Multipilih V19

Drop-down yang mudah dan serba guna dengan fitur multipilihan yang kini dapat Anda buat sendiri tanpa mengeluarkan uang sepeser pun.

Multiselect V19 sangat bagus untuk semua jenis pilihan, karena Anda akan mudah melakukan penyesuaian dan peningkatan agar sesuai dengan kebutuhan Anda.

Saat memilih item yang berbeda, Anda dapat melakukannya dari drop-down dengan kursor mouse atau bahkan mengetiknya di bilah dan tekan enter. Selanjutnya, setiap pilihan juga berubah menjadi abu-abu, tetapi Anda dapat membatalkan pilihan dengan menekan tombol X.

Info lebih lanjut / Unduh Demo

Multipilih V20

Untuk membawa hal-hal ke tingkat berikutnya, pilih cuplikan multiselect Bootstrap tiga-dalam-satu ini dan buat perbedaan SEGERA.

Anda dapat dengan mudah memecah berbagai hal ke dalam kategori BERBEDA dan membatasi berapa banyak item yang dapat dipilih seseorang dengan multiselect. Pemilihan terjadi baik dengan mengumpulkan item dari drop-down atau mengetiknya dan menekan enter (fitur pencarian langsung terintegrasi).

Widget ini juga menggunakan warna berbeda untuk berbagai kategori/multipilihan, yang juga dapat Anda tingkatkan.

Info lebih lanjut / Unduh Demo

Sekarang, Anda telah belajar lebih banyak tentang banyak plugin Bootstrap Multiselect yang berbeda dan semua hal yang dapat dilakukan untuk fungsionalitas situs web Anda.