20 مربع Bootstrap Multiselect لتطبيق الويب الخاص بك

تساعد أدوات Bootstrap multiselect الخاصة بنا المستخدمين لديك على اختيار عناصر متعددة بسهولة على الهاتف المحمول وسطح المكتب. (يمكنك حتى وضع حدود!)

لقد حرصنا على إنشاء مجموعة متنوعة من الأمثلة التي يمكنك تطبيقها على أي شيء.

الكود بسيط وسهل للمبتدئين ، ومثالي للمستخدمين من جميع مستويات المهارة .

فيما يتعلق باستخدام عنصر واجهة مستخدم Bootstrap multiselect ، من الضروري أولاً دمج مكتبة jQuery Javascript.

قم بإنجازه مباشرة قبل عرض ملف JavaScript الرئيسي الخاص بـ Bootstrap. يجب أيضًا تعيين ملفات البرنامج المساعد JS و CSS في مكانها في العنوان <head. يمكنك تثبيتها مباشرة من صفحة الويب GitHub لمطور الويب.

فكرة بسيطة لتطوير عنصر <select> تجعل من المؤكد أن لديك سمة فريدة ومعينة له. هناك حاجة لتحديد السمة متعددة = "متعددة" القيمة = "بعض القيمة".

إنها مجموعة من الخيارات التي تحتاج إلى التفافها داخل مكون عدد عناصر <الخيار>. سيوفر لهم هذا القيمة المطلوبة = سمات "بعض القيمة".

يمكنك أيضًا التحكم في النمط. إثراء الاختيار المتعدد الذي تختاره كيفما تشاء .

كويكي. و. بسهولة.

أفضل أدوات Bootstrap Multiselect

حدد V01

دعنا نبدأ الأمور باستخدام عنصر واجهة مستخدم Bootstrap متعدد التحديدات لاختيار لغات البرمجة. قبل أن نذهب إلى أبعد من ذلك ، إذا كنت ترغب في استخدام هذا المقتطف المجاني لشيء آخر ، فيمكنك تعديله لمحتوى قلبك.

لكن في الحقيقة ، التصميم أساسي وبسيط للغاية ، مع التأكد من أنه يعمل مع المشاريع والتطبيقات المختلفة بشكل افتراضي.

بينما يمكن للمستخدم اختيار عناصر مختلفة يدويًا ، يمكنه أيضًا الضغط على مربع تحديد الكل إذا كان كل شيء يثير اهتمامه. علاوة على ذلك ، يعرض الشريط الرئيسي اختيارات المستخدم.

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V02

اجعل من السهل والملائم للمستخدمين اختيار مواضيع مختلفة باستخدام Multiselect V02. إنها أداة Bootstrap تظهر بأناقة على الأجهزة المحمولة وأجهزة سطح المكتب.

تتبع الأداة مظهرًا بسيطًا جدًا ، مع التأكد من أنك لا تحتاج إلى إجراء أي تغييرات عليها بدلاً من استخدامها كما هي.

عند تحديد الموضوع ، يظهر في حقل العرض مع خيار للنقر فوق علامة X لإزالته. سواء كان اختيار موضوع واحد أو الكل ، فإن هذا التحديد المتعدد يدعم كلاهما.

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V03

إذا كان مقتطف Bootstrap multiselect أعلاه يعرض اسم الموضوع عند التحديد ، فهذا يجعله بسيطًا جدًا مع اختيارات الأرقام.

ومع ذلك ، فإن التخصص الرئيسي لـ Multiselect V03 هو التغيير في لون خط اللغة. عند التمرير ، يتحول إلى اللون الأزرق ، ولكن عند النقر ، يتحول إلى اللون الأزرق والجريء.

يضمن الهيكل المرن أيضًا تكيفًا سلسًا مع الأجهزة المحمولة والأجهزة اللوحية وأجهزة سطح المكتب.

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V04

التحديد المتعدد V04 عبارة عن شريط به "لم يتم تحديد أي شيء" وشيفرون. بمجرد النقر فوقه ، يتم فتح قائمة منسدلة بها خيارات متعددة للاختيار.

