20 boîtes à sélection multiple Bootstrap pour votre application Web
Publié: 2021-07-15Nos widgets multisélection Bootstrap aident vos utilisateurs à choisir plusieurs éléments de manière pratique sur mobile et ordinateur de bureau. (Vous pouvez même définir des limites !)
Nous nous sommes assurés de créer un ensemble d'exemples POLYVALENT que vous pouvez appliquer à n'importe quoi.
Le code est simple et convivial pour les débutants, parfait pour les utilisateurs de tous niveaux .
En ce qui concerne l'utilisation d'un widget multisélection Bootstrap, il est nécessaire d'incorporer d'abord la bibliothèque jQuery Javascript.
Accomplissez-le juste avant de présenter le fichier JavaScript principal de Bootstrap. Les fichiers JS et CSS du plugin doivent également être mis en place dans le fichier <head. Vous pouvez les installer directement à partir de la page Web GitHub du développeur Web.
L' idée simple de développer l'élément <select> garantit que vous disposez d'un attribut unique et désigné. Il est nécessaire d'identifier l'attribut de multiple="multiple" value="somevalue".
Il s'agit d'une sélection d'options que vous devez encapsuler à l'intérieur du composant du nombre d'éléments <option>. Cela leur fournira les attributs value="some-value" nécessaires.
Vous avez également le CONTRLE sur le style. Enrichissez le multiselect de votre choix comme vous le souhaitez .
Vite. Et. Facilement.
Meilleurs widgets multisélection Bootstrap
Multisélection V01
Commençons par un simple widget multisélection Bootstrap pour choisir les langages de programmation. Avant même d'aller plus loin, si vous souhaitez utiliser cet extrait gratuit pour autre chose, vous pouvez le modifier à votre guise.
Mais vraiment, la conception est très basique et simple, en s'assurant qu'elle fonctionne avec différents projets et applications par défaut.
Bien que l'utilisateur puisse choisir MANUELLEMENT différents éléments, il peut également simplement cliquer sur la case Tout sélectionner si tout l'intéresse. De plus, la barre principale affiche les sélections de l'utilisateur.
Plus d'infos / Télécharger la démoMultisélection V02
Faites en sorte que vos utilisateurs choisissent facilement et facilement différents sujets avec Multiselect V02. Il s'agit d'un widget Bootstrap qui apparaît élégamment sur les appareils mobiles et de bureau.
Le widget suit un look assez minimaliste, en vous assurant que vous n'avez pas besoin d'y apporter de modifications plutôt que de l'utiliser tel quel.
Lorsque vous sélectionnez le sujet, il apparaît dans le champ d'affichage avec une option permettant de cliquer sur le signe X pour le supprimer. Qu'il s'agisse de choisir un sujet ou tous, ce multisélection prend en charge les deux.
Plus d'infos / Télécharger la démoMultisélection V03
Si l'extrait multisélection Bootstrap ci-dessus affiche le nom du sujet lors de la sélection, celui-ci reste TRÈS simple avec les choix de nombre.
Cependant, la principale spécialité de Multiselect V03 est le changement de couleur de la police de la langue. Au survol, il devient bleu, mais au clic, il devient bleu et gras.
La structure flexible assure également une adaptation en douceur aux appareils mobiles, tablettes et ordinateurs de bureau.
Plus d'infos / Télécharger la démoMultisélection V04
Multiselect V04 est une barre avec "rien de sélectionné" et un chevron. Une fois que vous avez cliqué dessus, une liste déroulante s'ouvre avec plusieurs options à sélectionner.
Une fois que vous avez choisi un élément, un effet de clic bleu apparaît avec une coche rouge et un affichage de l'élément dans la barre principale.
Tout le monde peut sélectionner ou désélectionner autant d'éléments, de sujets ou d'autres choses qu'il le souhaite, quel que soit l'appareil qu'il utilise.
Plus d'infos / Télécharger la démoMultisélection V05
Multiselect V05 est un fantastique extrait Bootstrap gratuit qui vous aide à réaliser une multi-sélection sur votre application ou votre site Web.
Peu importe quel est l'objectif principal du multi-sélection, vous pouvez utiliser celui-ci confortablement et efficacement pour tout.
Le widget a une disposition légèrement plus large que certaines de nos autres alternatives, ce qui rend l'affichage de différentes sélections plus pratique.
La liste déroulante comporte également des cases à cocher et cinq options par défaut. Faites-en le vôtre, affinez-le et partez de là.
Plus d'infos / Télécharger la démoMultisélection V06
Multiselect V06 peut ressembler à n'importe quel autre widget multiselect Bootstrap moyen, mais c'est loin d'être le cas. Avec un design moderne et une animation cool, cet extrait gratuit sait comment pimenter les choses .
En d'autres termes, si vous recherchez quelque chose qui n'est pas trop traditionnel, vous ferez ce qu'il faut en choisissant Multiselect V06.
Mais d'abord, vous pouvez le TESTER en visitant l'aperçu de la démo en direct (même sur un appareil mobile).
Plus d'infos / Télécharger la démoMultisélection V07
Certains multisélections de cette collection sont plutôt minimalistes, tandis que d'autres sont assez créatifs. Si vous préférez ce dernier, vous devriez jeter un œil aux performances de Multiselect V07 dès maintenant.
Il comporte un champ qui répond au survol, changeant la couleur du texte et du contour. Une fois que vous avez cliqué dessus, une liste déroulante en gras apparaît avec différents sujets qui disparaissent de la liste déroulante et apparaissent dans la barre principale au clic.
Allez-y, essayez de le tester vous-même.
Plus d'infos / Télécharger la démoMultisélection V08
Une sélection multiple Bootstrap peut consister uniquement en des sujets ou des éléments parmi lesquels choisir, mais vous pouvez également les diviser en différentes catégories .
Ceci est particulièrement utile s'il y a beaucoup d'éléments, car cela augmentera l'expérience utilisateur lors de la recherche des éléments qui les intéressent.
Multiselect V08 en est une belle illustration, que vous pouvez désormais mettre en œuvre et faire bouger les choses rapidement.
Il comporte également un effet de survol et une structure de code conviviale pour les débutants pour que tout le monde en tire le meilleur parti.
Plus d'infos / Télécharger la démoMultisélection V09
Pour tous ceux qui sont venus dans cette collection à la recherche d'un extrait multisélection sombre , faites-vous plaisir et choisissez Multiselect V09. C'est une alternative moderne avec tout le nécessaire pour vous faire avancer tout de suite.
L'outil est optimisé pour d'excellentes performances mobiles et de bureau et comprend un code facile à digérer.
Pour rendre la présentation globale PLUS dynamique et attrayante pour les yeux, Multiselect V09 enrichit les choses d'un ton jaune accrocheur.
Plus d'infos / Télécharger la démoMultisélection V10
Lorsqu'il s'agit d'une sélection multiple contenant une tonne de pièces, les trouver en faisant défiler peut être très gênant. Pour simplifier la vie de l'utilisateur, voici Multiselect V10.
Cet extrait gratuit est livré avec une fonction de recherche en direct pratique qui révèle les résultats dès que vous commencez à taper.
Vous pouvez ensuite cliquer sur le signe X pour effacer la barre de recherche et commencer une nouvelle recherche.
Plus d'infos / Télécharger la démoMultisélection V11
Ce multisélection Bootstrap a deux manières de choisir les éléments dans la liste déroulante.
Tout d'abord, vous pouvez les parcourir et choisir ceux que vous aimez en cliquant dessus.
Et deuxièmement, ce multiselect offre également une sélection en le tapant et en séparant les différents choix par une virgule.
Une autre chose intéressante à propos de Multiselect V11 est la fonction de recherche en direct qui offre une recherche rapide directement à partir de la barre principale. De plus, les articles que vous choisissez deviennent gris pour une meilleure visibilité.
Plus d'infos / Télécharger la démoMultisélection V12
Multiselect V12 sait très bien mêler simplicité et praticité pour une expérience utilisateur TERRIBLE.
Alors que l'outil gratuit se concentre sur les états par défaut, cette liste déroulante à sélection multiple avec une fonction de recherche en direct (séparée par une virgule) est idéale pour tout le reste.
Vous pouvez l'utiliser pour choisir des sujets, des éléments, des langues, eh bien, vous en avez l'essentiel - tout fonctionne .
Plus d'infos / Télécharger la démoMultisélection V13
Oui, vous pouvez même utiliser un multisélection Bootstrap pour les noms, comme dans le cas Multiselect V13. Bien que cet extrait gratuit soit assez SIMILAIRE à celui ci-dessus, sa principale distinction est le choix des couleurs pour les sélections.
Celui-ci présente une belle teinte turquoise. La recherche en direct, la séparation des éléments par des virgules ou le choix manuel dans la liste déroulante sont tous les avantages que Multiselect V13 fait vibrer.
Plus d'infos / Télécharger la démoMultisélection V14
Multiselect V14 est un extrait gratuit incroyable pour la sélection de pays. Lorsque vous cliquez sur la barre, une liste déroulante s'ouvre avec cinquante états au choix.
Bien que vous puissiez en sélectionner autant ou aussi peu que vous le souhaitez, il existe également un bouton RAPIDE « tout sélectionner » pour sélectionner toute la liste.
De plus, jusqu'à quatre noms apparaissent dans la barre mais rien de plus que cela, le widget affiche un nombre. La mise en page se transforme également instantanément pour les appareils mobiles .
Plus d'infos / Télécharger la démoMultisélection V15
Si vous êtes intéressé par des styles de multisélections Bootstrap plus similaires que le précédent, Multiselect V15 est une excellente alternative. Il affiche cinquante états sur trois colonnes avec des fonctionnalités similaires.
Le même style reste intact, que ce soit sur mobile, tablette ou ordinateur de bureau. De plus, Multiselect V15 dispose d'un effet de survol et transforme les états sélectionnés en bleu, les indiquant par une coche.
Vous pouvez également tout choisir d'un SEUL clic.
Plus d'infos / Télécharger la démoMultisélection V16
Multiselect V16 est un autre widget multisélection Bootstrap de premier ordre pour la sélection de pays par défaut. Il garde le design moderne et minimal avec quelques fonctionnalités intéressantes.
L'effet de survol gris, l'animation de clic, la coche et le raccourci clavier rapide pour sélectionner des éléments par caractères alphabétiques sont les points forts de Multiselect V16.
Il n'y a pas d'option "tout sélectionner" ici, donc l'utilisateur doit faire tous les choix MANUELLEMENT.
Plus d'infos / Télécharger la démoMultisélection V17
Parfois, vous souhaitez LIMITER le nombre de sélections qu'un utilisateur peut effectuer. Si tel est le cas, c'est alors que Multiselect V17 entre en jeu. Cet extrait gratuit limite la sélection à sept, mais vous pouvez apporter des modifications si nécessaire.
De plus, les états apparaissent dans la barre ci-dessus et les choix dans la liste déroulante deviennent verts et comportent une coche. Lorsque la limite est atteinte, l'effet de clic est toujours là, mais la sélection ne se produit pas.
Plus d'infos / Télécharger la démoMultisélection V18
Multiselect V18 est un multiselect Bootstrap assez avancé avec différentes spécialités qui le distinguent.
Tout d'abord, il présente des groupes dans la liste déroulante, décomposant magnifiquement les choses pour améliorer l'expérience utilisateur. De plus, chaque groupe est livré avec une limite individuelle de choix, comme avec le widget précédent.
Bien que cette sélection multiple soit destinée aux états prêts à l'emploi, vous n'avez pas besoin de vous limiter de quelque manière que ce soit. Profitez-en TOTALEMENT et gagnez du temps.
Plus d'infos / Télécharger la démoMultisélection V19
Un menu déroulant simple et complet avec une fonction de sélection multiple que vous pouvez désormais personnaliser sans dépenser un centime.
Multiselect V19 est idéal pour toutes sortes de sélections, car il vous sera facile de faire des ajustements et des améliorations pour l'adapter à vos besoins.
Lorsque vous choisissez différents éléments, vous pouvez le faire à partir du menu déroulant avec le curseur de la souris ou même le saisir dans la barre et appuyer sur Entrée. De plus, chaque sélection devient également grise, mais vous pouvez la désélectionner en appuyant sur le bouton X.
Plus d'infos / Télécharger la démoMultisélection V20
Pour faire passer les choses au niveau supérieur, choisissez cet extrait multisélection Bootstrap trois-en-un et faites une différence IMMÉDIATE.
Vous pouvez facilement diviser les éléments en DIFFÉRENTES catégories et limiter le nombre d'éléments qu'une personne peut sélectionner par la sélection multiple. La sélection se fait soit en collectant des éléments dans la liste déroulante, soit en les tapant et en appuyant sur Entrée (fonction de recherche en direct intégrée).
Le widget utilise également différentes couleurs pour différentes catégories/multisélections, que vous pouvez également améliorer.
Plus d'infos / Télécharger la démoMaintenant, vous en avez appris plus sur les nombreux plugins Bootstrap Multiselect et sur tout ce qu'ils peuvent faire pour les fonctionnalités de votre site Web.