فهرست بهترین پلاگین‌های (Plugins) بوت‌استرپ (Bootstrap) در سال ۲۰۱۷

بوت‌استرپ (Bootstrap) به خودی خود، پُر از اجزای جاوااسکریپت مفید است که کاربردهای زیادی را پوشش می‌دهند. به عنوان مثال: از modal window برای لاگین کاربران، از carousel برای صفحه‌ی اصلی، از alert messages برای نمایش یک پیغام مهم به کاربران می‌توان استفاده کرد.

اما در برخی موارد شما به بیش از اینها نیاز دارید. یک lightbox برای نمایش عکس‌ها، یک ویرایشگر متن (text editor) و یا megamenu برای استفاده در بخش منوی سایت خود نیاز دارید. اینجاست که سراغ پلاگین‌هایی می‌روید که برای بوت‌استرپ نوشته شده‌اند. آن‌ها معمولا روی کامپوننت‌های موجود در بوت‌استرپ نوشته می‌شوند و به شکل‌های مختلف توسعه‌شان می‌دهند.

امروز قصد دارم از بین پلاگین‌هایی که استفاده کردم؛ بهترین‌شان را به شما معرفی کنم. این شما و این هم فهرست بهترین پلاگین‌های بوت‌استرپ در سال ۲۰۱۷٫

توجه: شاید برخی از پلاگین‌هایی که در زیر معرفی می‌شوند، آخرین نسخه‌ی منتشر شده از بوت‌استرپ را به خوبی پشتیبانی نکنند.

من پلاگین‌ها را در گروه‌های کوچکی دسته‌بندی کردم:

اگر شما هم از پلاگینی استفاده کرده‌اید و یا خودتان آن را توسعه داده‌اید، و فکر می‌کنید که باید در این لیست قرار گیرد، خوشحال می‌شوم که در بخش نظرات به من اطلاع دهید. سپاس!


COMPONENT PACKAGES


Fuel UX

این پلاگین، کنترل‌های جاوااسکریپت سبکی را برای برنامه‌های تحت وب شما به بوت‌استرپ اضافه می‌کند. این کنترل‌ها شامل checkbox, combo box, date picker, infinite scroll, loader, pillbox, placard, radio, repeater, schedule, search, select list, spinbox, tree and wizard می‌شود. این کتابخانه واقعا ارزش چک کردن دارد.

همچنین در سایت آن یک سازنده‌ی فرم (Form Builder) وجود دارد که با کمک آن می‌توانید فرم‌های خود را به سادگی و با کشیدن و رها کردن بسازید.

وب‌سایت

Fuel UX


Jasny Bootstrap

این پلاگین بسته‌ای از اجزایی است که برای خیلی از ما می‌تواند مفید باشد. دکمه‌های برچسب دار (labelled buttons)، کامپوننت منوی off-canvas، هشدارهایی که در بالای صفحه ثابت می‌شوند (fixed-top alerts)، فیلد بارگذاری فایل با قابلیت پیش‌نمایش تصاویر، mask برای فیلدهای فرم و خیلی چیزهای دیگر.

وب‌سایت

Jasny Bootstrap


LIGHTBOXES AND GALLERY PLUGINS


EkkoLightbox – Lightbox for Bootstrap

این ماژول علاوه بر تصاویر، ویدئوهای یوتیوب و گالری‌های تصویری را پشتیبانی می‌کند. و بر مبنای پلاگین modal در بوت‌استرپ ساخته شده است. به راحتی می‌توانید استایل دلخواه خود را به آن دهید و همچون پنجره‌های modal می‌توانید بخش‌های header و footer را داشته باشید.

حتما به وب‌سایت این پلاگین مراجعه کنید و نمونه‌های آماده‌ی آن را تماشا کنید.

وب‌سایت

EkkoLightbox - Lightbox for Bootstrap


Bootstrap Media Lightbox

