20 pudełek Bootstrap Multiselect dla Twojej aplikacji internetowej
Opublikowany: 2021-07-15Nasze widżety Bootstrap multiselect pomagają użytkownikom wygodnie wybierać wiele elementów na urządzeniach mobilnych i stacjonarnych. (Możesz nawet ustawić limity!)
Upewniliśmy się, że stworzyliśmy WSZECHSTRONNY pakiet przykładów, które można zastosować do wszystkiego.
Kod jest prosty i przyjazny dla początkujących, idealny dla użytkowników na wszystkich poziomach umiejętności .
W przypadku korzystania z widżetu wielokrotnego wyboru Bootstrap konieczne jest najpierw włączenie biblioteki JavaScript jQuery.
Zrób to tuż przed udostępnieniem głównego pliku JavaScript Bootstrap. Pliki JS i CSS wtyczki również muszą być ustawione w <head. Możesz je zainstalować bezpośrednio ze strony internetowej GitHub dewelopera.
Prosta idea tworzenia elementu <select> daje pewność, że masz do niego unikalny i wyznaczony atrybut. Istnieje potrzeba zidentyfikowania atrybutu multiple=”multiple” value=”somevalue”.
Jest to wybór opcji, które musisz owinąć wewnątrz składowej liczby elementów <option>. To zapewni im potrzebne atrybuty value=”jakaś-wartość”.
Masz również KONTROLĘ nad stylem. Wzbogacić wielokrotny wybór jednak chcesz.
Szybko. I. Łatwo.
Najlepsze widżety Bootstrap Multiselect
Wielokrotny wybór V01
Zacznijmy od prostego widgetu wielokrotnego wyboru Bootstrap do wybierania języków programowania. Zanim przejdziemy dalej, jeśli chcesz użyć tego bezpłatnego fragmentu do czegoś innego, możesz go zmodyfikować według własnego uznania.
Ale tak naprawdę projekt jest bardzo prosty i prosty, dzięki czemu domyślnie działa z różnymi projektami i aplikacjami.
Chociaż użytkownik może wybrać różne elementy RĘCZNIE, może również po prostu nacisnąć pole wyboru wszystkich, jeśli wszystko go interesuje. Ponadto główny pasek wyświetla wybory użytkownika.
Więcej informacji / Pobierz demoWybór wielokrotny V02
Spraw, aby użytkownicy mogli łatwo i wygodnie wybierać różne tematy za pomocą Multiselect V02. Jest to widget Bootstrap, który wygląda elegancko na urządzeniach mobilnych i stacjonarnych.
Widżet ma dość minimalistyczny wygląd, upewniając się, że NIE TRZEBA wprowadzać w nim żadnych zmian, zamiast używać go bez zmian.
Po wybraniu tematu pojawia się on w polu wyświetlania z opcją kliknięcia znaku X, aby go usunąć. Niezależnie od tego, czy wybierasz jeden temat, czy wszystkie, ten multiselect obsługuje oba.
Więcej informacji / Pobierz demoWybór wielokrotny V03
Jeśli powyższy fragment kodu Bootstrap multiselect wyświetla nazwę tematu po wybraniu, ten jest BARDZO prosty w wyborze liczby.
Jednak główną specjalnością Multiselect V03 jest zmiana koloru czcionki języka. Po najechaniu kursorem zmienia kolor na niebieski, ale po kliknięciu zmienia kolor na niebieski i pogrubiony.
Elastyczna konstrukcja zapewnia również płynną adaptację do urządzeń mobilnych, tabletów i komputerów stacjonarnych.
Więcej informacji / Pobierz demoWielokrotny wybór V04
Multiselect V04 to pasek z „nic nie zaznaczonym” i szewronem. Po kliknięciu otworzy się menu z wieloma opcjami do wyboru.
Po wybraniu elementu pojawi się niebieski efekt kliknięcia z czerwonym znacznikiem wyboru i wyświetleniem elementu na pasku głównym.
Każdy może zaznaczyć lub odznaczyć dowolną liczbę elementów, tematów lub innych rzeczy, których nie chce, niezależnie od urządzenia, z którego korzysta.
Więcej informacji / Pobierz demoWielokrotny wybór V05
Multiselect V05 to fantastyczny darmowy fragment kodu Bootstrap, który pomaga w realizacji wielokrotnego wyboru w aplikacji lub witrynie internetowej.
Nie ma znaczenia, jaki jest główny cel multi-selekcji, możesz wygodnie i efektywnie wykorzystać ten do wszystkiego.
Widżet ma nieco szerszy układ niż niektóre z naszych innych alternatyw, co sprawia, że wyświetlanie różnych wyborów jest wygodniejsze.
Lista rozwijana zawiera również domyślnie pola wyboru i pięć opcji. Dostosuj go do siebie, dostosuj i odejdź.
Więcej informacji / Pobierz demoWielokrotny wybór V06
Multiselect V06 może wyglądać jak każdy inny przeciętny widget wielokrotnego wyboru Bootstrap, ale daleko mu do tego. Dzięki nowoczesnemu wzornictwu i fajnej animacji ten bezpłatny fragment wie, jak urozmaicić .
Innymi słowy, jeśli szukasz czegoś, co nie jest zbyt tradycyjne, zrobisz dobrze, wybierając Multiselect V06.
Ale najpierw możesz to PRZETESTOWAĆ, odwiedzając podgląd na żywo (nawet na urządzeniu mobilnym).
Więcej informacji / Pobierz demoWielokrotny wybór V07
Niektóre multiselect z tej kolekcji są bardziej minimalistyczne, podczas gdy inne są dość kreatywne. Jeśli masz ochotę na to drugie, powinieneś rzucić okiem na wydajność Multiselect V07 już teraz.
Zawiera pole, które reaguje po najechaniu myszą, zmieniając kolor tekstu i konturu. Po kliknięciu pojawia się pogrubione menu z różnymi tematami, które znikają z menu i pojawiają się na głównym pasku po kliknięciu.
Śmiało, spróbuj i przetestuj to sam.
Więcej informacji / Pobierz demoWielokrotny wybór V08
Wybór wielokrotny Bootstrap może składać się tylko z tematów lub elementów do wyboru, ale można je również podzielić na różne kategorie .
Jest to szczególnie przydatne, jeśli jest dużo przedmiotów, ponieważ ZWIĘKSZA wrażenia użytkownika podczas znajdowania rzeczy, które go interesują.
Multiselect V08 jest tego świetną ilustracją, którą możesz teraz wykorzystać i sprawić, by wszystko działo się szybko.
Posiada również efekt najechania i przyjazną dla początkujących strukturę kodu, aby każdy mógł w pełni z niego skorzystać.
Więcej informacji / Pobierz demoWielokrotny wybór V09
Dla wszystkich, którzy przyszli do tej kolekcji, poszukaj ciemnego fragmentu multiselect, zrób sobie przysługę i wybierz Multiselect V09. Jest to nowoczesna alternatywa ze wszystkim, co niezbędne, abyś od razu ruszył do przodu.
Narzędzie jest zoptymalizowane pod kątem doskonałej wydajności mobilnej i stacjonarnej oraz zawiera łatwy do strawienia kod.
Aby ogólna prezentacja była BARDZIEJ dynamiczna i atrakcyjna dla oka, Multiselect V09 wzbogaca ją o chwytliwy żółty odcień.
Więcej informacji / Pobierz demoWielokrotny wybór V10
Jeśli chodzi o multiselect z mnóstwem elementów, znalezienie ich za pomocą przewijania może być bardzo niewygodne. Aby uczynić życie użytkownika znacznie prostszym, oto Multiselect V10.
Ten darmowy fragment zawiera praktyczną funkcję wyszukiwania na żywo, która ujawnia trafienia, gdy tylko zaczniesz pisać.
Następnie możesz kliknąć znak X, aby wyczyścić pasek wyszukiwania i rozpocząć nowe wyszukiwanie.
Więcej informacji / Pobierz demoWielokrotny wybór V11
Ten wielokrotny wybór Bootstrap ma dwa sposoby wybierania elementów z listy rozwijanej.
Najpierw możesz je przeglądać i wybierać te, które Ci się podobają, klikając je.
Po drugie, ten multiselect oferuje również wybór, wpisując go i oddzielając różne typy przecinkiem.
Kolejną fajną rzeczą w Multiselect V11 jest funkcja wyszukiwania na żywo, która oferuje szybkie wyszukiwanie bezpośrednio z głównego paska. Ponadto wybrane przedmioty stają się szare, aby zapewnić lepszą widoczność.
Więcej informacji / Pobierz demoWielokrotny wybór V12
Multiselect V12 doskonale wie, jak łączyć prostotę z praktycznością, aby zapewnić WSPANIAŁE wrażenia użytkownika.
Podczas gdy darmowe narzędzie domyślnie koncentruje się na stanach, to rozwijane menu wielokrotnego wyboru z funkcją wyszukiwania na żywo (oddzielone przecinkiem) jest świetne do wszystkiego innego.
Możesz go używać do wybierania tematów, przedmiotów, języków, cóż, rozumiesz – wszystko działa .
Więcej informacji / Pobierz demoWielokrotny wybór V13
Tak, możesz nawet zastosować multiselect Bootstrap dla nazw, tak jak w przypadku Multiselect V13. Chociaż ten darmowy fragment jest całkiem PODOBNY do powyższego, jego głównym wyróżnikiem jest wybór koloru dla zaznaczeń.
Ten ma piękny turkusowy odcień. Wyszukiwanie na żywo, rozdzielanie elementów przecinkami lub ręczne wybieranie z rozwijanego menu to wszystkie zalety, które kołysze Multiselect V13.
Więcej informacji / Pobierz demoWielokrotny wybór V14
Multiselect V14 to niesamowity darmowy fragment do wyboru kraju. Po kliknięciu paska otworzy się menu z pięćdziesięcioma stanami do wyboru.
Chociaż możesz wybrać tyle lub tyle, ile chcesz, dostępny jest również przycisk SZYBKI „ zaznacz wszystko ” do wybierania całej listy.
Co więcej, na pasku pojawiają się nazwy do czterech, ale cokolwiek więcej, widżet wyświetla liczbę. Układ również błyskawicznie zmienia się na urządzenia mobilne .
Więcej informacji / Pobierz demoWielokrotny wybór V15
Jeśli interesuje Cię więcej podobnych stylów multiselekcji Bootstrap niż poprzednia, Multiselect V15 jest świetną alternatywą. Wyświetla pięćdziesiąt stanów w trzech kolumnach o podobnej funkcjonalności.
Ten sam styl pozostaje nienaruszony, niezależnie od tego, czy oglądasz go na telefonie komórkowym, tablecie czy komputerze. Co więcej, Multiselect V15 posiada efekt najechania i zmienia kolor na niebieski, zaznaczając je znacznikiem wyboru.
Możesz również wybrać wszystkie jednym kliknięciem.
Więcej informacji / Pobierz demoWielokrotny wybór V16
Multiselect V16 to kolejny najwyższej klasy widget wielokrotnego wyboru Bootstrap do domyślnego wyboru kraju. Zachowuje nowoczesny i minimalistyczny wygląd dzięki kilku fajnym funkcjom.
Efekt szarego najechania, animacja kliknięcia, znacznik wyboru i szybki skrót klawiaturowy do wybierania elementów według liter alfabetu to główne zalety Multiselect V16.
Nie ma tutaj opcji „zaznacz wszystko”, więc użytkownik musi dokonać wszystkich wyborów RĘCZNIE.
Więcej informacji / Pobierz demoWielokrotny wybór V17
Czasami chcesz OGRANICZYĆ liczbę wyborów, których może dokonać użytkownik. W takim przypadku w grę wchodzi Multiselect V17. Ten bezpłatny fragment ogranicza wybór do siedmiu, ale w razie potrzeby możesz wprowadzić zmiany.
Ponadto stany pojawiają się na powyższym pasku, a opcje w menu rozwijanym zmieniają kolor na zielony i zawierają znacznik wyboru. Po osiągnięciu limitu efekt kliknięcia nadal występuje, ale wybór nie następuje.
Więcej informacji / Pobierz demoWielokrotny wybór V18
Multiselect V18 to dość zaawansowany multiselect Bootstrap z różnymi specjalnościami, które go wyróżniają.
Po pierwsze, zawiera grupy w menu rozwijanym, pięknie rozkładając elementy, aby poprawić wrażenia użytkownika. Co więcej, każda grupa ma indywidualny limit wyborów, tak jak w poprzednim widżecie.
Chociaż ten wielokrotny wybór jest dla stanów po wyjęciu z pudełka, nie musisz się ograniczać w żaden sposób, kształt lub formę. Wykorzystaj to do swojej TOTALnej przewagi i zaoszczędź czas.
Więcej informacji / Pobierz demoWielokrotny wybór V19
Łatwe i wszechstronne menu rozwijane z funkcją wielokrotnego wyboru, które możesz teraz zrobić bez wydawania ani grosza.
Multiselect V19 doskonale nadaje się do wszelkiego rodzaju selekcji, ponieważ będziesz mieć możliwość łatwego wprowadzania zmian i ulepszeń, aby dopasować go do swoich potrzeb.
Wybierając różne przedmioty, możesz to zrobić z rozwijanego menu za pomocą kursora myszy lub nawet wpisać go w pasek i nacisnąć Enter. Co więcej, każdy wybór również zmienia kolor na szary, ale możesz go odznaczyć, naciskając przycisk X.
Więcej informacji / Pobierz demoWielokrotny wybór V20
Aby przenieść sprawy na wyższy poziom, wybierz ten fragment kodu wielokrotnego wyboru Bootstrap typu „trzy w jednym” i NATYCHMIAST zrób różnicę.
Możesz wygodnie podzielić rzeczy na RÓŻNE kategorie i ograniczyć liczbę elementów, które dana osoba może wybrać za pomocą funkcji wielokrotnego wyboru. Wybór odbywa się poprzez zbieranie elementów z listy rozwijanej lub wpisywanie ich i wciskanie klawisza Enter (zintegrowana funkcja wyszukiwania na żywo).
Widżet używa również różnych kolorów dla różnych kategorii/wyborów wielokrotnych, które również możesz poprawić.
Więcej informacji / Pobierz demoTeraz dowiedziałeś się więcej o wielu różnych wtyczkach Bootstrap Multiselect i wszystkich rzeczach, które mogą one wpłynąć na funkcjonalność Twojej witryny.