20 cuadros de selección múltiple de Bootstrap para su aplicación web

Nuestros widgets de selección múltiple Bootstrap ayudan a sus usuarios a elegir varios elementos cómodamente en dispositivos móviles y de escritorio. (¡Incluso puedes establecer límites!)

Nos aseguramos de crear un paquete VERSÁTIL de ejemplos que puede aplicar a cualquier cosa.

El código es simple y amigable para principiantes, perfecto para usuarios de todos los niveles .

Con respecto al uso de un widget de selección múltiple de Bootstrap, es necesario que primero incorpore la biblioteca jQuery Javascript.

Hágalo justo antes de presentar el archivo JavaScript principal de Bootstrap. Los archivos del complemento JS y CSS también deben establecerse en el <head. Puede instalarlos directamente desde la página web de GitHub del desarrollador web.

La simple idea de desarrollar el elemento <select> asegura que tiene un atributo único y designado. Es necesario identificar el atributo de multiple = ”multiple” value = ”somevalue”.

Es una selección de opciones que debe incluir dentro del componente del número de elementos <option>. Esto les proporcionará el valor necesario = atributos de "algún valor".

También tienes CONTROL sobre el estilo. Enriquece la selección múltiple de tu elección como quieras .

Rápido. Y. Fácilmente.

Los mejores widgets de selección múltiple de Bootstrap

Multiselección V01

Comencemos con un simple widget de selección múltiple Bootstrap para elegir lenguajes de programación. Antes de que vayamos más lejos, si desea utilizar este fragmento gratuito para otra cosa, puede modificarlo a su gusto.

Pero realmente, el diseño es muy básico y simple, asegurándose de que funcione con diferentes proyectos y aplicaciones por defecto.

Si bien el usuario puede elegir diferentes elementos MANUALMENTE, también puede presionar el cuadro Seleccionar todo si todo le interesa. Además, la barra principal muestra las selecciones del usuario.

Más información / Descargar Demo

Multiselección V02

Haga que sea fácil y conveniente para sus usuarios elegir diferentes temas con Multiselect V02. Es un widget de Bootstrap que aparece elegantemente en dispositivos móviles y de escritorio.

El widget tiene un aspecto bastante minimalista, asegurándose de que NO necesita hacer ningún cambio en lugar de usarlo tal como está.

Cuando selecciona el tema, aparece en el campo de visualización con una opción para hacer clic en el signo X para eliminarlo. Ya sea que elija un tema o todos, esta selección múltiple es compatible con ambos.

Más información / Descargar Demo

Multiselección V03

Si el fragmento de selección múltiple de Bootstrap anterior muestra el nombre del tema al seleccionarlo, este lo mantiene MUY simple con las opciones numéricas.

Sin embargo, la principal especialidad de Multiselect V03 es el cambio en el color de la fuente del idioma. Al pasar el mouse, se vuelve azul, pero al hacer clic, se vuelve azul y en negrita.

La estructura flexible también garantiza una adaptación fluida a dispositivos móviles, tabletas y de escritorio.

Más información / Descargar Demo

Multiselección V04

Multiselect V04 es una barra con "nada seleccionado" y un cheurón. Una vez que hace clic en él, se abre un menú desplegable con múltiples opciones para seleccionar.

Una vez que elige un elemento, aparece un efecto de clic azul con una marca de verificación roja y una visualización del elemento en la barra principal.

Todos pueden seleccionar o anular la selección de tantos elementos, temas u otros elementos que deseen, independientemente del dispositivo que utilicen.

Más información / Descargar Demo

Multiselección V05

Multiselect V05 es un fantástico fragmento de Bootstrap gratuito que le ayuda a realizar una selección múltiple en su aplicación o sitio web.

No importa cuál sea el objetivo principal de la selección múltiple, puede utilizar este de manera cómoda y efectiva para todo.

El widget tiene un diseño ligeramente más ancho que algunas de nuestras otras alternativas, lo que hace que mostrar diferentes selecciones sea más conveniente.

El menú desplegable también presenta casillas de verificación y cinco opciones de forma predeterminada. Hazlo tuyo, ajústalo y empieza a partir de ahí.