بمجرد اختيار عنصر ، يظهر تأثير النقر الأزرق بعلامة اختيار حمراء وعرض العنصر في الشريط الرئيسي.

يمكن للجميع تحديد أو إلغاء تحديد أي عدد من العناصر أو الموضوعات أو أي شيء آخر يريدونه ، بغض النظر عن الجهاز الذي يستخدمونه.

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V05

Multiselect V05 عبارة عن مقتطف Bootstrap مجاني رائع يساعدك على تحقيق الاختيار المتعدد على التطبيق أو موقع الويب الخاص بك.

لا يهم ما هو الهدف الرئيسي للاختيار المتعدد ، يمكنك استخدام هذا بشكل مريح وفعال في كل شيء.

تتميز الأداة بتصميم أوسع قليلاً من بعض البدائل الأخرى ، مما يجعل عرض التحديدات المختلفة أكثر ملاءمة.

تحتوي القائمة المنسدلة أيضًا على مربعات اختيار وخمسة خيارات بشكل افتراضي. اجعلها ملكك ، واضبطها وانطلق من هناك.

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V06

قد يبدو Multiselect V06 مثل أي عنصر واجهة مستخدم Bootstrap متعدد التحديد آخر ، ولكنه بعيد عن ذلك. مع التصميم الحديث والرسوم المتحركة الرائعة ، يعرف هذا المقتطف المجاني كيفية إضفاء الإثارة على الأشياء .

بمعنى آخر ، إذا كنت تبحث عن شيء غير تقليدي للغاية ، فستفعل الشيء الصحيح باختيار Multiselect V06.

لكن أولاً ، يمكنك اختباره من خلال زيارة معاينة العرض التوضيحي المباشر (حتى على جهاز محمول).

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V07

بعض الاختيارات المتعددة من هذه المجموعة تكون أكثر على الجانب البسيط بينما يأتي البعض الآخر مبدعًا تمامًا. إذا كنت تتخيل الأخير أكثر ، فيجب أن تلقي نظرة خاطفة على أداء Multiselect V07 الآن.

إنه يتميز بحقل يستجيب عند التمرير ، ويغير لون النص والمخطط التفصيلي. بمجرد النقر فوقه ، تظهر قائمة منسدلة جريئة مع مواضيع مختلفة تختفي من القائمة المنسدلة وتظهر في الشريط الرئيسي عند النقر.

انطلق ، جرب واختبرها بنفسك.

مزيد من المعلومات / تنزيل العرض التوضيحي

تحديد متعدد V08

يمكن أن يتكون التحديد المتعدد لـ Bootstrap من موضوعات أو عناصر فقط للاختيار من بينها ، ولكن يمكنك أيضًا تقسيمها إلى فئات مختلفة .

هذا مفيد بشكل خاص إذا كان هناك الكثير من العناصر ، لأنه سيعزز تجربة المستخدم عند العثور على الأشياء التي تهمهم.

يعد Multiselect V08 مثالًا رائعًا على ذلك ، والذي يمكنك الآن تشغيله وجعل الأشياء تحدث بسرعة.

كما أنه يتميز بتأثير التمرير وهيكل كود مناسب للمبتدئين للجميع لتحقيق أقصى استفادة منه.

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V09

لكل من جاء إلى هذه المجموعة ، ابحث عن مقتطف داكن متعدد التحديد ، افعل لنفسك معروفًا واختر Multiselect V09. إنه بديل حديث مع كل ما يلزم لدفعك إلى الأمام على الفور.

تم تحسين الأداة للحصول على أداء رائع للأجهزة المحمولة وسطح المكتب وتتضمن تعليمات برمجية سهلة الفهم.

لجعل العرض العام أكثر ديناميكية وجاذبية للعين ، يثري Multiselect V09 الأشياء بنبرة صفراء جذابة.

مزيد من المعلومات / تنزيل العرض التوضيحي

