20 caselle di selezione multipla Bootstrap per la tua app Web
Pubblicato: 2021-07-15I nostri widget di selezione multipla Bootstrap aiutano i tuoi utenti a scegliere più elementi comodamente su dispositivi mobili e desktop. (Puoi anche impostare dei limiti!)
Ci siamo assicurati di creare un pacchetto VERSATILE di esempi che puoi applicare a qualsiasi cosa.
Il codice è semplice e adatto ai principianti, perfetto per utenti di tutti i livelli .
Per quanto riguarda l'utilizzo di un widget multiselezione Bootstrap, è necessario incorporare prima la libreria Javascript jQuery.
Realizzalo subito prima di presentare il file JavaScript principale di Bootstrap. Anche i file JS e CSS del plugin devono essere impostati nel file <head. Puoi installarli direttamente dalla pagina web GitHub dello sviluppatore web.
La semplice idea di sviluppare l'elemento <select> assicura che tu abbia un attributo unico e designato. È necessario identificare l'attributo di multiple=”multiple” value=”somevalue”.
È una selezione di opzioni che devi racchiudere all'interno del componente del numero di elementi <option>. Ciò fornirà loro gli attributi value = "some-value" necessari.
Hai anche il CONTROLLO sullo stile. Arricchisci la multiselezione di tua scelta come preferisci .
Presto. E. Facilmente.
I migliori widget multiselezione Bootstrap
Selezione multipla V01
Cominciamo con un semplice widget multiselezione Bootstrap per scegliere i linguaggi di programmazione. Prima ancora di andare oltre, se desideri utilizzare questo frammento gratuito per qualcos'altro, puoi modificarlo a tuo piacimento.
Ma in realtà, il design è molto semplice e di base, assicurandosi che funzioni con diversi progetti e applicazioni per impostazione predefinita.
Mentre l'utente può selezionare diversi elementi MANUALMENTE, può anche semplicemente premere la casella Seleziona tutto se tutto lo interessa. Inoltre, la barra principale mostra le selezioni dell'utente.
Maggiori informazioni / Scarica la demoSelezione multipla V02
Rendi facile e conveniente per i tuoi utenti scegliere argomenti diversi con Multiselect V02. È un widget Bootstrap che appare elegantemente su dispositivi mobili e desktop.
Il widget segue un aspetto piuttosto minimalista, assicurandosi che NON sia necessario apportare modifiche ad esso piuttosto che utilizzarlo così com'è.
Quando si seleziona l'argomento, viene visualizzato nel campo di visualizzazione con un'opzione per fare clic sul segno X per rimuoverlo. Che si tratti di selezionare un argomento o tutti, questa selezione multipla li supporta entrambi.
Maggiori informazioni / Scarica la demoSelezione multipla V03
Se lo snippet multiselezione Bootstrap sopra mostra il nome dell'argomento al momento della selezione, questo lo rende MOLTO semplice con le scelte numeriche.
Tuttavia, la principale specialità di Multiselect V03 è il cambiamento del colore del carattere della lingua. Al passaggio del mouse, diventa blu, ma al clic diventa blu e in grassetto.
La struttura flessibile garantisce anche un facile adattamento a dispositivi mobili, tablet e desktop.
Maggiori informazioni / Scarica la demoSelezione multipla V04
Multiselect V04 è una barra con "niente selezionato" e un gallone. Dopo aver fatto clic su di esso, si apre un menu a discesa con più opzioni da selezionare.
Una volta scelto un elemento, viene visualizzato un effetto clic blu con un segno di spunta rosso e una visualizzazione dell'elemento nella barra principale.
Tutti possono selezionare o deselezionare tutti gli elementi, argomenti o altro che desiderano, indipendentemente dal dispositivo che utilizzano.
Maggiori informazioni / Scarica la demoSelezione multipla V05
Multiselect V05 è un fantastico snippet Bootstrap gratuito che ti aiuta a realizzare la multiselezione sulla tua applicazione o sul tuo sito web.
Non importa quale sia l'obiettivo principale della selezione multipla, puoi utilizzarlo comodamente ed efficacemente per tutto.
Il widget ha un layout leggermente più ampio rispetto ad alcune delle nostre altre alternative, il che rende più comoda la visualizzazione di diverse selezioni.
Il menu a discesa presenta anche caselle di controllo e cinque opzioni per impostazione predefinita. Rendilo tuo, perfezionalo e parti da lì.
Maggiori informazioni / Scarica la demoSelezione multipla V06
Multiselect V06 può sembrare qualsiasi altro widget multiselezione Bootstrap medio, ma è tutt'altro che questo. Con un design moderno e un'animazione fantastica, questo frammento gratuito sa come rendere le cose più vivaci .
In altre parole, se stai cercando qualcosa che non sia troppo tradizionale, farai la cosa giusta scegliendo Multiselect V06.
Ma prima, puoi PROVARLO visitando l'anteprima della demo live (anche su un dispositivo mobile).
Maggiori informazioni / Scarica la demoSelezione multipla V07
Alcuni multiselect di questa collezione sono più minimalisti mentre altri sono piuttosto creativi. Se ti piace di più quest'ultimo, dovresti dare un'occhiata alle prestazioni di Multiselect V07 in questo momento.
È dotato di un campo che risponde al passaggio del mouse, cambiando il colore del testo e il contorno. Una volta fatto clic, viene visualizzato un menu a discesa in grassetto con diversi argomenti che scompaiono dal menu a discesa e appaiono nella barra principale al clic.
Vai avanti, prova a testarlo tu stesso.
Maggiori informazioni / Scarica la demoSelezione multipla V08
Una selezione multipla Bootstrap può consistere solo di argomenti o elementi tra cui scegliere, ma puoi anche suddividerli in diverse categorie .
Ciò è particolarmente utile se ci sono molti elementi, in quanto POTENZIA l'esperienza dell'utente quando trova le cose che gli interessano.
Multiselect V08 ne è un ottimo esempio, che ora puoi mettere in gioco e far accadere le cose rapidamente.
Presenta anche un effetto hover e una struttura di codice adatta ai principianti per consentire a tutti di ottenere il massimo da esso.
Maggiori informazioni / Scarica la demoSelezione multipla V09
Per tutti coloro che sono venuti in questa raccolta, cerca uno snippet multiselezione scuro , fatti un favore e scegli Multiselect V09. È un'alternativa moderna con tutto il necessario per farti andare avanti subito.
Lo strumento è ottimizzato per prestazioni eccezionali su dispositivi mobili e desktop e include codice facile da digerire.
Per rendere la presentazione generale PI dinamica e accattivante, Multiselect V09 arricchisce le cose con un accattivante tono giallo.
Maggiori informazioni / Scarica la demoSelezione multipla V10
Quando si tratta di una selezione multipla con una tonnellata di pezzi, trovarli scorrendo può essere molto scomodo. Per rendere la vita dell'utente molto più semplice, ecco Multiselect V10.

