20 Caixas multisseleção de bootstrap para seu aplicativo da web
Publicados: 2021-07-15Nossos widgets multisseleção Bootstrap ajudam seus usuários a escolher vários itens de forma conveniente no celular e no desktop. (Você pode até definir limites!)
Fizemos questão de criar um pacote VERSÁTIL de exemplos que você pode aplicar a qualquer coisa.
O código é simples e amigável para iniciantes, perfeito para usuários de todos os níveis de habilidade .
Com relação ao uso de um widget de multisseleção Bootstrap, é necessário que você primeiro incorpore a biblioteca jQuery Javascript.
Faça isso antes de apresentar o arquivo JavaScript principal do Bootstrap. Os arquivos JS e CSS do plugin também precisam ser configurados no <head. Você pode instalá-los diretamente na página da web do GitHub do desenvolvedor da web.
A ideia simples de desenvolver o elemento <select> garante que você tenha um atributo único e designado para ele. É necessário identificar o atributo de múltiplo = ”múltiplo” valor = ”algum valor”.
É uma seleção de opções que você precisa envolver dentro do componente do número de elementos <option>. Isso fornecerá a eles o valor necessário = atributos de ”algum valor”.
Você também tem CONTROLE sobre o estilo. Enriqueça a seleção múltipla de sua escolha como quiser .
Quicky. E. Facilmente.
Best Bootstrap Multiselect Widgets
Multiselect V01
Vamos começar com um widget multisseleção simples do Bootstrap para escolher linguagens de programação. Antes mesmo de prosseguirmos, se você gostaria de usar este snippet grátis para outra coisa, você pode modificá- lo como quiser.
Mas, realmente, o design é muito básico e simples, garantindo que funcione com diferentes projetos e aplicativos por padrão.
Embora o usuário possa escolher diferentes itens MANUALMENTE, ele também pode simplesmente clicar na caixa de seleção de tudo se tudo lhe interessar. Além disso, a barra principal exibe as seleções do usuário.
Mais informações / Download de demonstraçãoMultiselect V02
Torne mais fácil e conveniente para seus usuários escolherem diferentes tópicos com o Multiselect V02. É um widget Bootstrap que tem uma aparência elegante em dispositivos móveis e de desktop.
O widget segue uma aparência bastante minimalista, certificando-se de que você NÃO precisa fazer nenhuma alteração, em vez de usá-lo como está.
Quando você seleciona o tópico, ele aparece no campo de exibição com a opção de clicar no sinal X para removê-lo. Seja escolhendo um tópico ou todos, esta seleção múltipla oferece suporte para ambos.
Mais informações / Download de demonstraçãoMultiselect V03
Se o trecho de multisseleção do Bootstrap acima exibe o nome do tópico na seleção, este o mantém MUITO simples com as opções de número.
No entanto, a principal especialidade do Multiselect V03 é a mudança na cor da fonte do idioma. Ao passar o mouse, ele fica azul, mas ao clicar, fica azul e em negrito.
A estrutura flexível também garante uma adaptação suave a dispositivos móveis, tablets e desktops.
Mais informações / Download de demonstraçãoMultiselect V04
Multiselect V04 é uma barra com “nada selecionado” e uma divisa. Depois de clicar nele, um menu suspenso é aberto com várias opções para selecionar.
Depois de escolher um item, um efeito de clique azul aparece com uma marca de seleção vermelha e uma exibição do item na barra principal.
Todos podem selecionar ou desmarcar quantos itens, tópicos ou outros enfeites quiserem, independentemente do dispositivo que usam.
Mais informações / Download de demonstraçãoMultiselect V05
Multiselect V05 é um fantástico snippet de Bootstrap gratuito que o ajuda a realizar a seleção múltipla em seu aplicativo ou site.
Não importa qual seja o objetivo principal da seleção múltipla, você pode utilizá-la de maneira confortável e eficaz para tudo.
O widget tem um layout ligeiramente mais amplo do que algumas de nossas outras alternativas, o que torna a exibição de diferentes seleções mais conveniente.
O menu suspenso também apresenta caixas de seleção e cinco opções por padrão. Personalize-o, ajuste-o e siga em frente.
Mais informações / Download de demonstraçãoMultiselect V06
O Multiselect V06 pode se parecer com qualquer outro widget multiselect comum do Bootstrap, mas está longe disso. Com um design moderno e animação bacana, este snippet gratuito sabe como apimentar as coisas .
Em outras palavras, se você está procurando por algo que não seja muito tradicional, você fará a coisa certa escolhendo o Multiselect V06.
Mas, primeiro, você pode TESTAR visitando a visualização da demonstração ao vivo (mesmo em um dispositivo móvel).
Mais informações / Download de demonstraçãoMultiselect V07
Algumas seleções múltiplas desta coleção são mais minimalistas, enquanto outras são bastante criativas. Se você gosta mais do último, deveria dar uma olhada no desempenho do Multiselect V07 agora.
Possui um campo que responde ao passar o mouse, mudando a cor do texto e do contorno. Depois de clicar nele, uma lista suspensa em negrito aparece com diferentes tópicos que desaparecem da lista suspensa e aparecem na barra principal ao clicar.
Vá em frente, tente e teste você mesmo.
Mais informações / Download de demonstraçãoMultiselect V08
Uma multisseleção do Bootstrap pode consistir apenas em tópicos ou itens para escolher, mas você também pode dividi-los em diferentes categorias .
Isso é especialmente útil se houver muitos itens, pois AUMENTARÁ a experiência do usuário ao encontrar as coisas que o interessam.
O Multiselect V08 é uma grande ilustração disso, que agora você pode colocar em ação e fazer as coisas acontecerem rapidamente.
Ele também apresenta um efeito de foco e uma estrutura de código amigável para iniciantes para que todos possam aproveitar ao máximo.
Mais informações / Download de demonstraçãoMultiselect V09
Para todos que vieram para esta coleção de busca por um trecho dark multiselect, faça um favor a si mesmo e escolha Multiselect V09. É uma alternativa moderna com todo o necessário para que você siga em frente.
A ferramenta é otimizada para excelente desempenho móvel e desktop e inclui código fácil de digerir.
Para tornar a apresentação geral MAIS dinâmica e atraente aos olhos, o Multiselect V09 enriquece as coisas com um tom amarelo cativante.
Mais informações / Download de demonstraçãoMultiselect V10
Quando se trata de uma seleção múltipla com uma tonelada de peças, encontrá-las rolando pode ser muito inconveniente. Para tornar a vida do usuário muito mais simples, aqui está o Multiselect V10.
Este trecho gratuito vem com uma função prática de pesquisa ao vivo que revela resultados assim que você começa a digitar.
Você pode clicar no sinal X para limpar a barra de pesquisa e começar com uma nova pesquisa.
Mais informações / Download de demonstraçãoMultiselect V11
Esta multisseleção do Bootstrap tem duas maneiras de escolher os itens do menu suspenso.
Primeiro, você pode navegar por eles e escolher aqueles de que gosta clicando neles.
E, em segundo lugar, esta seleção múltipla também oferece seleção digitando -a e separando diferentes escolhas com uma vírgula.
Outra coisa legal sobre o Multiselect V11 é a função de pesquisa ao vivo que oferece pesquisa rápida diretamente da barra principal. Além disso, os itens que você escolhe ficam cinza para melhor visibilidade.
Mais informações / Download de demonstraçãoMultiselect V12
O Multiselect V12 sabe muito bem como combinar simplicidade com praticidade para uma experiência de usuário TERRÍFICA.
Embora a ferramenta gratuita se concentre nos estados por padrão, essa lista suspensa multisseleção com uma função de pesquisa ao vivo (separada por uma vírgula) é ótima para qualquer outra coisa.
Você pode usá-lo para selecionar tópicos, itens, idiomas, bem, você obtém a essência - tudo funciona .
Mais informações / Download de demonstraçãoMultiselect V13
Sim, você pode até empregar uma multisseleção Bootstrap para nomes, assim como no caso do Multiselect V13. Embora este snippet gratuito seja muito SEMELHANTE ao anterior, sua principal diferença é a escolha da cor para as seleções.
Este apresenta um belo tom turquesa. A pesquisa ao vivo, a separação de itens por vírgula ou a escolha manual no menu suspenso são todas as vantagens do Multiselect V13.
Mais informações / Download de demonstraçãoMultiselect V14
Multiselect V14 é um snippet gratuito incrível para a seleção de países. Quando você clica na barra, um menu suspenso é aberto com cinquenta estados para escolher.
Embora você possa selecionar quantos quiser, há também um botão RÁPIDO “ selecionar tudo ” para escolher a lista inteira.
Além disso, nomes de até quatro pessoas aparecem na barra, mas qualquer coisa além disso, o widget exibe um número. O layout também muda instantaneamente para dispositivos móveis .
Mais informações / Download de demonstraçãoMultiselect V15
Se você estiver interessado em estilos mais semelhantes de multisseleções Bootstrap do que o anterior, o Multiselect V15 é uma ótima alternativa. Ele exibe cinquenta estados em três colunas com funcionalidade semelhante.
O mesmo estilo permanece intacto, seja no celular, tablet ou desktop. Além do mais, o Multiselect V15 apresenta um efeito de pairar e torna os estados selecionados em azul, indicando-os com uma marca de seleção.
Você também pode escolher todos com um ÚNICO clique.
Mais informações / Download de demonstraçãoMultiselect V16
Multiselect V16 é outro widget multiselect Bootstrap de primeira linha para seleção de país por padrão. Ele mantém o design moderno e minimalista, com alguns recursos interessantes.
Efeito de foco cinza, animação de clique, marca de seleção e atalho de teclado rápido para escolher itens por caracteres alfabéticos são os principais destaques do Multiselect V16.
Não há opção “selecionar tudo” aqui, então o usuário precisa fazer todas as escolhas MANUALMENTE.
Mais informações / Download de demonstraçãoMultiselect V17
Às vezes, você deseja LIMITAR o número de seleções que um usuário pode fazer. Se for esse o caso, é quando o Multiselect V17 entra em jogo. Este snippet grátis limita a seleção a sete, mas você pode fazer alterações, se necessário.
Além disso, os estados aparecem na barra acima e as opções no menu suspenso ficam verdes e apresentam uma marca de seleção. Quando o limite é atingido, o efeito de clique ainda está lá, mas a seleção não acontece.
Mais informações / Download de demonstraçãoMultiselect V18
O Multiselect V18 é um multiselect de Bootstrap bastante avançado com diferentes especialidades que o fazem se destacar.
Em primeiro lugar, ele apresenta grupos na lista suspensa, dividindo as coisas lindamente para um impulso na experiência do usuário. Além disso, cada grupo vem com um limite individual de escolhas, como no widget anterior.
Embora essa seleção múltipla seja para estados prontos para uso, você não precisa se limitar de nenhuma maneira, forma ou forma. Aproveite a vantagem TOTAL e economize tempo.
Mais informações / Download de demonstraçãoMultiselect V19
Um menu suspenso fácil e completo com recurso multisseleção que agora você pode personalizar sem gastar um centavo.
O Multiselect V19 é ótimo para todos os tipos de seleções, pois você terá facilidade para fazer ajustes e melhorias para adequá-lo às suas necessidades.
Ao escolher itens diferentes, você pode fazê-lo no menu suspenso com o cursor do mouse ou até mesmo digitá-lo na barra e clicar em Enter. Além disso, cada seleção também fica cinza, mas você pode desmarcá-la pressionando o botão X.
Mais informações / Download de demonstraçãoMultiselect V20
Para levar as coisas para o próximo nível, escolha este trecho de seleção múltipla do Bootstrap três em um e faça uma diferença IMEDIATA.
Você pode convenientemente dividir as coisas em categorias DIFERENTES e limitar quantos itens uma pessoa pode selecionar pela multisseleção. A seleção acontece coletando itens no menu suspenso ou digitando-os e pressionando Enter (recurso de pesquisa ao vivo integrado).
O widget também usa cores diferentes para diferentes categorias / multisseleções, que você também pode melhorar.
Mais informações / Download de demonstraçãoAgora, você aprendeu mais sobre os diversos plug-ins do Bootstrap Multiselect e todas as coisas que ele pode fazer pela funcionalidade do seu site.