جافا سكريبت

فردي أو مجمعة

يمكن تضمين المكونات الإضافية بشكل فردي (باستخدام Bootstrap الفردي js/dist/*.js) ، أو كلها مرة واحدة باستخدام bootstrap.jsأو مصغرة bootstrap.min.js(لا تقم بتضمين كليهما).

إذا كنت تستخدم حزمة (Webpack ، Rollup ...) ، يمكنك استخدام /js/dist/*.jsملفات جاهزة UMD.

استخدام Bootstrap كوحدة نمطية

نحن نقدم إصدارًا من Bootstrap تم إنشاؤه كـ ESM( bootstrap.esm.jsو bootstrap.esm.min.js) والذي يسمح لك باستخدام Bootstrap كوحدة نمطية في متصفحك ، إذا كانت المستعرضات المستهدفة تدعمه .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

التبعيات

تعتمد بعض المكونات الإضافية ومكونات CSS على المكونات الإضافية الأخرى. إذا قمت بتضمين المكونات الإضافية بشكل فردي ، فتأكد من التحقق من هذه التبعيات في المستندات.

تعتمد القوائم المنسدلة والقوائم المنبثقة وتلميحات الأدوات أيضًا على Popper .

هل ما زلت تريد استخدام jQuery؟ انه ممكن!

تم تصميم Bootstrap 5 ليتم استخدامه بدون jQuery ، ولكن لا يزال من الممكن استخدام مكوناتنا مع jQuery. إذا اكتشف Bootstrap jQueryفي windowالكائن ، فسيضيف جميع مكوناتنا في نظام المكون الإضافي لـ jQuery ؛ هذا يعني أنك ستكون قادرًا على القيام $('[data-bs-toggle="tooltip"]').tooltip()بتمكين تلميحات الأدوات. الشيء نفسه ينطبق على مكوناتنا الأخرى.

سمات البيانات

يمكن تمكين جميع ملحقات Bootstrap تقريبًا وتهيئتها من خلال HTML وحدها باستخدام سمات البيانات (طريقتنا المفضلة لاستخدام وظائف JavaScript). تأكد من استخدام مجموعة واحدة فقط من سمات البيانات على عنصر واحد (على سبيل المثال ، لا يمكنك تشغيل تلميح أداة ومشروط من نفس الزر.)

الأحداث

يوفر Bootstrap أحداثًا مخصصة لمعظم الإجراءات الفريدة للمكونات الإضافية. بشكل عام ، تأتي هذه في صيغة المصدر والماضي - حيث يتم تشغيل المصدر (على سبيل المثال show) في بداية الحدث ، ويتم تشغيل شكل الفاعل الماضي ( shownعلى سبيل المثال) عند الانتهاء من إجراء ما.

توفر جميع أحداث المصدر preventDefault()وظائف. يوفر هذا القدرة على إيقاف تنفيذ الإجراء قبل أن يبدأ. سيؤدي إرجاع خطأ من معالج الأحداث إلى استدعاء تلقائيًا أيضًا preventDefault().

var myModal = document.getElementById('myModal')

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

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

API برمجي

تقبل جميع المنشئات كائن خيارات اختيارية أو لا شيء (الذي يبدأ مكونًا إضافيًا بسلوكه الافتراضي):

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

إذا كنت ترغب في الحصول على مثيل مكون إضافي معين ، فإن كل مكون إضافي يعرض getInstanceطريقة. لاسترداده مباشرة من عنصر ما ، قم بما يلي bootstrap.Popover.getInstance(myPopoverEl):.

محددات CSS في المُنشئين

يمكنك أيضًا استخدام محدد CSS كأول وسيطة بدلاً من عنصر DOM لتهيئة المكون الإضافي. حاليًا ، تم العثور على عنصر المكون الإضافي من خلال querySelectorالطريقة لأن الإضافات لدينا تدعم عنصرًا واحدًا فقط.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

وظائف وانتقالات غير متزامنة

جميع طرق API البرمجية غير متزامنة وتعود إلى المتصل بمجرد بدء النقل ولكن قبل أن ينتهي .

من أجل تنفيذ إجراء بمجرد اكتمال الانتقال ، يمكنك الاستماع إلى الحدث المقابل.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

بالإضافة إلى ذلك ، سيتم تجاهل استدعاء طريقة على مكون انتقالي .

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('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
bootstrap.Modal.Default.keyboard = false

لا يوجد تعارض (فقط إذا كنت تستخدم jQuery)

Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.

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

Version numbers

The version of each of Bootstrap’s plugins can be accessed via the VERSION property of the plugin’s constructor. For example, for the tooltip plugin:

bootstrap.Tooltip.VERSION // => "5.1.3"

No special fallbacks when JavaScript is disabled

Bootstrap’s plugins don’t fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <noscript> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.

Sanitizer

Tooltips and Popovers use our built-in sanitizer to sanitize options which accept HTML.

The default allowList value is the following:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
  // 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: []
}

If you want to add new values to this default allowList you can do the following:

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

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

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-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-]+/
myDefaultAllowList['*'].push(myCustomRegex)

If you want to bypass our sanitizer because you prefer to use a dedicated library, for example DOMPurify, you should do the following:

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})