تحديد متعدد V10

عندما يتعلق الأمر بالاختيار المتعدد الذي يحتوي على الكثير من القطع فيه ، فإن العثور عليها عن طريق التمرير قد يكون أمرًا غير مريح للغاية. لجعل حياة المستخدم أكثر بساطة ، إليك Multiselect V10.

يأتي هذا المقتطف المجاني مزودًا بوظيفة بحث مباشر عملية تكشف عن النتائج بمجرد بدء الكتابة.

يمكنك بعد ذلك النقر فوق علامة X لمسح شريط البحث والبدء ببحث جديد.

مزيد من المعلومات / تنزيل العرض التوضيحي

تحديد متعدد V11

يحتوي التحديد المتعدد لـ Bootstrap على طريقتين لاختيار العناصر من القائمة المنسدلة.

أولاً ، يمكنك تصفحها واختيار ما تفضله من خلال النقر عليها.

وثانيًا ، يوفر هذا التحديد المتعدد أيضًا التحديد عن طريق كتابته وفصل الاختيارات المختلفة بفاصلة.

شيء رائع آخر حول Multiselect V11 هو وظيفة البحث المباشر التي تقدم بحثًا سريعًا مباشرة من الشريط الرئيسي. أيضًا ، تتحول العناصر التي تختارها إلى اللون الرمادي للحصول على رؤية أفضل.

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V12

تعرف Multiselect V12 جيدًا كيفية المزج بين البساطة والتطبيق العملي لتجربة مستخدم TERRIFIC.

بينما تركز الأداة المجانية على الحالات افتراضيًا ، فإن هذه القائمة المنسدلة متعددة التحديد مع وظيفة البحث المباشر (منفصلة بفاصلة) تعتبر رائعة لأي شيء آخر.

يمكنك استخدامه لاختيار الموضوعات والعناصر واللغات ، حسنًا ، ستحصل على جوهرها - كل شيء يعمل .

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V13

نعم ، يمكنك حتى استخدام Bootstrap multiselect للأسماء ، تمامًا كما هو الحال في علبة Multiselect V13. في حين أن هذا المقتطف المجاني شبيه جدًا بالمقتطف أعلاه ، إلا أن تمييزه الرئيسي هو اختيار اللون للتحديدات.

هذا واحد يتميز بصبغة تركوازية جميلة. البحث المباشر ، أو فصل عنصر الفاصلة ، أو الاختيار اليدوي من القائمة المنسدلة كلها الأشياء الجيدة التي توفرها صخور Multiselect V13.

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V14

Multiselect V14 هو مقتطف مجاني مذهل لاختيار البلد. عند النقر فوق الشريط ، يتم فتح قائمة منسدلة تحتوي على خمسين حالة للاختيار من بينها.

بينما يمكنك تحديد ما تريده كثيرًا أو صغيرًا ، هناك أيضًا زر " تحديد الكل " السريع لاختيار القائمة بأكملها.

علاوة على ذلك ، تظهر أسماء ما يصل إلى أربعة في الشريط ولكن أي شيء أكثر من ذلك ، تعرض الأداة رقمًا. يتم أيضًا إعادة تشكيل التخطيط على الفور إلى الأجهزة المحمولة .

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V15

إذا كنت مهتمًا بأنماط أكثر تشابهًا من اختيارات Bootstrap المتعددة عن سابقتها ، فإن Multiselect V15 يعد بديلاً رائعًا. يعرض خمسين حالة في ثلاثة أعمدة بوظائف مماثلة.

يظل النمط نفسه كما هو سواء عرضه على الهاتف المحمول أو الجهاز اللوحي أو سطح المكتب. علاوة على ذلك ، يتميز Multiselect V15 بتأثير التمرير ويحول الحالات المحددة إلى اللون الأزرق ، مع الإشارة إليها بعلامة اختيار.

يمكنك أيضًا اختيار الكل بنقرة واحدة.

مزيد من المعلومات / تنزيل العرض التوضيحي

تحديد متعدد V16

