آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

فرد یا کامپایل شده 

پلاگین ها می توانند به صورت جداگانه شامل شوند. همه در یک باره با استفاده از bootstrap.js یا بنشینند به جای bootstrap.min.js 

 

وابستگی ها 

برخی از افزونه ها و اجزای CSS به پلاگین های دیگر بستگی دارد. اگر پلاگین ها را به صورت جداگانه قرار دهید، این وابستگی ها را در اسناد چک کنید. همچنین توجه داشته باشید که تمام پلاگین ها به jQuery بستگی دارند. دیدن کنید از  Consult ourpackage.json برای دیدن کدام نسخه از jQuery پشتیبانی می شوند.

رها کردن، popovers و tooltips نیز بستگی دارند به  Popper.js.

 

ویژگی های داده

تقریبا تمام پلاگین های Bootstrap می تواند فعال و پیکربندی شده از طریق HTML به تنهایی با ویژگی های داده باشند. مطمئن شوید که فقط از یک مجموعه از ویژگی های داده در یک عنصر تنها استفاده کنید

با این حال، در بعضی موقعیتها ممکن است مطلوب باشد که این قابلیت را غیرفعال کنید. برای غیرفعال کردن ویژگی داده API، همه وقایع را در نام اسناد با data-api باز کنید، مانند:

 
 $(document).off('.data-api')

 

متناوبا، برای هدف قرار دادن یک پلاگین خاص، فقط نام پلاگین را به عنوان فضای نامی همراه با فضای نام data-api مانند زیر بیان کنید:

 

 $(document).off('.alert.data-api')

 

مناسبت ها

بوت استرپ رویدادهای سفارشی برای اکثر فعالیت های منحصر به فرد پلاگین ها را فراهم می کند. به طور کلی، این ها در یک شکل متناوب گذشته قرار می گیرند - جایی که انتشاری (مثلا نمایش) در آغاز یک رویداد رخ می دهد و شکل قبلی آن (که قبلا نشان داده شده است) روی تکمیل یک عمل اعمال می شود.

همه ی رویداد های بی انتها عملکرد ()preventDefault فراهم می کنند. این اقدام را فراهم می کند تا قبل از شروع اجرا این اقدام را متوقف کند. بازگرداندن غلط از یک رویداد پردازنده نیز به طور خودکار

()preventDefault را فراخوانی می کند.

 $('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() // stops modal from being shown })

 

برنامه نویسی API

ما همچنین معتقدیم که باید از تمام پلاگین های Bootstrap صرفا از طریق API جاوا اسکریپت استفاده کنید. تمام API های عمومی یک روش متمایز و زنجیری هستند و مجموعه ای را که به کار گرفته شده اند، باز می گرداند.

 

 $('.btn.danger').button('toggle').addClass('fat')

 

تمام روش ها باید یک شی گزینه اختیاری، رشته ای که هدف خاصی از روش ها یا هیچ چیز نیست را بپذیرد.

 $('#myModal').modal() // initialized with defaults $('#myModal').modal({ keyboard: false }) // initialized with no keyboard $('#myModal').modal('show') // initializes and invokes show immediately

هر پلاگین همچنین سازنده خام خود را بر روی یک سازنده ساختار قرار می دهد: fn.popover.Constructor.$. اگر می خواهید نمونه خاصی از پلاگین دریافت کنید آن را مستقیما از یک عنصر بازیابی کنید.

 

توابع و انتقال ناپیوسته 

 

همه روش های API برنامه ناهمزمان و پس از فراخوانی آغاز می شود، اما قبل از آن به پایان می رسد.

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

 

 $('#myCollapse').on('shown.bs.collapse', function (e) { // Action to execute once the collapsible area is expanded })

 

علاوه بر این یک روش فراخوانی در یک مولفه انتقال نیز نادیده گرفته می شود.

 

 $('#myCarousel').on('slid.bs.carousel', function (e) { $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished }) $('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller $('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

 

تنظیمات پیش فرض

شما می توانید تنظیمات پیش فرض برای یک افزونه را با تغییر شیء افزونه Constructor.Default تغییر دهید:

 

 $.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false

 

No conflict

گاهی اوقات لازم است از پلاگین های Bootstrap با دیگر قاب های UI استفاده کنید. در چنین شرایطی گاهی اوقات ممکن است تصادفات نامحدودی رخ دهد. اگر این اتفاق می افتد، شما ممکن است فراخوانی کنید noConflict. در افزونه ای که می خواهید مقدار آن را تغییر دهید.

 

 var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

 

اعداد نسخه

نسخه هر افزونه جی کوئری Bootstrap را می توان از طریق ویژگی VERSION سازنده پلاگین مشاهده کرد. برای مثال برای پلاگین tooltip:

 

 $.fn.tooltip.Constructor.VERSION // => "4.0.0"

 

وقتی جاوا اسکریپت غیر فعال است، هیچ فایل خاصی وجود ندارد

پلاگین های بوت استرپ هنگامی که جاوا اسکریپت غیرفعال می شود، به طور خاص ظاهر نمی شود. اگر درباره تجربه کاربر در این مورد توجه داشته باشید، برای توضیح وضعیت، از <noscript> استفاده کنید. 

 

سود

تمام فایل های جاوا اسکریپت بوت استرپ به util.js بستگی دارند و باید همراه با دیگر فایل های جاوااسکریپت قرار گیرند. اگر شما از bootstrap.js کامپایل شده (یا minified) استفاده می کنید، نیازی نیست این را وارد کنید  در حال حاضر وجود دارد.

util.js شامل توابع مفید و یک راهنما اساسی برای رویدادهای transitionEnd و همچنین شبیه ساز تغییر CSS است. این پلاگین ها برای پیکربندی CSS استفاده می شود و برای انتقال به حالت تعلیق در می آید.