این پلاگین سبک و بدون حاشیه، می‌تواند تصاویر تکی، گالری تصاویر، ویدئوها و همچنین iframe ها را نمایش دهد. و در حال حاضر از نسخه‌ی ۳ بوت‌استرپ پشتیبانی می‌کند.

وب‌سایت

Bootstrap Media Lightbox


Blueimp Gallery

این پلاگین صفحات لمسی را پشتیبانی می‌کند، واکنشگراست و قابلیت شخصی‌سازی برای مجموعه‌ای از تصاویر یا ویدئوها را دارد. تصاویر و ویدئوها در قابل پنجره‌های modal در بوت‌استرپ نمایش داده می‌شوند. از طریق ماوس و کیبورد می‌توان راهبری را انجام داد. جلوه‌های بصری برای جابه‌جایی بین آیتم‌های گالری قابل استفاده است. از قابلیت تمام‌صفحه (full screen) پشتیبانی می‌کند. محتوا بر اساس درخواست کاربر بارگذاری شده و به این ترتیب سرعت بهتری در نمایش خواهد داشت.

وب‌سایت

Bootstrap Image Gallery


BUTTONS


CSS3 Microsoft Modern Buttons

این پلاگین به شما کمک می‌کند که به آسانی دکمه‌هایی شبیه به دکمه‌های طراحی شده توسط Microsoft را در سایت خود داشته باشید. در کنار دکمه‌های پیش‌فرض بوت‌استرپ، می‌تواند خیلی خوب باشد.

وب‌سایت

CSS3 Microsoft Modern Buttons


Social Buttons for Bootstrap

مجموعه‌ای از دکمه‌های ورود از طریق شبکه‌های اجتماعی که فقط با استفاده از CSS و بر اساس بوت‌استرپ و Font Awesome ساخته شده‌اند. خیلی راحت می‌توانید با آنها کار کنید و تنها کافیست از کلاس‌های آماده شده استفاده کنید.

وب‌سایت

Social Buttons for Bootstrap


NAVIGATIONS AND NAVBARS


Yamm

Yamm در حقیقت یک مگامنو برای بوت‌استرپ ۳ است.

از نشانه‌گذاری استاندارد برای navbar و همچنین کلاس‌های سیستم fluid grid در بوت‌استرپ استفاده می‌کند. با طرح‌بندی (layout) واکنشگرا و ثابت کار می‌کند و تقریبا هر کدام از المان‌های بوت‌استرپ را می‌توانید درون آن استفاده کنید.

وب‌سایت

Yamm


Bootstrap Sidebar

این پلاگین یک نوار کناری واکنشگرا برای بوت‌استرپ ۳ فراهم می‌کند. اگر تعداد گزینه‌های منوی شما آنقدر زیاد است که در یک نوار منوی افقی، فضای کافی برای آن وجود ندارد و یا اگر به یک نوار کناری واکنشگرا و سازگار با بوت‌استرپ احتیاج دارید، این پلاگین می‌تواند گزینه‌ی مناسبی برای شما باشد.

وب‌سایت

Bootstrap Sidebar


Bootstrap hover dropdown

با استفاده از این پلاگین، شما می‌توانید دکمه‌های افتادنی (drop-downs) را تنها با بردن ماوس روی آنها باز کنید و نیاز به کلیک روی دکمه نباشد. یک ویژگی خوبی که دارد این است که می‌توانید یک timeout برای آن تنظیم کنید.

وب‌سایت

Bootstrap hover dropdown


Tab drop for Bootstrap

این اسکریپت برای زمانی که تب‌های شما زیاد هستند و در یک ردیف قرار نمی‌گیرند، بسیار مناسب است. این پلاگین تب‌هایی که اضافی هستند را در یک تب جدید که منویی افتادنی (drop-down) دارد، قرار می‌دهد. به نظرم این فوق‌العاده‌ست.

وب‌سایت

Tab drop for Bootstrap


Bootstrap Tree Navigation

