Select بوت استرپ

Select پایه

از .form-control برای select پایه استفاده کنید.

Select سفارشی

از .custom-select برای select سفارشی استفاده کنید.

انتخاب گر چندگانه

از multiple برای select چندگانه استفاده کنید

گزینه غیرفعال

از disabled برای select غیرفعال استفاده کنید.

select با گروه ورودی

Select پایه با گروه ورودی
Select سفارشی با گروه ورودی

Select2

Select2 پایه

از .select2 برای select2 پایه استفاده کنید.

Select تکی با برچسب

از optgroup برای select2 پایه با برچسب استفاده کنید.

Select با آیکن

از صفت اطلاعاتی data-icon برای افزودن نام آیکن به هر گزینه استفاده کنید. و کلاس .select2-icons را به تگ select اضافه کنید.

پشتیبانی از قالب

Select2 از قالب های سفارشی توسط گزینه theme پشتیبانی میکند. بنابراین می توانید Select2 را برای هماهنگی با سایر قسمت های پروژه خودتان سفارشی سازی کنید. این نمونه قالب classic که قالب قدیمی Select2 هست می باشد.

Select2 چند انتخابی

Select2 چند انتخابی پایه

از .select2 برای افزودن select2 پایه استفاده کرده و صفت multiple="multiple" را برای حالت چند انتخابی به آن اضافه کنید.

Select چند انتخابی با برچسب

از optgroup برای افزودن select چند انتخابی با برچسب استفاده کنید.

Select با آیکن

از صفت اطلاعاتی data-icon برای افزودن نام آیکن به هر گزینه استفاده کنید. و کلاس .select2-icons را به تگ select اضافه کنید.

Select با حداکثر تعداد قابل انتخاب محدود با برچسب

انتخابگرهای چند انتخابی Select2 میتوانند برای حداکثر تعداد گزینه های قابل انتخاب محدود شوند. select زیر با صفتmultiple و با maximumSelectionLength در تنظیمات select2 ایجاد شده است.

Select2 با گزینه های دارای پس زمینه روشن

از .select-light-{colorName} برای اعمال پس زمینه روشن به گزینه های انتخاب شده استفاده کنید.

اختیارات حرفه ای

بارگذاری اطلاعات آرایه

Select2 راهی برای بارگذاری اطلاعات از یک آرایه محلی ارائه می دهد. میتوانید انتخاب های اولیه را به همراه اطلاعات آرایه با قرار دادن تگ option برای مقادیر انتخاب شده، مشابه select های استاندارد مشخص کنید.

بارگذاری اطلاعات Remote

Select2 با پشتیبانی از AJAX با استفاده از متد های ایجکس jQuery ارائه شده است. در این مثال ما برای repository توسط GitHub's API جستجو می کنیم.

سفارشی سازی نحوه یافتن نتایج

بر خلاف بقیه select ها در این صفحه، این یکی تنها در صورتی آیتم ها را پیدا میکند که با عبارت نوشته شده شروع شوند ، برخلاف حالت جستجو در همه جای آیتم ها: این matcher سفارشی از یک ماژول سازگاری استفاده میکند که تنها در نسخه کامل Select2 قرار داده شده است. همچنین میتوانید از matcher های پیچیده تر نیز استفاده کنید.

دسترسی Programmatic

Select2 از متدهایی که اجازه کنترل کامپوننت توسط برنامه را می دهند پشتیبانی می کند.

اندازه

برای اندازه های متفاوت Select2 از کلاس هایی مانند .select2-size-sm و .select2-size-lg برای select با اندازه های بزرگ و کوچک استفاده کنید.

بزرگ
پیش فرض
کوچک

اندازه Select چند انتخابی

برای اندازه های متفاوت Select2 از کلاس هایی مانند .select2-size-sm و .select2-size-lg برای select با اندازه های بزرگ و کوچک استفاده کنید.

بزرگ
پیش فرض
کوچک

سفارشی سازی قالب

سفارشی سازی کنید و به صورت زنده مشاهده کنید.
طرح قالب

رنگ های فهرست

جمع کردن فهرست

رنگ های نوار بالایی
نکته : این گزینه تنها در حالت نوار ثابت و در هنگام اسکرول صفحه نمایش داده خواهد شد.
نوع نوار بالایی

نوع فوتر

سایه کارت

مخفی سازی دکمه اسکرول به بالا
ارتباط با ما
امروز

How can we help? 😄

7:45 ق.ظ

Hey John, I am looking for the best admin template.

Could you please help me to find it out? 🤔

7:50 ق.ظ

Stack admin is the responsive bootstrap 4 admin template.

8:01 ق.ظ