20 Cutii Bootstrap Multiselect pentru aplicația dvs. web

Widgeturile noastre multiselect Bootstrap vă ajută utilizatorii să aleagă mai multe articole în mod convenabil pe mobil și desktop. (Puteți chiar să stabiliți limite!)

Ne-am asigurat să creăm un pachet VERSATIL de exemple pe care le puteți aplica la orice.

Codul este simplu și ușor pentru începători, perfect pentru utilizatorii de toate nivelurile de calificare .

În ceea ce privește utilizarea unui widget multiselect Bootstrap, este necesar să încorporați mai întâi biblioteca jQuery Javascript.

Realizați-l chiar înainte de a prezenta fișierul JavaScript principal al Bootstrap. Fișierele plugin JS și CSS trebuie, de asemenea, să fie setate în loc în <head. Le puteți instala chiar de pe pagina web GitHub a dezvoltatorului web.

Simpla idee de a dezvolta elementul <select> vă asigură că aveți un atribut unic și desemnat. Este necesar să se identifice atributul multiple = ”multiple” value = ”somevalue”.

Este o selecție de opțiuni pe care trebuie să le înfășurați în componenta numărului de elemente <option>. Acest lucru le va oferi atributele value = "some-value" necesare.

De asemenea, aveți CONTROL asupra stilului. Îmbogățiți multiselectarea la alegere oricum doriți .

Rapid. Și. Uşor.

Cele mai bune widget-uri Bootstrap Multiselect

Multiselectați V01

Să începem lucrurile cu un widget simplu Bootstrap multiselect pentru alegerea limbajelor de programare. Înainte chiar de a merge mai departe, dacă doriți să utilizați acest fragment gratuit pentru altceva, îl puteți modifica după conținutul inimii.

Dar, într-adevăr, designul este foarte simplu și simplu, asigurându-vă că funcționează în mod implicit cu diferite proiecte și aplicații.

În timp ce utilizatorul poate alege diferite articole MANUAL, poate, de asemenea, să apese pe caseta de selectare a tuturor dacă totul îi interesează. Mai mult, bara principală afișează opțiunile utilizatorului.

Mai multe informații / Descărcați Demo

Multiselectați V02

Faceți ușor și convenabil pentru utilizatorii dvs. să aleagă diferite subiecte cu Multiselect V02. Este un widget Bootstrap care apare elegant pe dispozitivele mobile și desktop.

Widgetul urmează un aspect destul de minimalist, asigurându-vă că NU ESTE NECESAR să-i faceți modificări, mai degrabă îl folosiți ca atare.

Când selectați subiectul, acesta apare în câmpul de afișare cu opțiunea de a face clic pe semnul X pentru al elimina. Fie că alege un subiect sau toate, acest multiselect îl acceptă pe ambele.

Mai multe informații / Descărcați Demo

Multiselectați V03

Dacă fragmentul multiselect Bootstrap de mai sus afișează numele subiectului la selectare, acesta îl păstrează FOARTE simplu cu opțiunile de număr.

Cu toate acestea, principala specialitate a Multiselect V03 este schimbarea culorii fontului limbii. La plutire, devine albastru, dar la clic, devine albastru și îndrăzneț.

Structura flexibilă asigură, de asemenea, o adaptare lină la dispozitive mobile, tablete și desktop.

Mai multe informații / Descărcați Demo

Multiselectați V04

Multiselect V04 este o bară cu „nimic selectat” și un chevron. După ce faceți clic pe acesta, se deschide un meniu derulant cu mai multe opțiuni de selectat.

După ce alegeți un element, apare un efect de clic albastru cu o bifă roșie și o afișare a elementului în bara principală.

Toată lumea poate selecta sau deselecta cât mai multe articole, subiecte sau altceva ce nu dorește, indiferent de dispozitivul pe care îl utilizează.

Mai multe informații / Descărcați Demo

Multiselectați V05

Multiselect V05 este un fantastic fragment Bootstrap gratuit care vă ajută să realizați o selecție multiplă pe aplicația sau site-ul dvs. web.

Nu contează care este obiectivul principal al selecției multiple, îl puteți utiliza confortabil și eficient pentru orice.

Widgetul are un aspect ușor mai larg decât unele dintre celelalte alternative ale noastre, ceea ce face ca afișarea diferitelor selecții să fie mai convenabilă.

Meniul derulant include, de asemenea, casete de selectare și cinci opțiuni în mod implicit. Fă-l al tău, reglează-l și pleacă de acolo.

Mai multe informații / Descărcați Demo

