جافا سكريبت

فردي أو مجمعة

يمكن تضمين المكونات الإضافية بشكل فردي (باستخدام 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)

في بعض الأحيان يكون من الضروري استخدام ملحقات Bootstrap مع أطر عمل أخرى لواجهة المستخدم. في هذه الحالات ، يمكن أن تحدث تضاربات مساحة الاسم أحيانًا. إذا حدث هذا ، فيمكنك الاتصال .noConflictعلى المكون الإضافي الذي ترغب في إرجاع قيمته.

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

أرقام الإصدارات

يمكن الوصول إلى إصدار كل من ملحقات Bootstrap عبر VERSIONخاصية مُنشئ المكون الإضافي. على سبيل المثال ، بالنسبة لمكوِّن تلميح الأدوات الإضافي:

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

لا توجد إجراءات احتياطية خاصة عند تعطيل JavaScript

لا تتراجع مكونات Bootstrap الإضافية برشاقة خاصة عند تعطيل JavaScript. إذا كنت مهتمًا بتجربة المستخدم في هذه الحالة ، <noscript>فاستخدمها لشرح الموقف (وكيفية إعادة تمكين JavaScript) للمستخدمين ، و / أو إضافة احتياطياتك المخصصة.

مطهر

تستخدم Tooltips و Popovers معقمنا المدمج لتعقيم الخيارات التي تقبل HTML.

allowListالقيمة الافتراضية هي التالية:

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: []
}

إذا كنت ترغب في إضافة قيم جديدة إلى هذا الإعداد الافتراضي allowList، يمكنك القيام بما يلي:

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)

إذا كنت تريد تجاوز المطهر الخاص بنا لأنك تفضل استخدام مكتبة مخصصة ، على سبيل المثال DOMPurify ، فيجب عليك القيام بما يلي:

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