بررسی اجمالی پلاگین ها در بوت استرپ
بررسی اجمالی پلاگین ها در بوت استرپ
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به بررسی اجمالی پلاگین ها در بوت استرپ خواهیم پرداخت.
مولفه هایی که در فصل های قبلی تحت عنوان Layout Components مورد بحث قرار گرفتند ، فقط آغاز کار هستند. Bootstrap همراه با 12 پلاگین jQuery است که ویژگی ها را گسترش می دهد و می تواند تعامل بیشتری را به سایت شما اضافه کند. برای شروع کار با افزونه های JavaScript Bootstrap ، نیازی نیست که یک توسعه دهنده پیشرفته JavaScript باشید. با استفاده از Bootstrap Data API ، می توان اکثر افزونه ها را بدون نوشتن یک خط کد فعال کرد.
پلاگین های بوت استرپ را می توان به دو شکل در سایت خود قرار دهید –
- به صورت جداگانه – با استفاده از پرونده های شخصی * .js بوت استرپ. برخی از افزونه ها و م componentsلفه های CSS به پلاگین های دیگر بستگی دارند. اگر افزونه ها را به صورت جداگانه وارد کردید ، مطمئن شوید که این وابستگی ها را در اسناد بررسی کنید.
- کامپایل شده (همه به یک باره) – با استفاده از bootstrap.js یا minst bootstrap.min.js. سعی نکنید هر دو را وارد کنید ، زیرا هر دو bootstrap.js و bootstrap.min.js حاوی تمام افزونه ها در یک فایل واحد هستند.
همه افزونه ها به jQuery بستگی دارند. بنابراین jQuery باید قبل از پرونده های پلاگین موجود باشد. bower.json را بررسی کنید تا ببینید کدام نسخه های jQuery پشتیبانی می شوند.
ویژگی های داده
همه پلاگین های بوت استرپ با استفاده از Data API موجود قابل دسترسی هستند. بنابراین ، برای فراخوانی هر یک از ویژگی های پلاگین ، نیازی به درج یک خط جاوا اسکریپت ندارید.
در بعضی شرایط ممکن است مطلوب باشد که این قابلیت Data API خاموش شود. اگر لازم است Data API را خاموش کنید ، می توانید ویژگی ها را با اضافه کردن خط زیر JavaScript لغو کنید –
1 |
$(document).off('.data-api') |
برای خاموش کردن یک پلاگین خاص / تک ، فقط نام پلاگین را به عنوان فضای نام همراه با فضای نام data-api مانند این قرار دهید –
1 |
$(document).off('.alert.data-api') |
برنامه نویسی API
توسعه دهندگان بوت استرپ معتقدند که شما باید بتوانید از همه افزونه ها صرفاً از طریق JavaScript API استفاده کنید. همه رابط های برنامه کاربردی عمومی روش های منفرد و قابل زنجیری هستند و مجموعه ای را که مثلاً طبق آن عمل کرده اند برمی گردانند –
1 |
$(".btn.danger").button("toggle").addClass("fat") |
همه روشها یک شی options اختیاری ، رشته ای را که یک روش خاص را هدف قرار می دهد یا هیچ چیز را قبول نمی کنند (که یک پلاگین را با رفتار پیش فرض شروع می کند) مانند تصویر زیر –
1 2 3 4 5 6 7 8 |
// initialized with defaults $("#myModal").modal() // initialized with no keyboard $("#myModal").modal({ keyboard: false }) // initializes and invokes show immediately $("#myModal").modal('show') |
همچنین هر افزونه سازنده خام خود را در یک ویژگی Constructor قرار می دهد: .fn.popover.Constructor.$ اگر می خواهید یک نمونه پلاگین خاص دریافت کنید، آن را مستقیماً از یک عنصر بازیابی کنید –
1 |
$('[rel = popover]').data('popover'). |
از افزونه های بوت استرپ گاهی اوقات می توان با سایر چارچوب های رابط کاربر استفاده کرد. در این شرایط ، برخوردهای فضای نامی می تواند گاهاً اتفاق بیفتد. برای غلبه بر این تماس .noConflict روی افزونه ای که می خواهید مقدار آن را برگردانید.
1 2 3 4 5 |
// return $.fn.button to previously assigned value var bootstrapButton = $.fn.button.noConflict() // give $().bootstrapBtn the Bootstrap functionality $.fn.bootstrapBtn = bootstrapButton |
رویداد
بوت استرپ رویدادهای سفارشی را برای اکثر اقدامات منحصر به فرد پلاگین فراهم می کند. به طور کلی ، این وقایع به دو شکل وجود دارد –
Infinitive form – این در ابتدای یک رویداد تحریک می شود. به عنوان مثال. نشان دادن رویدادهای غیر منتظره قابلیت جلوگیری از پیش فرض را فراهم می کند. این امکان متوقف کردن اجرای عملی قبل از شروع آن را فراهم می کند.
1 2 3 4 |
$('#myModal').on('show.bs.modal', function (e) { // stops modal from being shown if (!data) return e.preventDefault() }) |
لیست جلسات قبل آموزش بوت استرپ
- آموزش بوت استرپ
- بررسی اجمالی بوت استرپ
- آموزش راه اندازی بوت استرپ
- آموزش سیستم شبکه در بوت استرپ
- بررسی اجمالی CSS در بوت استرپ
- آموزش تایپوگرافی در بوت استرپ
- آموزش کد در بوت استرپ
- آموزش جدول در بوت استرپ
- آموزش فرم ها در بوت استرپ
- آموزش دکمه ها در بوت استرپ
- آموزش تصاویر در بوت استرپ
- آموزش کلاس های کمکی در بوت استرپ
- آموزش ابزارهای پاسخگو در بوت استرپ
- آموزش Glyphicons در بوت استرپ
- آموزش منوهای کشویی در بوت استرپ
- آموزش گروه های دکمه ای در بوت استرپ
- آموزش گروه های ورودی در بوت استرپ
- آموزش عناصر ناوبری در بوت استرپ
- آموزش Navbar در بوت استرپ
- آموزش Breadcrumbs در بوت استرپ
- آموزش صفحه بندی در بوت استرپ
- آموزش لیبل ها در بوت استرپ
- آموزش بج ها در بوت استرپ
- آموزش Jumbotron در بوت استرپ
- آموزش تصاویر کوچک در بوت استرپ
- آموزش هشدارها در بوت استرپ
- آموزش نوارهای پیشرفت در بوت استرپ
- آموزش شی Media در بوت استرپ
- آموزش گروه لیست در بوت استرپ
- آموزش پانل ها در بوت استرپ
- آموزش well در بوت استرپ
دیدگاه شما