20 диалоговых окон Bootstrap с множественным выбором для вашего веб-приложения
Опубликовано: 2021-07-15Наши виджеты Bootstrap с множественным выбором помогают пользователям удобно выбирать несколько элементов на мобильных устройствах и на компьютерах. (Вы даже можете установить ограничения!)
Мы позаботились о том, чтобы создать УНИВЕРСАЛЬНЫЙ набор примеров, которые вы можете применить к чему угодно.
Код прост и удобен для новичков, он идеально подходит для пользователей любого уровня подготовки .
Что касается использования виджета с множественным выбором Bootstrap, необходимо сначала включить библиотеку jQuery Javascript.
Сделайте это прямо перед тем, как использовать основной файл JavaScript Bootstrap. Файлы JS и CSS плагина также необходимо установить в <head. Вы можете установить их прямо с веб-страницы GitHub веб-разработчика.
Простая идея разработки элемента <select> гарантирует, что у вас есть уникальный и назначенный ему атрибут. Необходимо определить атрибут multiple = "multiple" value = "somevalue".
Это набор параметров, которые вам нужно обернуть внутри компонента числа элементов <option>. Это предоставит им необходимые атрибуты value = "some-value".
У вас также есть КОНТРОЛЬ над стилем. Пополняйте свой выбор, как хотите .
Быстро. А также. С легкостью.
Лучшие виджеты Bootstrap Multiselect
Мультиселект V01
Давайте начнем с простого виджета Bootstrap с множественным выбором для выбора языков программирования. Прежде чем мы пойдем дальше, если вы хотите использовать этот бесплатный фрагмент для чего-то еще, вы можете изменить его по своему усмотрению.
Но на самом деле дизайн очень простой и простой, поэтому по умолчанию он работает с разными проектами и приложениями.
Хотя пользователь может выбирать различные элементы ВРУЧНУЮ, он также может просто нажать поле «Выбрать все», если его все интересует. Кроме того, основная панель отображает выбор пользователя.
Подробнее / Скачать демоMultiselect V02
Сделайте так, чтобы вашим пользователям было легко и удобно выбирать разные темы с помощью Multiselect V02. Это виджет Bootstrap, который элегантно отображается на мобильных и настольных устройствах.
Виджет выполнен в довольно минималистичном стиле, поэтому вам НЕ нужно вносить в него какие-либо изменения, а использовать его как есть.
Когда вы выбираете тему, она появляется в поле отображения с возможностью щелкнуть значок X, чтобы удалить ее. Независимо от того, выбирает ли он одну тему или все, этот множественный выбор поддерживает обе темы.
Подробнее / Скачать демоMultiselect V03
Если приведенный выше фрагмент Bootstrap с множественным выбором отображает имя темы при выборе, этот вариант делает его ОЧЕНЬ простым с выбором числа.
Однако главной особенностью Multiselect V03 является изменение цвета шрифта языка. При наведении указателя мыши он становится синим, но при нажатии становится синим и жирным.
Гибкая структура также обеспечивает плавную адаптацию к мобильным, планшетным и настольным устройствам.
Подробнее / Скачать демоМультиселект V04
Multiselect V04 - это полоса с надписью «ничего не выбрано» и шевроном. После того, как вы нажмете на нее, откроется раскрывающийся список с несколькими вариантами для выбора.
После выбора элемента появляется синий эффект щелчка с красной галочкой и отображение элемента на главной панели.
Каждый может выбрать или отменить выбор любого количества элементов, тем и прочего, независимо от устройства, которое они используют.
Подробнее / Скачать демоMultiselect V05
Multiselect V05 - это фантастический бесплатный фрагмент кода Bootstrap, который поможет вам реализовать множественный выбор в вашем приложении или на веб-сайте.
Неважно, какова основная цель множественного выбора, вы можете удобно и эффективно использовать его для всего.
Виджет имеет немного более широкий макет, чем некоторые другие наши альтернативы, что делает отображение различных вариантов более удобным.
В раскрывающемся списке также есть флажки и пять параметров по умолчанию. Сделайте его своим, настройте его и приступайте к делу.
Подробнее / Скачать демоMultiselect V06
Multiselect V06 может выглядеть как любой другой средний виджет с множественным выбором Bootstrap, но это далеко не так. Этот бесплатный сниппет с современным дизайном и классной анимацией умеет оживить .
Другими словами, если вы ищете что-то не слишком традиционное, вы поступите правильно, выбрав Multiselect V06.
Но сначала вы можете ПРОВЕРИТЬ это, посетив предварительный просмотр демо-версии (даже на мобильном устройстве).
Подробнее / Скачать демоMultiselect V07
Некоторые мультиселекты из этой коллекции более минималистичны, а некоторые довольно креативны. Если вы представляете себе последний больше, вы должны взглянуть на производительность MULTISELECT V07 прямо сейчас.
В нем есть поле, которое реагирует на наведение, изменяя цвет текста и контура. После того, как вы щелкнете по нему, появится раскрывающийся список с различными темами, которые исчезнут из раскрывающегося списка и появятся на главной панели при нажатии.
Давай, попробуй и проверь сам.
Подробнее / Скачать демоMultiselect V08
Множественный выбор Bootstrap может состоять только из тем или элементов на выбор, но вы также можете разбить их на разные категории .
Это особенно полезно, если элементов много, так как это УЛУЧШИТ пользовательский опыт при нахождении того, что их интересует.
Multiselect V08 является отличной иллюстрацией этого, и теперь вы можете применить ее, чтобы все происходило быстро.
Он также имеет эффект наведения и удобную для новичков структуру кода, чтобы каждый мог извлечь из него максимальную пользу.
Подробнее / Скачать демоMultiselect V09
Для всех, кто пришел в эту коллекцию, ищите темный фрагмент множественного выбора, сделайте себе одолжение и выберите Multiselect V09. Это современная альтернатива со всем необходимым, чтобы вы сразу двигались вперед.
Инструмент оптимизирован для обеспечения высокой производительности мобильных и настольных компьютеров и включает простой для понимания код.
Чтобы сделать общую презентацию БОЛЕЕ динамичной и привлекательной для глаз, Multiselect V09 обогащает ее броским желтым тоном.
Подробнее / Скачать демоMultiselect V10
Когда дело доходит до множественного выбора с множеством элементов, поиск их с помощью прокрутки может быть очень неудобным. Чтобы сделать жизнь пользователя намного проще, вот Multiselect V10.
Этот бесплатный фрагмент кода содержит практическую функцию поиска в реальном времени, которая обнаруживает совпадения, как только вы начинаете вводить текст.
Затем вы можете щелкнуть значок X, чтобы очистить панель поиска и начать новый поиск.
Подробнее / Скачать демоMultiselect V11
Этот множественный выбор Bootstrap имеет два способа выбора элементов из раскрывающегося списка.
Во-первых, вы можете просмотреть их и выбрать те, которые вам нравятся, щелкнув по ним.
Во-вторых, этот множественный выбор также предлагает выбор, набирая его и разделяя разные выборки запятой.
Еще одна интересная особенность Multiselect V11 - это функция поиска в реальном времени, которая предлагает быстрое исследование прямо из главной панели. Кроме того, выбранные вами предметы становятся серыми для лучшей видимости.
Подробнее / Скачать демоMultiselect V12
Multiselect V12 очень хорошо знает, как сочетать простоту и практичность для УЖЕСТВЕННОГО взаимодействия с пользователем.
В то время как бесплатный инструмент по умолчанию фокусируется на состояниях, этот выпадающий список с множественным выбором с функцией поиска в реальном времени (разделяется запятой) отлично подходит для всего остального.
Вы можете использовать его для выбора тем, предметов, языков, ну, вы понимаете суть - все работает .
Подробнее / Скачать демоMultiselect V13
Да, вы даже можете использовать множественный выбор Bootstrap для имен, как в случае Multiselect V13. Хотя этот бесплатный фрагмент ПОДОБНЫЙ фрагменту, приведенному выше, его основным отличием является выбор цвета для выделения.
Этот имеет красивый бирюзовый оттенок. Живой поиск, разделение запятыми или ручной выбор из раскрывающегося списка - все это плюсы, которые дает Multiselect V13.
Подробнее / Скачать демоMultiselect V14
Multiselect V14 - замечательный бесплатный сниппет для выбора страны. Когда вы нажимаете на панель, открывается раскрывающийся список с пятьюдесятью состояниями на выбор.
Хотя вы можете выбрать столько или меньше, сколько хотите, есть также БЫСТРАЯ кнопка « выбрать все » для выбора всего списка.
Более того, на панели отображаются имена до четырех, но все, что больше, виджет отображает число. Макет также мгновенно трансформируется в мобильные устройства .
Подробнее / Скачать демоMultiselect V15
Если вас интересует больше похожих стилей множественного выбора Bootstrap, чем в предыдущем, Multiselect V15 - отличная альтернатива. Он отображает пятьдесят состояний в трех столбцах с аналогичной функциональностью.
Тот же стиль остается неизменным при просмотре на мобильном телефоне, планшете или компьютере. Более того, Multiselect V15 имеет эффект наведения и окрашивает выбранные состояния в синий цвет, отмечая их галочкой.
Вы также можете выбрать все одним щелчком мыши.
Подробнее / Скачать демоMultiselect V16
Multiselect V16 - еще один первоклассный виджет Bootstrap с множественным выбором для выбора страны по умолчанию. Он сохраняет современный и минималистичный дизайн с несколькими интересными функциями.
Эффект серого наведения, анимация щелчка, галочка и быстрое сочетание клавиш для выбора элементов по алфавиту - вот основные особенности Multiselect V16.
Здесь нет опции «выбрать все», поэтому пользователю нужно сделать все выборы ВРУЧНУЮ.
Подробнее / Скачать демоMultiselect V17
Иногда вам нужно ОГРАНИЧИТЬ количество вариантов выбора, которые может сделать пользователь. Если это так, тогда в игру вступает Multiselect V17. Этот бесплатный фрагмент ограничивает выбор семью, но при необходимости вы можете внести изменения.
Кроме того, состояния отображаются на панели выше, а варианты выбора в раскрывающемся списке становятся зелеными и отмечены галочкой. Когда предел достигнут, эффект щелчка остается, но выбор не происходит.
Подробнее / Скачать демоMultiselect V18
Multiselect V18 - это довольно продвинутая система множественного выбора Bootstrap с различными особенностями, которые выделяют ее.
Прежде всего, в нем есть группы в раскрывающемся списке, которые красиво разбивают элементы для повышения удобства работы пользователей. Более того, каждая группа имеет индивидуальный лимит выбора, как и в предыдущем виджете.
Хотя этот множественный выбор предназначен для состояний из коробки, вам не нужно ограничивать себя каким-либо образом, формой или формой. Воспользуйтесь ВСЕГО преимущества и сэкономьте время.
Подробнее / Скачать демоMultiselect V19
Легкое и универсальное раскрывающееся меню с функцией множественного выбора, которое теперь вы можете сделать своим, не тратя ни копейки.
Multiselect V19 отлично подходит для всех видов выбора, так как вам будет легко вносить корректировки и улучшения, чтобы они соответствовали вашим потребностям.
Выбирая различные элементы, вы можете сделать это из раскрывающегося списка с помощью курсора мыши или даже ввести его в строке и нажать Enter. Кроме того, каждый выбор также становится серым, но вы можете отменить его , нажав кнопку X.
Подробнее / Скачать демоMultiselect V20
Чтобы перейти на следующий уровень, выберите этот фрагмент «три в одном» Bootstrap с множественным выбором и НЕМЕДЛЕННО внесите изменения.
Вы можете удобно разбить элементы на РАЗЛИЧНЫЕ категории и ограничить количество элементов, которые человек может выбрать с помощью множественного выбора. Выбор происходит либо путем сбора элементов из раскрывающегося списка, либо путем ввода и нажатия клавиши ввода (встроенная функция поиска в реальном времени).
Виджет также использует разные цвета для разных категорий / множественных выборок, которые вы тоже можете улучшить.
Подробнее / Скачать демоТеперь вы узнали больше о многих различных плагинах Bootstrap Multiselect и обо всем, что они могут сделать для функциональности вашего сайта.