Más información / Descargar Demo

Multiselección V06

Multiselect V06 puede parecerse a cualquier otro widget de selección múltiple Bootstrap promedio, pero está lejos de eso. Con un diseño moderno y una animación genial, este fragmento gratuito sabe cómo darle vida a las cosas .

En otras palabras, si está buscando algo que no sea demasiado tradicional, hará lo correcto eligiendo Multiselect V06.

Pero primero, puede PROBARlo visitando la vista previa de la demostración en vivo (incluso en un dispositivo móvil).

Más información / Descargar Demo

Multiselección V07

Algunas selecciones múltiples de esta colección son más minimalistas, mientras que otras son bastante creativas. Si te apetece más este último, deberías echar un vistazo al rendimiento de Multiselect V07 ahora mismo.

Cuenta con un campo que responde al pasar el mouse, cambiando el color del texto y el contorno. Una vez que haces clic en él, aparece un menú desplegable en negrita con diferentes temas que desaparecen del menú desplegable y aparecen en la barra principal al hacer clic.

Adelante, intente probarlo usted mismo.

Más información / Descargar Demo

Multiselección V08

Una selección múltiple de Bootstrap puede constar solo de temas o elementos para elegir, pero también puede dividirlos en diferentes categorías .

Esto es especialmente útil si hay muchos elementos, ya que AUMENTARÁ la experiencia del usuario cuando encuentre lo que le interesa.

Multiselect V08 es una gran ilustración de eso, que ahora puede poner en juego y hacer que las cosas sucedan rápidamente.

También presenta un efecto de desplazamiento y una estructura de código amigable para principiantes para que todos puedan aprovecharlo al máximo.

Más información / Descargar Demo

Multiselección V09

Para todos los que vinieron a esta colección, busque un fragmento oscuro de selección múltiple, hágase un favor y elija Multiselect V09. Es una alternativa moderna con todo lo necesario para que puedas avanzar de inmediato.

La herramienta está optimizada para un excelente rendimiento en dispositivos móviles y de escritorio e incluye un código fácil de digerir.

Para que la presentación general sea MÁS dinámica y atractiva a la vista, Multiselect V09 enriquece las cosas con un tono amarillo pegadizo.

Más información / Descargar Demo

Multiselección V10

Cuando se trata de una selección múltiple con una tonelada de piezas, encontrarlas mediante el desplazamiento puede ser muy inconveniente. Para hacer la vida del usuario mucho más simple, aquí está Multiselect V10.

Este fragmento gratuito viene con una práctica función de búsqueda en vivo que revela los resultados tan pronto como comienzas a escribir.

Luego puede hacer clic en el signo X para borrar la barra de búsqueda y comenzar con una nueva búsqueda.

Más información / Descargar Demo

Multiselección V11

Esta selección múltiple de Bootstrap tiene dos formas de seleccionar los elementos del menú desplegable.

Primero, puede buscarlos y elegir los que le gusten haciendo clic en ellos.

Y segundo, esta selección múltiple también ofrece selección escribiéndola y separando diferentes selecciones con una coma.

Otra cosa interesante de Multiselect V11 es la función de búsqueda en vivo que ofrece una búsqueda rápida directamente desde la barra principal. Además, los elementos que elijas se vuelven grises para una mejor visibilidad.

Más información / Descargar Demo

Multiselección V12

Multiselect V12 sabe muy bien cómo mezclar simplicidad con practicidad para una experiencia de usuario TERRIFICA.

Si bien la herramienta gratuita se centra en los estados de forma predeterminada, este menú desplegable de selección múltiple con una función de búsqueda en vivo (separada con una coma) es ideal para cualquier otra cosa.

Puede usarlo para elegir temas, elementos, idiomas, bueno, ya comprende la esencia: todo funciona .

Más información / Descargar Demo

Multiselección V13

Sí, incluso puede emplear una selección múltiple de Bootstrap para los nombres, como en el caso de Multiselect V13. Si bien este fragmento gratuito es bastante SIMILAR al anterior, su principal distinción es la elección del color para las selecciones.

Este presenta un hermoso tinte turquesa. La búsqueda en vivo, la separación de elementos por comas o la elección manual en el menú desplegable son todas las ventajas que ofrece Multiselect V13.

