جاوا اسڪرپٽ

انفرادي يا مرتب ڪيل

پلگ ان انفرادي طور تي شامل ڪري سگھجن ٿيون (بوٽ اسٽريپ جي انفرادي استعمال ڪندي js/dist/*.js)، يا سڀ هڪ ڀيرو استعمال ڪندي bootstrap.jsيا گھٽ ۾ گھٽ bootstrap.min.js(ٻنهي شامل نه ڪريو).

جيڪڏهن توهان هڪ بنڊل استعمال ڪندا آهيو (ويب پيڪ، رول اپ…)، توهان /js/dist/*.jsفائلون استعمال ڪري سگهو ٿا جيڪي UMD تيار آهن.

بوٽ اسٽريپ کي ماڊل طور استعمال ڪندي

اسان Bootstrap جو هڪ نسخو مهيا ڪريون ٿا جيئن ٺهيل آهي ESM( bootstrap.esm.jsand bootstrap.esm.min.js) جيڪو توهان کي اجازت ڏئي ٿو بوٽ اسٽريپ کي توهان جي برائوزر ۾ ماڊل طور استعمال ڪري، جيڪڏهن توهان جا ٽارگيٽ ٿيل برائوزر ان جي حمايت ڪن ٿا .

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

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

انحصار

ڪجھ پلگ ان ۽ سي ايس ايس جزا ٻين پلگ ان تي ڀاڙين ٿا. جيڪڏهن توهان انفرادي طور تي پلگ ان شامل ڪريو ٿا، پڪ ڪريو ته انهن انحصارن لاءِ دستاويز ۾ چيڪ ڪريو.

اسان جا ڊراپ ڊائون، پاپ اوور ۽ ٽول ٽائپس پڻ پوپر تي ڀاڙين ٿا .

اڃا تائين jQuery استعمال ڪرڻ چاهيو ٿا؟ اهو ممڪن آهي!

Bootstrap 5 jQuery کان سواءِ استعمال ڪرڻ لاءِ ٺاھيو ويو آھي، پر اھو اڃا تائين ممڪن آھي ته اسان جا حصا jQuery سان استعمال ڪري سگھون. جيڪڏهن بوٽ اسٽريپ اعتراض jQuery۾window ڳولي ٿو ته اهو jQuery جي پلگ ان سسٽم ۾ اسان جا سڀئي حصا شامل ڪندو. هن جو مطلب آهي ته توهان $('[data-bs-toggle="tooltip"]').tooltip()اوزار ٽائپس کي فعال ڪرڻ جي قابل هوندا. ساڳيو ئي اسان جي ٻين اجزاء لاء آهي.

ڊيٽا خاصيتون

لڳ ڀڳ سڀئي بوٽ اسٽريپ پلگ ان کي فعال ۽ ترتيب ڏئي سگھجي ٿو HTML ذريعي اڪيلو ڊيٽا جي خاصيتن سان (جاوا اسڪرپٽ ڪارڪردگي کي استعمال ڪرڻ جو اسان جو پسنديده طريقو). پڪ ڪريو ته صرف هڪ واحد عنصر تي ڊيٽا جي خاصيتن جو هڪ سيٽ استعمال ڪريو (مثال طور، توهان هڪ ئي بٽڻ مان ٽول ٽائپ ۽ موڊل ٽرگر نٿا ڪري سگهو.)

واقعا

بوٽ اسٽراپ اڪثر پلگ ان جي منفرد ڪارناما لاءِ ڪسٽم واقعا مهيا ڪري ٿو. عام طور تي، اهي هڪ لاتعداد ۽ ماضي حصو وٺندڙ فارم ۾ ايندا آهن - جتي infinitive (ex. 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).

تعمير ڪندڙن ۾ سي ايس ايس چونڊيندڙ

توهان پلگ ان کي شروع ڪرڻ لاءِ DOM عنصر جي بدران پهرين دليل طور CSS چونڊيندڙ پڻ استعمال ڪري سگهو ٿا. في الحال پلگ ان لاءِ عنصر طريقي سان مليو آهي 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 استعمال ڪريو)

ڪڏهن ڪڏهن ٻين UI فريم ورڪ سان بوٽ اسٽريپ پلگ ان استعمال ڪرڻ ضروري آهي. انهن حالتن ۾، نالي جي جاء تي ٽڪراء ڪڏهن ڪڏهن ٿي سگهي ٿي. جيڪڏهن ائين ٿئي ٿو، ته توهان .noConflictپلگ ان تي ڪال ڪري سگهو ٿا جنهن جي قيمت توهان واپس ڪرڻ چاهيو ٿا.

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

نسخي نمبر

VERSIONبوٽ اسٽريپ جي پلگ ان مان هر هڪ جو نسخو پلگ ان جي تعمير ڪندڙ جي ملڪيت ذريعي رسائي سگهجي ٿو . مثال طور، ٽول ٽائپ پلگ ان لاءِ:

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

جڏهن جاوا اسڪرپٽ بند ٿيل هجي ته ڪو خاص ناڪام نه ٿيندو

بوٽ اسٽريپ جا پلگ ان واپس نه ٿا اچن خاص طور تي جڏهن جاوا اسڪرپٽ غير فعال آهي. جيڪڏهن توهان هن معاملي ۾ استعمال ڪندڙ جي تجربي جو خيال رکو ٿا، استعمال ڪريو <noscript>صورتحال کي بيان ڪرڻ لاءِ (۽ ڪيئن جاوا اسڪرپٽ کي ٻيهر فعال ڪجي) توهان جي استعمال ڪندڙن کي، ۽/يا پنهنجا پنهنجا ڪسٽم فال بيڪ شامل ڪريو.

صفائي ڪندڙ

ٽول ٽائپس ۽ پاپورز اسان جي بلٽ ان سينٽيزر کي استعمال ڪن ٿا انهن اختيارن کي صاف ڪرڻ لاءِ جيڪي 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)
  }
})