Jika Anda mencari kotak centang Bootstrap yang luar biasa, posting blog ini akan berguna untuk Anda. Posting ini mencantumkan yang terbaik gratis Bootstrap contoh kotak centang, dengan tombol ‘Demo’ dan ‘Unduh’ yang mengeklik yang dapat Anda lihat pratinjau kotak centang dan dapat mengunduhnya. Artikel ini juga akan memberi Anda deskripsi singkat tentang contoh kotak centang.
Kotak centang memungkinkan Anda memilih item. Melalui kotak centang, Anda dapat membiarkan pengunjung situs web atau pengguna aplikasi Anda memilih satu atau beberapa item. Elemen situs web ini berguna dalam banyak situasi. Misalnya, jika Anda memiliki situs belanja, ini berguna ketika Anda ingin mengizinkan pelanggan Anda memilih beberapa produk. Ini hanya satu contoh. Anda dapat menggunakannya untuk berbagai keperluan lainnya. Untuk memberi Anda contoh lain, Anda dapat membiarkan pengguna memilih beberapa item pada saat pendaftaran. Anda juga dapat menggunakannya untuk memungkinkan pengguna Anda menerapkan beberapa filter menggunakan kotak centang untuk pencarian lanjutan. Jadi ada yang tak terhitung jumlahnya contoh.
Jika Anda memerlukan kotak centang untuk aplikasi web Anda, lihat contoh kotak centang ini yang tercantum dalam posting ini. Contoh-contoh ini indah. Jadi mereka akan terlihat bagus di situs web Anda dan akan sangat meningkatkan pengalaman pengguna situs Anda.
Contoh kotak centang ini dilengkapi dengan label yang bisa dilepas. Contoh ini telah dirancang dengan baik dengan Bootstrap, oleh Elizabet Oliveira, pengguna CodePen. Pena ini memiliki tiga kotak centang dengan label ‘Ball Parker’, ‘Health Ryan’, dan ‘Burgess Doylo’. Kotak centang terlihat sangat keren.
Ketika Anda mengklik pada item, mereka tidak hanya diperiksa / dipilih dengan ikon centang kecil, label kotak centang juga muncul di bagian bawah dengan latar belakang hijau. Jadi jika Anda memilih dua item dari daftar ini, dua label dengan latar belakang hijau muncul di bagian bawah, yang dapat Anda hapus dengan mengklik ikon silang kecil di label hijau.
Label warna hijau menunjukkan bahwa item ini telah dipilih. Saat Anda menghapus label hijau, item juga tidak dipilih.
Kotak centang dalam contoh ini telah dikembangkan menggunakan AngularJS dan Bootstrap. Contoh ini adalah pena yang dibuat oleh Chris Perko. Ini memiliki dua kelompok kotak centang. Di grup pertama, pengguna dapat memilih beberapa item, sementara di grup kedua, pengguna hanya dapat memilih satu item. Di grup kotak centang kedua, saat pengguna memilih kotak centang, yang lain dinonaktifkan. Jadi pengguna tidak dapat memilihnya.
Ketika pengguna memilih item, ikon centang hitam muncul yang menunjukkan bahwa item telah dipilih. Kotak centang adalah kotak. Warna yang digunakan adalah hitam, Anda bisa mengubahnya agar contohnya terlihat lebih baik.
Seperti namanya, ikon khusus telah digunakan dalam contoh kotak centang ini. Hasilnya, kotak centang tampak modern. Contoh kotak centang Bootstrap ini telah dikembangkan oleh Stavros, pengguna CodePen, dan telah dirancang dengan indah menggunakan Bootstrap, kerangka kerja CSS yang kuat. Dalam contoh ini, ada dua kotak centang, dengan label label Label kanan ’dan‘ Label kiri ’yang hanya berupa sampel teks yang perlu diubah jika Anda akan menggunakan contoh ini di situs web Anda.
Ketika Anda mengklik pada kotak centang, ikon centang keren muncul. Mereka menunjukkan bahwa item telah dipilih. Untuk membatalkan pilihan item, pengguna hanya perlu mengklik item.
Contoh kotak centang ini telah dikembangkan oleh Guilherme lazzetta, pengguna CodePen. Pena ini adalah contoh sederhana dari tombol kotak centang yang dirancang dengan Bootstrap. Jadi ini bukan kotak centang tradisional. Alih-alih, ini adalah tombol kotak centang, artinya ini adalah tombol dan juga kotak centang pada saat yang sama. Ini adalah tombol yang dapat dicentang dan tidak dicentang seperti kotak centang.
Ini adalah tombol kotak centang yang indah dengan latar belakang putih dan tepi hitam tipis. Ketika Anda mengarahkan kursor ke tombol ini, warna latar berubah menjadi abu-abu terang, dan ketika Anda mengklik tombol, itu menjadi diperiksa dan warna latar belakang berubah menjadi hijau. Sekarang bahkan jika Anda memindahkan mouse Anda dari tombol, warna latar belakang yang berwarna hijau tetap sama, menunjukkan bahwa tombol tersebut dalam keadaan diperiksa sekarang. Untuk menghapus centang, cukup klik tombol lagi.
Contoh kotak centang ini dikembangkan oleh Kostya adalah kombinasi tombol dan kotak centang. Teks tombol adalah ‘Kotak Centang Default’ yang perlu diubah ke nama item yang sesuai jika Anda ingin menggunakannya di situs web Anda. Warna latar belakang tombol abu-abu terang. Ada area persegi panjang kecil di sisi kiri tombol dengan latar belakang putih dan batas hitam yang sangat tipis. Ikon centang muncul di area ini ketika Anda mengklik tombol.
Untuk membatalkan pilihan, pengguna hanya perlu mengklik tombol lagi dan ikon centang akan hilang. Alih-alih menggunakan kotak centang tradisional, gunakan tombol kotak centang modern ini di situs Anda jika Anda ingin memberi pengunjung situs pengalaman pengguna yang lebih baik.
Contoh kotak centang ini dikembangkan oleh Balaji memberi Anda kotak centang Bootstrap yang bagus. Ini adalah tombol kotak centang yang mirip dengan contoh sebelumnya.
Contoh ini menunjukkan dua kelompok tombol kotak centang dengan judul ‘Kotak Centang Standar’ dan ‘Kotak Centang Ikon Kustom’. Berbagai warna telah digunakan untuk tujuan yang berbeda. Misalnya, warna hijau dalam kotak centang menunjukkan keberhasilan.
Di grup pertama kotak centang ini, ikon centang muncul ketika item dipilih. Di grup kedua, ikon ‘+’ dan ‘-’ digunakan. Jadi ketika pengguna mengkliknya, ikon ‘+’ akan muncul jika ikon ‘-’ ada di sana. Dan itu akan berubah menjadi ‘+’ jika Anda mengkliknya lagi.
Dalam beberapa kasus, ikon centang akan lebih sesuai sementara ikon ‘+’ / ’-’ akan lebih cocok dalam banyak kasus. Lihat mana yang terlihat sangat sesuai untuk jenis antarmuka pengguna situs web yang Anda bangun.
Contoh ini memberi Anda kotak centang dan tombol radio yang dirancang oleh inimist, pengguna CodePen. Judul kotak centang adalah ‘Pilih olahraga favorit Anda’. Kotak centang ini memungkinkan pengguna memilih olahraga favoritnya. Pengguna dapat memilih banyak item.
Ketika pengguna memilih item, ikon centang hitam, kecil muncul di kotak centang.
Judul untuk tombol radio adalah is Pilih jenis kelamin Anda ’. Seperti judulnya, tombol radio ini memungkinkan pengguna menentukan jenis kelaminnya. Ada dua opsi, yaitu 'Pria' dan 'Wanita'. Pengguna hanya dapat memilih satu opsi, baik pria atau wanita. Ia tidak dapat memilih keduanya.
Contoh kotak centang Bootstrap ini menunjukkan tiga kotak centang. Dengan mengklik label atau pada kotak kecil, Anda dapat memilih / membatalkan pilihan item. Saat Anda memilih item, ikon centang hijau ditampilkan di kotak centang.
Pena ini telah dikembangkan oleh Marissa. Kotak centang telah dirancang menggunakan Bootstrap. Jadi mereka terlihat luar biasa.
Jika Anda menyukai kotak centang dalam contoh ini, Anda dapat menggunakannya di situs web Anda. Tetapi untuk itu, Anda harus melakukan beberapa modifikasi. Misalnya, Anda perlu mengubah atau menghapus tajuk. Anda juga harus mengubah label kotak centang.
Ini adalah tombol kotak centang Bootstrap yang sangat sederhana yang dikembangkan Lukas, pengguna CodePen. Untuk membuat kotak centang ini, hanya beberapa baris kode yang telah ditulis. Contoh ini menunjukkan betapa mudahnya membuat kotak centang modern menggunakan HTML5, CSS, dan Bootstrap.
Warna latar belakang tombol kotak centang ini adalah kuning yang telah digunakan untuk mewakili peringatan. Label kotak centang ini adalah ‘Barang’, yang harus Anda ubah menjadi apa pun yang sesuai untuk aplikasi web yang Anda buat.
Saat Anda mengarahkan mouse ke tombol, itu menjadi sedikit lebih gelap. Efek pada mouseover ini keren.
Contoh ini dikembangkan oleh Atanas Atanasov menunjukkan beberapa kotak centang. Salah satunya adalah kotak centang tradisional sedangkan yang lain adalah tombol kotak centang. Jadi ketika Anda mengklik kotak centang tradisional, ikon centang muncul di dalamnya. Tidak memiliki label tetapi Anda dapat menambahkannya.
Tombol kotak centang memiliki label berbeda yang harus Anda ubah jika Anda ingin menggunakannya di situs Anda. Ketika Anda mengarahkan mouse ke atasnya, warna latar belakangnya berubah menjadi abu-abu, dan ketika mereka berada dalam keadaan diperiksa, warna latar belakang berubah menjadi abu-abu juga.
Contoh ini memberi Anda dua jenis kotak centang – tombol tradisional dan kotak centang. Gunakan apa pun yang terlihat bagus di situs Anda.
Contoh ini menunjukkan beberapa kotak centang Bootstrap dan tombol radio. Ada berbagai jenis kotak centang dan tombol radio dengan berbagai bentuk dan ukuran. Contoh ini menunjukkan kotak centang dengan banyak warna. Setiap warna digunakan untuk tujuan tertentu. Misalnya, warna hijau untuk kesuksesan. Ada kotak centang tanpa teks label dan ada kotak centang inline juga. Contoh ini juga memberi Anda kotak centang yang dilingkari selain dari yang persegi panjang. Ini menunjukkan Anda menonaktifkan kotak centang bahwa pengguna tidak dapat memeriksa / menghapus centang.
Dan ada kotak centang dengan berbagai ukuran – kecil, sedang, dan besar. Contoh ini telah memberi Anda berbagai kotak centang. Gunakan apa pun yang pas untuk aplikasi web Anda.
Contoh kotak centang Bootstrap ini dibuat oleh pengguna CodePen dengan jimcode nama pengguna. Dalam contoh ini, ada dua kotak centang dengan label. Saat Anda memilih item, kotak centang menjadi oranye. Dan ketika berada dalam kondisi tidak dicentang, warnanya abu-abu.
Ini adalah contoh yang dapat disesuaikan. Sehingga Anda dapat melakukan perubahan yang diperlukan sesuai dengan kebutuhan dan preferensi Anda. Lihatlah lebih dekat pada contoh kotak centang ini dengan mengklik tombol ‘Demo’ dan lihat apakah itu akan bekerja untuk Anda. Jika menurut Anda itu baik untuk Anda, Anda dapat mengunduhnya dengan mengklik tombol ‘Unduh’.
Ini adalah contoh kotak centang Bootstrap yang hebat yang dibuat oleh Venkatesh. Pena ini menunjukkan berbagai jenis kotak centang. Ada kotak centang yang diposisikan secara vertikal, dengan label ‘Opsi 1’, ‘Opsi 2’, dan sebagainya, dan ada beberapa kotak centang diposisikan secara horizontal. Kotak centang inline ini juga memiliki label ‘Opsi 1’, ‘Opsi 2’, dan sebagainya. Ada juga kotak centang yang dinonaktifkan.
Ini hanya demo. Jadi, Anda perlu memodifikasinya untuk menggunakannya di situs web Anda.
Ini adalah contoh kotak centang Bootstrap lain yang memperlihatkan kotak centang sederhana. Lihat kode dan bereksperimenlah dengan sedikit untuk mempelajari cara membuat kotak centang menggunakan Bootstrap. Mendesain kotak centang seperti itu mudah. Anda tidak perlu menghabiskan banyak waktu untuk membuat dan mendesainnya. Bootstrap menawarkan beberapa jenis kotak centang untuk tujuan yang berbeda. Anda dapat dengan cepat mendesainnya dengan Bootstrap.
Jadi, jika Anda memerlukan kotak centang untuk situs web Anda, buat kotak centang menggunakan Bootstrap dan pekerjaan desain Anda akan menjadi jauh lebih mudah.
Contoh kotak centang Bootstrap oleh Dale Nguyen adalah contoh yang luar biasa yang menunjukkan kotak centang dengan gaya berbeda. Gaya-gaya ini telah dicapai dengan menggunakan Bootstrap. Kotak centang pertama adalah yang sederhana. Yang kedua adalah kotak centang kuning. Yang ketiga berwarna biru. Yang berikutnya adalah biru langit, hijau, dan merah. Ingatlah bahwa warna yang berbeda telah digunakan untuk tujuan yang berbeda. Misalnya, warna merah untuk bahaya sedangkan warna hijau untuk kesuksesan.
Ada juga kotak centang bulat. Jadi jika Anda mencari kotak centang seperti itu, Anda dapat menggunakannya.
Kotak centang Bootstrap oleh Sergey ini sangat unik. Itu datang dengan lingkaran keren yang terisi dengan hijau muda ketika diperiksa. Ini menggunakan sampel teks tetapi Anda dapat mengubahnya sesuai dengan kebutuhan Anda, dan juga dapat memiliki beberapa kotak centang semacam ini di halaman web situs web Anda. Jadi jenis kotak centang ini dengan label yang sesuai akan terlihat sangat bagus.
Lihatlah kode sumbernya. Kode ini sangat sederhana.
Contoh ini oleh pengguna CodePen dengan nama pengguna jadeli1720 menunjukkan kotak centang dan tombol radio yang sangat bergaya. Kotak centang dan tombol radio ini sangat, sangat berbeda dari kotak centang tradisional dan tombol radio.
Saat Anda mengarahkan kursor ke kotak centang yang dalam kondisi tidak dicentang, itu menjadi biru langit. Dan saat memeriksa mereka, mereka menjadi merah dan ikon centang dengan warna langit biru muncul. Kotak centang dan tombol radio ini memiliki teks label.
Meskipun Anda hanya dapat memilih satu tombol radio dari grup tombol radio, Anda dapat memilih beberapa item dari grup kotak centang.
Pena ini oleh Yannick Spreen memberi Anda tombol kotak centang Bootstrap. Teks tombol adalah ‘Opsi Satu’, ‘Opsi Dua’, dan ‘Opsi Tiga’. Ada tiga kotak centang. Ketika pengguna mengarahkan mouse ke salah satu tombol ini, warna latar belakang berubah menjadi abu-abu terang. Warna latar belakang tombol yang dalam keadaan tidak dicentang adalah putih sedangkan warna latar belakang biru ketika itu dalam keadaan dicentang.
Posting blog ini mencantumkan kotak centang Bootstrap gratis terbaik contoh. Dalam posting ini, saya telah memberi Anda banyak contoh kotak centang Bootstrap yang unik, berbeda, modern, dan keren. Coba kotak centang penuh gaya ini, dan pengguna Anda akan menyukainya!
Tanda tangan email berfungsi sebagai cara ampuh bagi individu dan bisnis untuk meninggalkan kesan abadi…
Apakah kesalahan 'ERR_SSL_VERSION_OR_CIPHER_MISMATCH' menghentikan Anda mengakses situs web WordPress? Kesalahan ini hanya terlihat saat mengunjungi…
Jika Anda adalah individu yang banyak akal dan berpikiran maju yang bekerja di bidang pemasaran,…
Siap menguasai Google Analytics 4 dengan sedikit bantuan dari MonsterInsights? GA4 adalah alat analitik yang…
Apakah Anda mencari cara untuk menerjemahkan plugin WordPress ke dalam bahasa Anda? Dengan menerjemahkan plugin…
Mencari solusi untuk hack redirect WordPress? ???????? Peretasan pengalihan WordPress sayangnya merupakan kejadian umum dan…