Multiselect V16 هو عنصر واجهة مستخدم Bootstrap متعدد التحديدات من الدرجة الأولى لاختيار البلد افتراضيًا. إنه يحافظ على التصميم حديثًا وبسيطًا مع بعض الميزات الرائعة.

يعد تأثير التمرير الرمادي ، والنقر فوق الرسوم المتحركة ، وعلامة الاختيار ، واختصار لوحة المفاتيح السريع لاختيار العناصر حسب الأحرف الأبجدية هي السمات الأساسية لـ Multiselect V16.

لا يوجد خيار "تحديد الكل" هنا ، لذلك يحتاج المستخدم إلى إجراء جميع الاختيارات يدويًا.

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V17

في بعض الأحيان ، تريد تحديد عدد التحديدات التي يمكن للمستخدم إجراؤها. إذا كان هذا هو الحال ، فعندئذ يبدأ تشغيل Multiselect V17. يحد هذا المقتطف المجاني من التحديد إلى سبعة ، ولكن يمكنك إجراء تعديلات إذا لزم الأمر.

علاوة على ذلك ، تظهر الحالات في الشريط أعلاه وتتحول الخيارات في القائمة المنسدلة إلى اللون الأخضر وتتميز بعلامة اختيار. عند استيفاء الحد ، يظل تأثير النقر موجودًا ، لكن الاختيار لا يحدث.

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V18

Multiselect V18 عبارة عن Bootstrap متعدد الاختيارات متقدم جدًا مع تخصصات مختلفة تجعله متميزًا.

أول شيء هو أنه يحتوي على مجموعات في القائمة المنسدلة ، حيث يتم تقسيم الأشياء بشكل جميل لتعزيز تجربة المستخدم. علاوة على ذلك ، تأتي كل مجموعة بحد فردي من الخيارات ، كما هو الحال مع عنصر واجهة المستخدم السابق.

في حين أن هذا التحديد المتعدد مخصص للحالات خارج الصندوق ، فلن تحتاج إلى تقييد نفسك بأي شكل أو شكل أو شكل. استفد من ميزة TOTAL ووفر الوقت.

مزيد من المعلومات / تنزيل العرض التوضيحي

تحديد متعدد V19

قائمة منسدلة سهلة وشاملة مع ميزة التحديد المتعدد التي يمكنك الآن صنعها لك دون إنفاق سنت.

يعد Multiselect V19 رائعًا لجميع أنواع التحديدات ، حيث سيكون من السهل إجراء التعديلات والتحسينات لجعله يناسب احتياجاتك.

عند اختيار عناصر مختلفة ، يمكنك القيام بذلك من القائمة المنسدلة باستخدام مؤشر الماوس أو حتى كتابتها في الشريط والضغط على إدخال. علاوة على ذلك ، يتحول كل تحديد إلى اللون الرمادي ، ولكن يمكنك إلغاء تحديده بالضغط على الزر X.

مزيد من المعلومات / تنزيل العرض التوضيحي

حدد V20

لنقل الأشياء إلى المستوى التالي ، اختر مقتطف Bootstrap متعدد التحديد الثلاثي في ​​واحد وأحدث فرقًا فوريًا.

يمكنك بسهولة تقسيم الأشياء إلى فئات مختلفة وتحديد عدد العناصر التي يمكن للشخص تحديدها من خلال التحديد المتعدد. يحدث الاختيار إما عن طريق جمع العناصر من القائمة المنسدلة أو كتابتها لأسفل والضغط على الإدخال (ميزة البحث المباشر متكاملة).

تستخدم الأداة أيضًا ألوانًا مختلفة لفئات / اختيارات متعددة ، والتي يمكنك تحسينها أيضًا.

مزيد من المعلومات / تنزيل العرض التوضيحي

الآن ، لقد تعلمت المزيد حول العديد من المكونات الإضافية المختلفة لـ Bootstrap Multiselect وجميع الأشياء التي يمكن أن تقوم بها لوظائف موقع الويب الخاص بك.