همانطور که از نام این پلاگین مشخص است، به شما کمک می‌کند که منوهایی با ساختار درختی ایجاد نمایید. حتما شما هم کاربردهای زیادی برای این پلاگین در ذهن خود دارید.

وب‌سایت

Bootstrap Tree Navigation


FORMS


jqBootstrapValidation

این پلاگین جی‌کوئری (jQuery) فرم‌های بوت‌استرپ را اعتبارسنجی می‌کند. صحت و درستی ایمیل، اعداد، حداقل و حداکثر مقدار، الگوها و خیلی چیزهای دیگر را می‌توانید با این پلاگین بسنجید.

وب‌سایت

jq Bootstrap Validation


Tokenfield for Bootstrap

این یک پلاگین پیشرفته برای برچسب زدن/نشانه‌گذاری (tagging/tokenizing) است. به طور خاص می‌تواند از کیبورد همچون دکمه‌های جهت‌نما، دکمه‌ی Backspace و دکمه‌ی Delete و copy-paste پشتیبانی کند.

وب‌سایت

Tokenfield for Bootstrap


Bootstrap Combobox

با استفاده از این پلاگین می‌توانید تجربه‌ی کاربران خود را هنگامی که با لیست بلندی برای انتخاب مواجه هستند، بهبود ببخشید. کاربر می‌تواند با نوشتن بخشی از یک گزینه، آن را در بین گزینه‌های لیست جستجو کرده و به راحتی انتخاب کند. این ویژگی بسیار سودمند و کاربردی‌ست.

وب‌سایت

Bootstrap Combobox


Bootstrap Markdown

یک ابزار ویرایش متن ساده که به درستی کار می‌کند! این پلاگین به گونه‌ای طراحی شده است که به آسانی با پروژه‌ی شما تطبیق پیدا می‌کند. یک API کاربردی دارد که به شما این امکان را می‌دهد که کاملا بر آن مسلط باشید.

این پلاگین ظاهری ساده و جمع و جور دارد، در عین حال امکان نمایش تمام صفحه (Full-Screen) و همچنین مشاهده‌ی پیش‌نمایش متن نوشته شده را دارد.

وب‌سایت

Bootstrap Markdown


Bootstrap3-wysiwyg

این هم یک پلاگین جاوااسکریپت است که ساخت یک ویرایشگر متن WYSIWYG زیبا و ساده را تسهیل می‌کند. این پلاگین از wysihtml5 و بوت‌استرپ استفاده می‌کند.

وب‌سایت

Bootstrap3-wysiwyg


Clockpicker

با استفاده از این پلاگین فوق‌العاده زیبا و جذاب، می‌توانید به کاربران خود این امکان را بدهید که هنگام انتخاب زمان، تجربه‌ی کاربری متفاوتی داشته باشند.

وب‌سایت

Clockpicker


Bootstrap Maxlength

گاهی پیش می‌آید که شما برای فیلدهای فرم خود محدودیت طول رشته‌ی ورودی را تنظیم می‌کنید. اگر این رشته طولانی باشد، کاربر متوجه نمی‌شود که به مرز محدودیت رسیده است یا خیر. این پلاگین یک بازخورد تصویری از طول رشته‌ی نوشته شده و مقدار باقیمانده را به کاربر می‌دهد.

این مقدار در یک label بوت‌استرپ نمایش داده می‌شود و با وارد شدن متن توسط کاربر، به‌روز می‌شود.

وب‌سایت

Bootstrap Maxlength


Bootstrap Color Palette

یک جعبه‌ی رنگ ساده برای بوت‌استرپ که به کاربر اجازه می‌دهد رنگ دلخواه خود را انتخاب کند. این جعبه‌ی رنگ می‌تواند به صورت کلاسیک باشد و یا توسط خود شما تعریف شود.

وب‌سایت

Bootstrap Color Palette


Bootstrap Colorpicker