Multiselectați V06

Multiselect V06 poate arăta ca orice alt widget multiselect mediu Bootstrap, dar este departe de asta. Cu un design modern și o animație interesantă, acest fragment gratuit știe cum să condimenteze lucrurile .

Cu alte cuvinte, dacă căutați ceva care nu este prea tradițional, veți face ceea ce trebuie alegând Multiselect V06.

Dar, mai întâi, puteți să o testați vizitând previzualizarea live a demonstrației (chiar și pe un dispozitiv mobil).

Mai multe informații / Descărcați Demo

Multiselectați V07

Unele multiselecții din această colecție sunt mai mult pe partea minimalistă, în timp ce unele vin destul de creative. Dacă vă place mai mult din urmă, ar trebui să aruncați o privire asupra performanței Multiselect V07 chiar acum.

Dispune de un câmp care răspunde la cursă, schimbând culoarea textului și conturul. După ce faceți clic pe acesta, apare un meniu derulant îndrăzneț cu diferite subiecte care dispar din meniul derulant și apar în bara principală pe clic.

Mergeți mai departe, încercați și testați-l singur.

Mai multe informații / Descărcați Demo

Multiselectați V08

O selecție multiplă Bootstrap poate consta doar din subiecte sau elemente din care puteți alege, dar le puteți împărți și în diferite categorii .

Acest lucru este util mai ales dacă există o mulțime de articole, deoarece va ÎMBOTAȚI experiența utilizatorului la găsirea lucrurilor care îi interesează.

Multiselect V08 este o ilustrare excelentă a acestui lucru, pe care îl puteți pune acum în joc și face ca lucrurile să se întâmple rapid.

De asemenea, are un efect de plutire și o structură de cod prietenoasă pentru începători, pentru ca toată lumea să profite la maximum de el.

Mai multe informații / Descărcați Demo

Multiselectați V09

Pentru toți cei care au venit la această colecție căutați un fragment multiselect întunecat , faceți-vă o favoare și alegeți Multiselect V09. Este o alternativă modernă, cu tot ce este necesar pentru a vă îndrepta imediat.

Instrumentul este optimizat pentru performanțe excelente pentru mobil și desktop și include cod ușor de digerat.

Pentru ca prezentarea generală să fie MAI dinamică și atrăgătoare pentru ochi, Multiselect V09 îmbogățește lucrurile cu un ton galben atrăgător.

Mai multe informații / Descărcați Demo

Multiselect V10

Când vine vorba de o multiselectare cu o tonă de piese în ea, găsirea lor prin derulare poate fi foarte incomodă. Pentru a face viața utilizatorului mult mai simplă, iată Multiselect V10.

Acest fragment gratuit vine cu o funcție practică de căutare live care dezvăluie accesări imediat ce începeți să tastați.

Apoi puteți face clic pe semnul X pentru a șterge bara de căutare și a începe cu o nouă căutare.

Mai multe informații / Descărcați Demo

Multiselectați V11

Acest Bootstrap multiselect are două moduri de a alege articolele din meniul derulant.

Mai întâi, le puteți răsfoi și alege pe cele care vă plac făcând clic pe ele.

Și, în al doilea rând, această selecție multiplă oferă, de asemenea, selecție, tastând- o și separând diferite opțiuni cu o virgulă.

Un alt lucru interesant despre Multiselect V11 este funcția de căutare live care oferă cercetări rapide direct din bara principală. De asemenea, articolele pe care le alegeți devin gri pentru o vizibilitate mai bună.

Mai multe informații / Descărcați Demo

Multiselect V12

Multiselect V12 știe foarte bine cum să amestece simplitatea cu caracterul practic pentru o experiență de utilizator TERRIFICATĂ.

În timp ce instrumentul gratuit se concentrează pe stări în mod implicit, acest meniu drop-down multiselect cu o funcție de căutare live (separată cu o virgulă) este excelent pentru orice altceva.

Îl puteți folosi pentru a alege subiecte, articole, limbi, ei bine, veți obține esența - totul funcționează .

Mai multe informații / Descărcați Demo

Multiselect V13

Da, puteți folosi chiar și un Bootstrap multiselect pentru nume, la fel ca în cazul Multiselect V13. În timp ce acest fragment gratuit este similar cu cel de mai sus, distincția sa principală este alegerea culorii pentru selecții.

Acesta prezintă o frumoasă nuanță turcoaz. Căutarea în timp real, separarea articolelor prin virgulă sau alegerea manuală din meniul derulant sunt toate bunătățile pe care Multiselect V13 le consideră.

Mai multe informații / Descărcați Demo

Multiselect V14

Multiselect V14 este un fragment extraordinar gratuit pentru selectarea țărilor. Când faceți clic pe bară, se deschide un meniu derulant cu cincizeci de stări din care să alegeți.

Deși puteți selecta cât de multe sau cât de puține doriți, există și un buton RAPID „ selectați tot ” pentru a alege întreaga listă.

Mai mult, nume de până la patru apar în bară, dar orice altceva decât asta, widgetul afișează un număr. De asemenea, aspectul se remodelează instantaneu pe dispozitivele mobile .

Mai multe informații / Descărcați Demo

Multiselect V15

Dacă sunteți interesat de mai multe stiluri similare de selecții multiple Bootstrap decât precedentul, Multiselect V15 este o alternativă excelentă. Afișează cincizeci de stări în trei coloane cu funcționalități similare.

Același stil rămâne intact, indiferent dacă îl vizualizați pe mobil, tabletă sau desktop. Mai mult, Multiselect V15 are un efect de plutire și transformă stările selectate în albastru, indicându-le cu o bifă.

Puteți alege, de asemenea, toate cu un singur clic.

Mai multe informații / Descărcați Demo

Multiselect V16

Multiselect V16 este un alt widget multiselect Bootstrap de top pentru selectarea țării în mod implicit. Păstrează designul modern și minimal, cu câteva caracteristici interesante.

Efectul de trecere gri, animația de clic, bifarea și comanda rapidă de la tastatură pentru alegerea articolelor în funcție de caracterele alfabetice sunt principalele elemente esențiale ale Multiselect V16.

Aici nu există opțiunea „selectați tot”, astfel încât utilizatorul trebuie să facă toate opțiunile MANUAL.

Mai multe informații / Descărcați Demo

Multiselect V17

Uneori, doriți să LIMITAȚI numărul de selecții pe care le poate face un utilizator. Dacă acesta este cazul, atunci când Multiselect V17 intră în joc. Acest fragment gratuit limitează selecția la șapte, dar puteți face modificări dacă este necesar.

Mai mult, stările apar în bara de mai sus, iar opțiunile din meniul derulant devin verzi și prezintă o bifă. Când limita este atinsă, efectul de clic este încă acolo, dar selecția nu se întâmplă.

Mai multe informații / Descărcați Demo

Multiselect V18

Multiselect V18 este un Bootstrap multiselect destul de avansat, cu diferite specialități care îl fac să iasă în evidență.

Primul lucru este primul, acesta prezintă grupuri în meniul derulant, împărțind lucrurile frumos pentru o creștere a experienței utilizatorului. Mai mult, fiecare grup vine cu o limită individuală de alegeri, ca și cu widgetul anterior.

În timp ce această selecție multiplă este pentru stări scoase din cutie, nu trebuie să vă limitați în niciun fel, formă sau formă. Luați-l în avantajul TOTAL și economisiți timp.

Mai multe informații / Descărcați Demo

Multiselect V19

O listă derulantă ușoară și completă, cu funcție multiselectare, pe care o puteți face acum fără a cheltui niciun ban.

Multiselect V19 este excelent pentru tot felul de selecții, deoarece veți avea ușor să faceți ajustări și îmbunătățiri pentru a se potrivi nevoilor dvs.

Când alegeți diferite elemente, puteți face acest lucru din meniul derulant cu cursorul mouse-ului sau chiar tastați-l în bară și apăsați Enter. Mai mult, fiecare selecție devine gri, dar o puteți deselecta apăsând butonul X.

Mai multe informații / Descărcați Demo

Multiselect V20

Pentru a duce lucrurile la nivelul următor, alegeți acest fragment multi-select Bootstrap trei-în-unul și faceți o diferență IMEDIATĂ.

Puteți împărți în mod convenabil lucrurile în categorii DIFERITE și puteți limita numărul de articole pe care o persoană le poate selecta prin selecția multiplă. Selecția are loc fie prin colectarea articolelor din meniul derulant, fie prin tastarea acestuia și prin apăsarea intrării (funcția de căutare live integrată).

Widgetul folosește, de asemenea, culori diferite pentru diferite categorii / multiselecții, pe care le puteți îmbunătăți și dvs.

Mai multe informații / Descărcați Demo

Acum, ați aflat mai multe despre numeroasele pluginuri Bootstrap Multiselect și despre toate lucrurile pe care le-ar putea face pentru funcționalitatea site-ului dvs. web.