Web Uygulamanız İçin 20 Önyükleme Çoklu Seçim Kutusu
Yayınlanan: 2021-07-15Bootstrap çoklu seçim pencere öğelerimiz, kullanıcılarınızın mobil ve masaüstünde birden çok öğeyi kolayca seçmesine yardımcı olur. (Sınırları bile belirleyebilirsiniz!)
Her şeye uygulayabileceğiniz ÇOK YÖNLÜ bir örnek paketi oluşturduğumuzdan emin olduk.
Kod basit ve yeni başlayanlar için uygundur , tüm beceri seviyelerindeki kullanıcılar için mükemmeldir.
Bootstrap çoklu seçim widget'ı kullanmakla ilgili olarak, önce jQuery Javascript kitaplığını dahil etmeniz gerekir.
Bootstrap'in ana JavaScript dosyasını öne çıkarmadan hemen önce gerçekleştirin. Eklenti JS ve CSS dosyalarının da <head.js dosyasına yerleştirilmesi gerekir. Bunları doğrudan web geliştiricisinin GitHub web sayfasından yükleyebilirsiniz.
<select> öğesini geliştirmenin basit fikri , ona benzersiz ve atanmış bir özniteliğe sahip olduğunuzdan emin olmanızı sağlar. Multiple=”multiple” value=”somevalue” özniteliğini tanımlamaya ihtiyaç vardır.
<option> öğelerinin sayısının bileşeninin içine sarmanız gereken seçeneklerden oluşan bir seçimdir. Bu onlara gerekli değer=”bazı-değer” niteliklerini sağlayacaktır.
Ayrıca stil üzerinde KONTROLünüz var. Çoklu seçimi istediğiniz gibi zenginleştirin.
Çabuk. Ve. Kolayca.
En İyi Önyükleme Çoklu Seçim Widget'ları
Çoklu seçim V01
Programlama dillerini seçmek için basit bir Bootstrap çoklu seçim widget'ı ile işe başlayalım. Daha ileri gitmeden, bu ücretsiz snippet'i başka bir şey için kullanmak isterseniz, onu istediğiniz gibi değiştirebilirsiniz .
Ama gerçekten, tasarım çok basit ve basittir, varsayılan olarak farklı projeler ve uygulamalarla çalıştığından emin olur.
Kullanıcı MANUEL OLARAK farklı öğeleri seçebilirken, her şey ilgilerini çekiyorsa hepsini seç kutusuna da basabilir. Ayrıca ana çubuk, kullanıcının seçimlerini gösterir.
Daha fazla bilgi / Demo İndirÇoklu seçim V02
Multiselect V02 ile kullanıcılarınızın farklı konuları seçmesini kolay ve kullanışlı hale getirin. Mobil ve masaüstü cihazlarda zarif bir şekilde görünen bir Bootstrap widget'ıdır.
Widget oldukça minimalist bir görünüme sahiptir ve onu olduğu gibi kullanmak yerine üzerinde herhangi bir değişiklik yapmanıza GEREKMEZ.
Konuyu seçtiğinizde, onu kaldırmak için X işaretine tıklama seçeneği ile ekran alanında görünür. Bu çoklu seçim, bir konuyu veya tümünü seçiyor olsun, her ikisini de destekler.
Daha fazla bilgi / Demo İndirÇoklu seçim V03
Yukarıdaki Bootstrap çoklu seçim pasajı, seçim sırasında konunun adını gösteriyorsa, bu, sayı seçimleriyle ÇOK basit tutar.
Ancak, Multiselect V03'ün ana özelliği, dilin yazı tipinin rengindeki değişikliktir. Fareyle üzerine gelindiğinde maviye döner, ancak tıklandığında maviye ve kalına döner.
Esnek yapı ayrıca mobil, tablet ve masaüstü cihazlara sorunsuz uyum sağlar.
Daha fazla bilgi / Demo İndirÇoklu seçim V04
Multiselect V04, içinde "hiçbir şey seçilmedi" ve bir şerit bulunan bir çubuktur. Üzerine tıkladığınızda, birden fazla seçeneğe sahip bir açılır menü açılır.
Bir öğe seçtiğinizde, kırmızı bir onay işareti ve ana çubukta öğenin bir görüntüsü ile mavi bir tıklama efekti görünür.
Kullandıkları cihazdan bağımsız olarak herkes istediği kadar öğe, konu veya diğer öğeleri seçebilir veya seçimini kaldırabilir.
Daha fazla bilgi / Demo İndirÇoklu seçim V05
Multiselect V05, uygulamanızda veya web sitenizde çoklu seçim gerçekleştirmenize yardımcı olan harika bir ücretsiz Bootstrap snippet'idir.
Çoklu seçimin ana amacının ne olduğu önemli değil, bunu her şey için rahat ve etkili bir şekilde kullanabilirsiniz.
Widget, diğer alternatiflerimizden biraz daha geniş bir düzene sahiptir, bu da farklı seçimlerin görüntülenmesini daha kolay hale getirir.
Açılır menüde ayrıca varsayılan olarak onay kutuları ve beş seçenek bulunur. Kendiniz yapın, ince ayar yapın ve oradan gidin.
Daha fazla bilgi / Demo İndirÇoklu seçim V06
Multiselect V06, diğer herhangi bir Bootstrap çoklu seçim widget'ı gibi görünebilir, ancak bundan çok uzaktır. Modern tasarımı ve harika animasyonuyla bu ücretsiz snippet, işleri nasıl renklendireceğini biliyor.
Başka bir deyişle, çok geleneksel olmayan bir şey arıyorsanız, Multiselect V06'yı seçerek doğru olanı yapacaksınız.
Ama önce, canlı demo önizlemesini ziyaret ederek (mobil cihazda bile) TEST edebilirsiniz.
Daha fazla bilgi / Demo İndirÇoklu seçim V07
Bu koleksiyondaki bazı çoklu seçimler daha minimalistken bazıları oldukça yaratıcı. İkincisini daha çok seviyorsanız, şu anda Multiselect V07'nin performansına bir göz atmalısınız.
Fareyle üzerine gelindiğinde yanıt veren, metnin rengini ve anahattı değiştiren bir alana sahiptir. Tıkladığınızda, açılır menüden kaybolan ve tıklandığında ana çubukta görünen farklı konulara sahip kalın bir açılır menü görünür.
Devam edin, kendiniz deneyin ve test edin.
Daha fazla bilgi / Demo İndirÇoklu seçim V08
Bir Bootstrap çoklu seçimi, yalnızca aralarından seçim yapabileceğiniz konulardan veya öğelerden oluşabilir, ancak bunları farklı kategorilere de ayırabilirsiniz.
Bu, özellikle çok sayıda öğe varsa yararlıdır, çünkü ilgilerini çeken şeyleri bulurken kullanıcı deneyimini ARTIRIR.
Multiselect V08, artık devreye sokabileceğiniz ve işlerin hızla gerçekleşmesini sağlayabileceğiniz harika bir örnektir.
Ayrıca, herkesin bundan en iyi şekilde yararlanabilmesi için bir vurgulu efekti ve acemi dostu bir kod yapısına sahiptir.
Daha fazla bilgi / Demo İndirÇoklu seçim V09
Bu koleksiyona gelen herkes için karanlık bir çoklu seçim parçacığı arayın, kendinize bir iyilik yapın ve Multiselect V09'u seçin. Hemen ilerlemenizi sağlamak için gerekli tüm özelliklere sahip modern bir alternatiftir.
Araç, harika mobil ve masaüstü performansı için optimize edilmiştir ve sindirimi kolay kod içerir.
Genel sunumu DAHA dinamik ve göze çekici kılmak için Multiselect V09, çekici bir sarı tonla öğeleri zenginleştirir.
Daha fazla bilgi / Demo İndirÇoklu seçim V10
İçinde tonlarca parça bulunan bir çoklu seçim söz konusu olduğunda, onları kaydırarak bulmak çok elverişsiz olabilir. Kullanıcının hayatını çok daha basit hale getirmek için işte Multiselect V10.
Bu ücretsiz snippet, yazmaya başladığınız anda isabetleri ortaya çıkaran pratik bir canlı arama işleviyle birlikte gelir.
Ardından, arama çubuğunu temizlemek ve yeni bir arama ile başlamak için X işaretine tıklayabilirsiniz.
Daha fazla bilgi / Demo İndirÇoklu seçim V11
Bu Bootstrap çoklu seçimi, açılır menüden öğeleri seçmenin iki yoluna sahiptir.
İlk olarak, onlara göz atabilir ve beğendiklerinizi üzerlerine tıklayarak seçebilirsiniz.
İkincisi, bu çoklu seçim, aynı zamanda, farklı seçimleri bir virgülle ayırarak ve yazarak seçim sunar.
Multiselect V11 ile ilgili bir başka harika şey de, doğrudan ana çubuktan hızlı araştırma sunan canlı arama işlevidir. Ayrıca, seçtiğiniz öğeler daha iyi görünürlük için griye döner.
Daha fazla bilgi / Demo İndirÇoklu seçim V12
Multiselect V12, MÜKEMMEL bir kullanıcı deneyimi için basitliği pratiklikle nasıl karıştıracağını çok iyi biliyor.
Ücretsiz araç varsayılan olarak durumlara odaklanırken, canlı arama işlevine sahip (virgülle ayrılmış) bu çok seçimli açılır menü başka her şey için harikadır.
Konuları, öğeleri, dilleri seçmek için kullanabilirsiniz, özü anlıyorsunuz – her şey işe yarıyor .
Daha fazla bilgi / Demo İndirÇoklu seçim V13
Evet, Multiselect V13 durumunda olduğu gibi, adlar için bir Bootstrap çoklu seçimi bile kullanabilirsiniz. Bu ücretsiz snippet, yukarıdakine oldukça benzer olsa da, ana farkı, seçimler için renk seçimidir.
Bu güzel bir turkuaz renk tonuna sahiptir. Canlı arama, virgül öğesi ayrımı veya açılır menüden manuel seçim, Multiselect V13'ün sunduğu tüm güzelliklerdir.
Daha fazla bilgi / Demo İndirÇoklu seçim V14
Multiselect V14, ülke seçimi için harika bir ücretsiz snippet'tir. Çubuğa tıkladığınızda, aralarından seçim yapabileceğiniz elli durum içeren bir açılır menü açılır.
İstediğiniz kadar çok veya az seçim yapabilmenize rağmen, tüm listeyi seçmek için HIZLI bir “ tümünü seç ” düğmesi de vardır.
Ayrıca, çubukta dörde kadar ad görünür, ancak bundan daha fazlası, pencere öğesi bir sayı görüntüler. Düzen aynı zamanda mobil cihazlara anında yeniden şekillenir.
Daha fazla bilgi / Demo İndirÇoklu seçim V15
Bir öncekinden daha benzer Bootstrap çoklu seçim stilleriyle ilgileniyorsanız, Multiselect V15 harika bir alternatiftir. Benzer işlevselliğe sahip üç sütunda elli durumu görüntüler.
Aynı stil, mobil, tablet veya masaüstünde görüntülendiğinde bozulmadan kalır. Dahası, Multiselect V15 bir vurgulama efektine sahiptir ve seçili durumları maviye çevirerek bir onay işaretiyle belirtir.
Ayrıca hepsini TEK bir tıklama ile seçebilirsiniz.
Daha fazla bilgi / Demo İndirÇoklu seçim V16
Multiselect V16, varsayılan olarak ülke seçimi için başka bir birinci sınıf Bootstrap çoklu seçim widget'ıdır. Birkaç harika özellik ile tasarımı modern ve minimal tutar.
Gri vurgulu efekti, tıklama animasyonu, onay işareti ve öğeleri alfabetik karakterlere göre seçmek için hızlı klavye kısayolu, Multiselect V16'nın temel özellikleridir.
Burada "tümünü seç" seçeneği yoktur, bu nedenle kullanıcının tüm seçimleri ELLE yapması gerekir.
Daha fazla bilgi / Demo İndirÇoklu seçim V17
Bazen bir kullanıcının yapabileceği seçim sayısını SINIRLAMAK istersiniz. Bu durumda Multiselect V17 devreye girer. Bu ücretsiz snippet, seçimi yedi ile sınırlandırır, ancak gerekirse değişiklik yapabilirsiniz.
Ayrıca, durumlar yukarıdaki çubukta görünür ve açılır menüdeki seçenekler yeşile döner ve bir onay işareti içerir. Sınıra ulaşıldığında, tıklama efekti hala oradadır, ancak seçim gerçekleşmez.
Daha fazla bilgi / Demo İndirÇoklu seçim V18
Multiselect V18, onu öne çıkaran farklı özelliklere sahip oldukça gelişmiş bir Bootstrap çoklu seçimdir.
Her şeyden önce, açılır menüde grupları içerir ve kullanıcı deneyimini artırmak için işleri güzelce parçalara ayırır. Ayrıca, her grup, önceki widget'ta olduğu gibi, bireysel bir seçim sınırı ile birlikte gelir.
Bu çoklu seçim, kullanıma hazır durumlar için olsa da, kendinizi herhangi bir şekilde, şekilde veya biçimde sınırlamanız gerekmez. TOTAL avantajınıza kullanın ve zamandan tasarruf edin.
Daha fazla bilgi / Demo İndirÇoklu seçim V19
Artık bir kuruş harcamadan sizinkini yapabileceğiniz, çoklu seçim özelliğine sahip kolay ve çok yönlü bir açılır menü.
Multiselect V19, ihtiyaçlarınıza uygun hale getirmek için ayarlamalar ve iyileştirmeler yapmanız kolay olacağından, her türlü seçim için mükemmeldir.
Farklı öğeler seçerken, fare imleci ile açılır menüden yapabilir veya hatta çubuğa yazıp enter tuşuna basabilirsiniz. Ayrıca, her seçim de griye döner, ancak X düğmesine basarak seçimi kaldırabilirsiniz.
Daha fazla bilgi / Demo İndirÇoklu seçim V20
İşleri bir sonraki seviyeye taşımak için bu üçü bir arada Bootstrap çoklu seçim pasajını seçin ve HEMEN bir fark yaratın.
İşleri kolaylıkla FARKLI kategorilere ayırabilir ve bir kişinin çoklu seçim ile seçebileceği öğe sayısını sınırlayabilirsiniz. Seçim, açılır menüden öğeleri toplayarak veya aşağıya yazıp enter tuşuna basarak gerçekleşir (canlı arama özelliği entegre edilmiştir).
Widget ayrıca farklı kategoriler/çoklu seçimler için de geliştirebileceğiniz farklı renkler kullanır.
Daha fazla bilgi / Demo İndirArtık birçok farklı Bootstrap Multiselect eklentisi ve web sitenizin işlevselliği için yapabileceği her şey hakkında daha fazla şey öğrendiniz.