Más información / Descargar Demo

Multiselección V14

Multiselect V14 es un increíble fragmento gratuito para la selección de países. Al hacer clic en la barra, se abre un menú desplegable con cincuenta estados para elegir.

Si bien puede seleccionar tantos o tan pocos como desee, también hay un botón RÁPIDO " seleccionar todo " para elegir la lista completa.

Además, los nombres de hasta cuatro aparecen en la barra, pero cualquier cosa más, el widget muestra un número. El diseño también cambia instantáneamente a dispositivos móviles .

Más información / Descargar Demo

Multiselección V15

Si está interesado en estilos más similares de selecciones múltiples de Bootstrap que el anterior, Multiselect V15 es una gran alternativa. Muestra cincuenta estados en tres columnas con una funcionalidad similar.

El mismo estilo permanece intacto ya sea que se vea en un dispositivo móvil, tableta o computadora de escritorio. Además, Multiselect V15 presenta un efecto de desplazamiento y convierte los estados seleccionados en azul, indicándolos con una marca de verificación.

También puede elegir todo con un SOLO clic.

Más información / Descargar Demo

Multiselección V16

Multiselect V16 es otro widget de selección múltiple Bootstrap de primer nivel para la selección de países de forma predeterminada. Mantiene el diseño moderno y minimalista con algunas características interesantes.

El efecto de desplazamiento gris, la animación de clic, la marca de verificación y el atajo de teclado rápido para seleccionar elementos por caracteres alfabéticos son los aspectos más destacados de Multiselect V16.

Aquí no existe la opción "seleccionar todo", por lo que el usuario debe realizar todas las selecciones MANUALMENTE.

Más información / Descargar Demo

Multiselección V17

A veces, desea LIMITAR la cantidad de selecciones que puede realizar un usuario. Si este es el caso, es entonces cuando entra en juego Multiselect V17. Este fragmento gratuito limita la selección a siete, pero puede realizar modificaciones si es necesario.

Además, los estados aparecen en la barra de arriba y las opciones en el menú desplegable se vuelven verdes y tienen una marca de verificación. Cuando se alcanza el límite, el efecto de clic sigue ahí, pero la selección no se produce.

Más información / Descargar Demo

Multiselección V18

Multiselect V18 es un multiselección Bootstrap bastante avanzado con diferentes especialidades que lo hacen destacar.

Lo primero es lo primero, presenta grupos en el menú desplegable, desglosando las cosas maravillosamente para mejorar la experiencia del usuario. Además, cada grupo viene con un límite individual de opciones, como con el widget anterior.

Si bien esta selección múltiple es para estados listos para usar, no es necesario que se limite de ninguna manera, forma o forma. Aproveche TOTAL y ahorre tiempo.

Más información / Descargar Demo

Multiselección V19

Un menú desplegable fácil y completo con función de selección múltiple que ahora puede hacer suyo sin gastar un centavo.

Multiselect V19 es ideal para todo tipo de selecciones, ya que le resultará fácil realizar ajustes y mejoras para que se adapte a sus necesidades.

Al elegir diferentes elementos, puede hacerlo desde el menú desplegable con el cursor del mouse o incluso escribirlo en la barra y presionar enter. Además, cada selección también se vuelve gris, pero puede deseleccionarla presionando el botón X.

Más información / Descargar Demo

Multiselección V20

Para llevar las cosas al siguiente nivel, elija este fragmento de selección múltiple de Bootstrap tres en uno y marque una diferencia INMEDIATA.

Puede dividir las cosas convenientemente en DIFERENTES categorías y limitar la cantidad de elementos que una persona puede seleccionar mediante la selección múltiple. La selección se realiza recopilando elementos del menú desplegable o escribiéndolos y presionando la tecla Intro (función de búsqueda en vivo integrada).

El widget también usa diferentes colores para diferentes categorías / selecciones múltiples, que también puede mejorar.

Más información / Descargar Demo

Ahora, ha aprendido más sobre los diferentes complementos Bootstrap Multiselect y todas las cosas que podría hacer por la funcionalidad de su sitio web.