جاوا اسکریپت

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

فردی یا تالیفی

افزونه‌ها را می‌توان به‌صورت جداگانه (با استفاده از Bootstrap's individual js/dist/*.js) یا به‌صورت هم‌زمان با استفاده bootstrap.jsیا کوچک‌سازی bootstrap.min.js(هر دو را شامل نشود) گنجاند.

اگر از باندلر (Webpack، Rollup…) استفاده می‌کنید، می‌توانید از /js/dist/*.jsفایل‌هایی استفاده کنید که UMD آماده هستند.

وابستگی ها

برخی از پلاگین ها و اجزای CSS به پلاگین های دیگر بستگی دارند. اگر افزونه‌ها را به صورت جداگانه اضافه می‌کنید، حتماً این وابستگی‌ها را در اسناد بررسی کنید. همچنین توجه داشته باشید که همه پلاگین ها به jQuery وابسته هستند (این بدان معناست که jQuery باید قبل از فایل های افزونه گنجانده شود). با ما مشورتpackage.json کنید تا ببینید کدام نسخه از jQuery پشتیبانی می شود.

بازشوها، پاپاورها و نکات ابزار ما نیز به Popper.js بستگی دارد .

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

تقریباً تمام پلاگین های بوت استرپ را می توان تنها از طریق HTML با ویژگی های داده (روش ترجیحی ما برای استفاده از عملکرد جاوا اسکریپت) فعال و پیکربندی کرد. مطمئن شوید که فقط از یک مجموعه از ویژگی‌های داده در یک عنصر استفاده می‌کنید (به عنوان مثال، نمی‌توانید یک tooltip و modal را از همان دکمه فعال کنید.)

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

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

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

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

مناسبت ها

بوت استرپ رویدادهای سفارشی را برای اقدامات منحصر به فرد بیشتر افزونه ها فراهم می کند. به طور کلی، این ها به صورت مصدر و ماضی هستند - که در آن مصدر (مثل show) در شروع یک رویداد تحریک می شود، و شکل ماضی آن (مصدر) shownپس از اتمام یک عمل فعال می شود.

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

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

API برنامه‌ای

ما همچنین معتقدیم که شما باید بتوانید از تمام پلاگین های Bootstrap صرفاً از طریق JavaScript 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

هر افزونه همچنین سازنده خام خود را در یک Constructorویژگی نشان می دهد: $.fn.popover.Constructor. اگر می‌خواهید نمونه پلاگین خاصی را دریافت کنید، آن را مستقیماً از یک عنصر بازیابی کنید: $('[rel="popover"]').data('popover').

توابع ناهمزمان و انتقال

همه متدهای API برنامه‌ریزی ناهمزمان هستند و پس از شروع انتقال، اما قبل از پایان آن ، به تماس‌گیرنده بازمی‌گردند .

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

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

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

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#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شیء افزونه تغییر دهید:

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

بدون درگیری

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

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

شماره های نسخه

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

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

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

وقتی جاوا اسکریپت غیرفعال است، پلاگین‌های بوت استرپ به‌خوبی کار نمی‌کنند. اگر در این مورد به تجربه کاربری اهمیت می دهید، <noscript>برای توضیح وضعیت (و نحوه فعال کردن مجدد جاوا اسکریپت) به کاربران خود و/یا اضافه کردن بک گراندهای سفارشی خود استفاده کنید.

Util

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

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

ضد عفونی کننده

Tooltips و Popovers از ضدعفونی کننده داخلی ما برای پاکسازی گزینه هایی که HTML را می پذیرند استفاده می کنند.

مقدار پیش فرض whiteListبه صورت زیر است:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

اگر می خواهید مقادیر جدیدی به این پیش فرض اضافه whiteListکنید، می توانید موارد زیر را انجام دهید:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

اگر می‌خواهید از ضدعفونی‌کننده ما دور بزنید زیرا ترجیح می‌دهید از یک کتابخانه اختصاصی استفاده کنید، برای مثال DOMPurify ، باید موارد زیر را انجام دهید:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})