Questo frammento gratuito è dotato di una pratica funzione di ricerca in tempo reale che rivela i risultati non appena inizi a digitare.
Puoi quindi fare clic sul segno X per cancellare la barra di ricerca e iniziare con una nuova ricerca.
Maggiori informazioni / Scarica la demoSelezione multipla V11
Questa selezione multipla di Bootstrap ha due modi per selezionare gli elementi dal menu a discesa.
Innanzitutto, puoi sfogliarli e scegliere quelli che ti piacciono facendo clic su di essi.
E in secondo luogo, questa selezione multipla offre anche la selezione digitandola e separando le diverse scelte con una virgola.
Un'altra cosa interessante di Multiselect V11 è la funzione di ricerca dal vivo che offre una ricerca rapida direttamente dalla barra principale. Inoltre, gli elementi che scegli diventano grigi per una migliore visibilità.
Maggiori informazioni / Scarica la demoSelezione multipla V12
Multiselect V12 sa molto bene come combinare la semplicità con la praticità per un'esperienza utente MERAVIGLIOSA.
Mentre lo strumento gratuito si concentra sugli stati per impostazione predefinita, questo menu a discesa multiselezione con una funzione di ricerca live (separata con una virgola) è ottimo per qualsiasi altra cosa.
Puoi usarlo per scegliere argomenti, oggetti, lingue, beh, ne capisci il succo: tutto funziona .
Maggiori informazioni / Scarica la demoSelezione multipla V13
Sì, puoi persino utilizzare un multiselect Bootstrap per i nomi, proprio come nel caso Multiselect V13. Sebbene questo frammento gratuito sia abbastanza SIMILE a quello sopra, la sua principale distinzione è la scelta del colore per le selezioni.
Questo presenta una bellissima tinta turchese. La ricerca dal vivo, la separazione delle voci con virgola o la scelta manuale dal menu a discesa sono tutte le chicche che Multiselect V13 offre.
Maggiori informazioni / Scarica la demoMultiselezione V14
Multiselect V14 è un fantastico frammento gratuito per la selezione del paese. Quando fai clic sulla barra, si apre un menu a discesa con cinquanta stati tra cui scegliere.
Anche se puoi selezionarne il numero o il minimo che desideri, c'è anche un pulsante VELOCE " seleziona tutto " per selezionare l'intero elenco.
Inoltre, nella barra vengono visualizzati nomi fino a quattro, ma oltre a questo, il widget visualizza un numero. Il layout si rimodella istantaneamente anche sui dispositivi mobili .
Maggiori informazioni / Scarica la demoSelezione multipla V15
Se sei interessato a stili più simili di multiselect Bootstrap rispetto al precedente, Multiselect V15 è un'ottima alternativa. Visualizza cinquanta stati in tre colonne con funzionalità simili.
Lo stesso stile rimane intatto sia che lo si visualizzi su mobile, tablet o desktop. Inoltre, Multiselect V15 presenta un effetto hover e trasforma gli stati selezionati in blu, indicandoli con un segno di spunta.
Puoi anche scegliere tutto con un SOLO click.
Maggiori informazioni / Scarica la demoSelezione multipla V16
Multiselect V16 è un altro widget multiselezione Bootstrap di prim'ordine per la selezione del paese per impostazione predefinita. Mantiene il design moderno e minimale con alcune caratteristiche interessanti.
L'effetto hover grigio, l'animazione del clic, il segno di spunta e la scorciatoia da tastiera rapida per selezionare gli elementi in base ai caratteri alfabetici sono i punti salienti di Multiselect V16.
Non c'è nessuna opzione "seleziona tutto" qui, quindi l'utente deve fare tutte le scelte MANUALMENTE.
Maggiori informazioni / Scarica la demoSelezione multipla V17
A volte, vuoi LIMITARE il numero di selezioni che un utente può fare. Se questo è il caso, è allora che entra in gioco Multiselect V17. Questo frammento gratuito limita la selezione a sette, ma puoi apportare modifiche se necessario.
Inoltre, gli stati vengono visualizzati nella barra in alto e le scelte nel menu a discesa diventano verdi e presentano un segno di spunta. Quando viene raggiunto il limite, l'effetto clic è ancora presente, ma la selezione non avviene.
Maggiori informazioni / Scarica la demoSelezione multipla V18
Multiselect V18 è un multiselect Bootstrap piuttosto avanzato con diverse specialità che lo fanno risaltare.
Per prima cosa, presenta gruppi nel menu a discesa, suddividendo magnificamente le cose per una spinta all'esperienza dell'utente. Inoltre, ogni gruppo ha un limite individuale di scelte, come con il widget precedente.
Sebbene questa selezione multipla sia per gli stati fuori dagli schemi, non è necessario limitarsi in alcun modo, forma o forma. Sfruttalo a tuo TOTALE vantaggio e risparmia tempo.
Maggiori informazioni / Scarica la demoSelezione multipla V19
Un menu a discesa facile e completo con funzionalità di selezione multipla che ora puoi creare tuo senza spendere un centesimo.
Multiselect V19 è ottimo per tutti i tipi di selezioni, poiché ti sarà facile apportare modifiche e miglioramenti per adattarlo alle tue esigenze.
Quando scegli elementi diversi, puoi farlo dal menu a discesa con il cursore del mouse o persino digitarlo nella barra e premere invio. Inoltre, anche ogni selezione diventa grigia, ma puoi deselezionarla premendo il tasto X.
Maggiori informazioni / Scarica la demoSelezione multipla V20
Per portare le cose al livello successivo, scegli questo frammento di selezione multipla Bootstrap tre in uno e fai la differenza IMMEDIATA.
Puoi comodamente suddividere le cose in DIFFERENTI categorie e limitare il numero di elementi che una persona può selezionare tramite la selezione multipla. La selezione avviene raccogliendo gli elementi dal menu a discesa o digitandoli e premendo il tasto invio (funzione di ricerca live integrata).
Il widget utilizza anche colori diversi per diverse categorie/selezione multipla, che puoi anche migliorare.
Maggiori informazioni / Scarica la demoOra hai imparato di più sui diversi plugin Bootstrap Multiselect e su tutte le cose che potrebbe fare per la funzionalità del tuo sito web.