این یک پلاگین بسیار خوب و قابل شخصی‌سازی برای انتخاب رنگ است. واسط بسیار مناسبی دارد که به کاربر امکان انتخاب رنگ در طیف گسترده‌ای از رنگ‌ها را می‌دهد و حتی میزان وضوح (opacity) رنگ نیز قابل انتخاب است.

وب‌سایت

Bootstrap Colorpicker


Date Range Picker

یک کامپوننت جاوااسکریپت برای انتخاب بازه‌ی زمانی‌ست. به گونه‌ای طراحی شده است که به خوبی با قالب کاری بوت‌استرپ سازگار باشد.

وب‌سایت

Date Range Picker


jQuery File Upload

این یک ابزارک آپلود فایل برای جی‌کوئری است. قابلیت انتخاب و آپلود چند فایل به طور همزمان را دارد. از کشیدن و رها کردن (drag&drop) پشتیبانی می‌کند. می‌تواند یک نوار پردازش (progress bar) برای آپلودها نمایش دهد. قابلیت آپلود به صورت بازخوانی (resumable) را دارد. cross-domain را پشتیبانی می‌کند. با هر نوع تکنولوژی سمت سرور (همچون PHP, Python, Ruby on Rails, Java, Node.js, Go) که استاندارد فرم آپلود فایل HTML را پشتیبانی کند، سازگاری دارد.

وب‌سایت

jQuery File Upload


Dropify

نمای تازه‌ای به ورودی‌های فایل خود بدهید. این پلاگین کاربردی، یک نمای زیبا به ورودی فایل شما می‌بخشد و عملکردهای بیشتری به آن اضافه می‌کند. شما می‌توانید ابعاد مورد نیاز فایل یا حداکثر حجم فایل را مشخص کنید و همچنین پیش‌نمایشی از فایل ارائه دهید.

وب‌سایت

Dropify


Bootstrap select

این پلاگین جی‌کوئری از dropdown.js در بوت‌استرپ استفاده کرده و علاوه بر اینکه شمایل بهتری به آن می‌بخشد، عملکردهای بیشتری نیز دارد.

وب‌سایت

Bootstrap select


OTHER


X-editable

این کتابخانه به شما این امکان را می‌دهد که المان‌های قایل ویرایش در صفحه‌ی خود داشته باشید. می‌تواند به صورت popup و یا در حالت inline کار کند.

وب‌سایت

X-editable


Bootstrap Notifications

اگر کامپوننت alert در بوت‌استرپ شما را راضی نمی‌کند، حتما نگاهی به این پلاگین بیندازید. کار کردن با آن خیلی آسان است. هشدارها می‌توانند محو شوند و یا به صورت خودکار بسته شوند و خیلی چیزهای دیگر شبیه به این.

وب‌سایت

Bootstrap Notifications


Bootstrap Growl

یک پلاگین ساده‌ی جی‌کوئری که alert های استاندارد بوت‌استرپ را به هشدارهایی شبیه به Growl تبدیل می‌کند.

وب‌سایت

Bootstrap Growl


Bootstrap Milestones

یک پلاگین جالب برای ایجاد فهرستی از نقاط عطف (milestone) است. با استفاده از آن می‌توان رویدادها و اعمال را به شکلی تمیز و واکنشگرا نمایش داد.

وب‌سایت

Bootstrap Milestones


Flippant.js

یک پلاگین کوچک که می‌تواند اجزا و المان‌های موجود در وب‌سایت شما را پشت و رو کند. آن المان می‌تواند یک پنجره‌ی modal باشد، یک المان متنی باشد و یا هر چیز دیگر.

وب‌سایت

Flippant.js


Ouibounce

Ouibounce یک کتابخانه‌ی کوچک است که شما را قادر می‌کند قبل از اینکه کاربران وب‌سایت شما را ترک کنند، یک پنجره‌ی modal به آنها نشان دهید.

وب‌سایت

Ouibounce


منبع: BEST BOOTSTRAP PLUGINS IN 2017
ترجمه: سیدمحمدحسین طباطبایی بالا

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *