جاوا اسڪرپٽ

اسان جي اختياري جاوا اسڪرپٽ پلگ ان سان بوٽ اسٽريپ کي زنده ڪريو. هر پلگ ان جي باري ۾ سکو، اسان جي ڊيٽا ۽ پروگراماتي API اختيارن، ۽ وڌيڪ.

هن صفحي تي

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

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

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

JavaScript فريم ورڪ سان استعمال

جڏهن ته Bootstrap CSS ڪنهن به فريم ورڪ سان استعمال ٿي سگهي ٿو، Bootstrap JavaScript مڪمل طور تي جاوا اسڪرپٽ فريم ورڪ جهڙوڪ React، Vue، ۽ Angular سان مطابقت نه رکي ٿو جيڪو DOM جي مڪمل ڄاڻ کي فرض ڪري ٿو. ٻئي بوٽ اسٽريپ ۽ فريم ورڪ ساڳئي DOM عنصر کي ميوٽيٽ ڪرڻ جي ڪوشش ڪري سگھن ٿا، نتيجي ۾ ڪيچ جهڙوڪ ڊراپ ڊائونز جيڪي "اوپن" پوزيشن ۾ ڦاسي ويا آهن.

هن قسم جي فريم ورڪ کي استعمال ڪرڻ وارن لاءِ هڪ بهتر متبادل اهو آهي ته بوٽ اسٽريپ جاوا اسڪرپٽ جي بدران فريم ورڪ-مخصوص پيڪيج استعمال ڪجي. هتي ڪجھ سڀ کان وڌيڪ مشهور اختيارن جا آهن:

React: React Bootstrap
Vue: BootstrapVue (في الحال صرف Vue 2 ۽ Bootstrap 4 کي سپورٽ ڪري ٿو)
ڪنولر: ng-bootstrap

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

پاڻ ڪوشش ڪريو! ڊائون لوڊ ڪريو سورس ڪوڊ ۽ ڪم ڪندڙ ڊيمو بوٽ اسٽريپ کي ES ماڊل طور استعمال ڪرڻ لاءِ twbs/examples repository مان . توھان پڻ کولي سگھو ٿا مثال StackBlitz ۾ .

اسان Bootstrap جو هڪ نسخو مهيا ڪريون ٿا جيئن ٺهيل آهي ESM( bootstrap.esm.jsand 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>

JS بنڊلرز جي مقابلي ۾، برائوزر ۾ ESM استعمال ڪرڻ جي ضرورت آهي ته توهان ماڊل جي نالي جي بدران مڪمل رستو ۽ فائل جو نالو استعمال ڪريو. برائوزر ۾ JS ماڊلز بابت وڌيڪ پڙهو. ان ڪري اسان مٿي 'bootstrap.esm.min.js'جي بدران استعمال ڪندا آهيون. 'bootstrap'بهرحال، اهو اسان جي پوپر انحصار کان وڌيڪ پيچيده آهي، جيڪو پوپر کي اسان جي جاوا اسڪرپٽ ۾ درآمد ڪري ٿو جهڙوڪ:

import * as Popper from "@popperjs/core"

جيڪڏھن توھان ھي ڪوشش ڪريو جيئن آھي، توھان ھيٺ ڏنل ڪنسول ۾ ھڪڙي نقص ڏسندا:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

ھن کي فڪس ڪرڻ لاءِ، توھان استعمال ڪري سگھوٿا ھڪڙو importmapحل ڪرڻ لاءِ صوابديدي ماڊل جا نالا مڪمل ڪرڻ لاءِ رستا. جيڪڏهن توهان جا ٽارگيٽ ٿيل برائوزر سپورٽ نٿا ڪن importmap، توهان کي استعمال ڪرڻو پوندو es-module-shims پروجيڪٽ. هتي اهو ڪيئن ڪم ڪري ٿو بوٽ اسٽراپ ۽ پوپر لاءِ:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

انحصار

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

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

ڊيٽا خاصيتون

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

جيئن ته اختيارن کي ڊيٽا انتساب يا جاوا اسڪرپٽ ذريعي منتقل ڪري سگھجي ٿو، توھان ھڪڙي اختيار جو نالو شامل ڪري سگھو ٿا data-bs-، جيئن data-bs-animation="{value}". ڊيٽا جي خاصيتن ذريعي اختيارن کي پاس ڪرڻ وقت اختياري جي صورت واري قسم کي تبديل ڪرڻ جي پڪ ڪريو ”ڪيم ڪيس“ مان ” ڪباب ڪيس “. مثال طور، data-bs-custom-class="beautifier"جي بدران استعمال ڪريو data-bs-customClass="beautifier".

Bootstrap 5.2.0 جي طور تي، سڀئي جزا هڪ تجرباتي محفوظ ڪيل ڊيٽا جي خاصيت کي سپورٽ ڪن data-bs-configٿا جيڪي JSON اسٽرنگ جي طور تي سادي جزو جي جوڙجڪ کي گھرائي سگھن ٿا. جڏهن هڪ عنصر آهي data-bs-config='{"delay":0, "title":123}'۽ data-bs-title="456"خاصيتون آهن، حتمي titleقيمت هوندي 456۽ الڳ الڳ ڊيٽا خاصيتون ڏنل قدرن کي ختم ڪري ڇڏيندو data-bs-config. ان کان علاوه، موجوده ڊيٽا جون خاصيتون JSON قدرن کي گھرائڻ جي قابل آھن جھڙوڪ data-bs-delay='{"show":0,"hide":150}'.

چونڊيندڙ

اسان DOM عناصر جي ڪارڪردگي جي سببن لاء سوال ڪرڻ لاء اصلي querySelector۽ طريقا استعمال ڪندا آهيون، تنهنڪري توهان کي استعمال ڪرڻ گهرجي صحيح چونڊ ڪندڙ . جيڪڏھن توھان خاص چونڊيندڙ استعمال ڪندا آھيو ، انھن کان بچڻ جي پڪ ڪريو.querySelectorAllcollapse:Example

واقعا

بوٽ اسٽراپ اڪثر پلگ ان جي منفرد ڪارناما لاءِ ڪسٽم واقعا مهيا ڪري ٿو. عام طور تي، اهي هڪ لاتعداد ۽ ماضي ۾ حصو وٺندڙ فارم ۾ ايندا آهن - جتي infinitive (ex. show) ڪنهن واقعي جي شروعات تي شروع ڪيو ويندو آهي، ۽ ان جو ماضي حصو وٺندڙ فارم (مثال طور shown) هڪ عمل جي مڪمل ٿيڻ تي شروع ڪيو ويندو آهي.

سڀ لاتعداد واقعا preventDefault()ڪارڪردگي مهيا ڪن ٿا. هي هڪ عمل جي عمل کي شروع ڪرڻ کان پهريان ان کي روڪڻ جي صلاحيت ڏئي ٿو. ايونٽ هينڊلر کان غلط موٽڻ به پاڻمرادو ڪال ڪندو preventDefault().

const myModal = document.querySelector('#myModal')

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

پروگراماتي API

سڀ تعمير ڪندڙ اختياري اختياري اعتراض قبول ڪن ٿا يا ڪجھ به نه (جيڪو پلگ ان کي ان جي ڊفالٽ رويي سان شروع ڪري ٿو):

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

جيڪڏھن توھان چاھيو ٿا ھڪڙو خاص پلگ ان مثال حاصل ڪريو، ھر پلگ ان ھڪڙي getInstanceطريقي کي ظاهر ڪري ٿو. مثال طور، هڪ عنصر مان هڪ مثال حاصل ڪرڻ لاء:

bootstrap.Popover.getInstance(myPopoverEl)

اهو طريقو واپس ايندو nullجيڪڏهن هڪ مثال گهربل عنصر تي شروع نه ڪيو ويو آهي.

متبادل طور تي، getOrCreateInstanceاستعمال ڪري سگھجي ٿو مثال حاصل ڪرڻ لاءِ DOM عنصر سان جڙيل، يا ھڪڙو نئون ٺاھيو ان صورت ۾ جڏھن اھو شروع نه ڪيو ويو ھو.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

صورت ۾ هڪ مثال جي شروعات نه ڪئي وئي هئي، اهو قبول ڪري سگهي ٿو ۽ اختياري ترتيب واري اعتراض کي ٻئي دليل طور استعمال ڪري ٿو.

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

getInstanceطريقن ۽ طريقن کان علاوه getOrCreateInstance، سڀ پلگ ان ٺاھيندڙ قبول ڪري سگھن ٿا ھڪ DOM عنصر يا ھڪ صحيح CSS چونڊيندڙ کي پھرين دليل طور. پلگ ان عناصر طريقي سان مليا آهن querySelectorڇو ته اسان جا پلگ ان صرف هڪ عنصر جي حمايت ڪن ٿا.

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

هم وقت سازي افعال ۽ منتقلي

سڀ پروگراماتي API طريقا غير مطابقت پذير آهن ۽ واپسي ڪالر ڏانهن هڪ ڀيرو منتقلي شروع ٿئي ٿي، پر ان جي ختم ٿيڻ کان اڳ . هڪ عمل تي عمل ڪرڻ لاءِ هڪ ڀيرو منتقلي مڪمل ٿي وڃي ٿي، توهان ٻڌي سگهو ٿا لاڳاپيل واقعو.

const myCollapseEl = document.querySelector('#myCollapse')

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

ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', 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 !!

`dispose`طريقو

جڏهن ته اهو لڳي سگهي ٿو صحيح disposeطريقي سان استعمال ڪرڻ کان پوء فوري طور تي hide()، اهو غلط نتيجن کي ڏسندو. هتي مسئلو استعمال جو هڪ مثال آهي:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

ڊفالٽ سيٽنگون

توھان پلگ ان لاءِ ڊفالٽ سيٽنگ تبديل ڪري سگھو ٿا پلگ ان جي Constructor.Defaultاعتراض کي تبديل ڪندي:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

طريقا ۽ خاصيتون

هر بوٽ اسٽريپ پلگ ان هيٺ ڏنل طريقن ۽ جامد ملڪيت کي ظاهر ڪري ٿو.

طريقو	وصف
`dispose`	هڪ عنصر جي ماڊل کي تباهه ڪري ٿو. (ڊوم عنصر تي ذخيرو ٿيل ڊيٽا کي هٽائي ٿو)
`getInstance`	جامد طريقو جيڪو توهان کي DOM عنصر سان لاڳاپيل ماڊل مثال حاصل ڪرڻ جي اجازت ڏئي ٿو.
`getOrCreateInstance`	جامد طريقو جيڪو توهان کي DOM عنصر سان لاڳاپيل ماڊل مثال حاصل ڪرڻ جي اجازت ڏئي ٿو، يا ان صورت ۾ هڪ نئون ٺاهيو جڏهن اهو شروع نه ڪيو ويو هو.

جامد ملڪيت	وصف
`NAME`	پلگ ان جو نالو واپس ڏئي ٿو. (مثال `bootstrap.Tooltip.NAME`:)
`VERSION`	`VERSION`بوٽ اسٽريپ جي پلگ ان مان هر هڪ جو نسخو پلگ ان جي تعمير ڪندڙ جي ملڪيت ذريعي رسائي سگهجي ٿو (مثال: `bootstrap.Tooltip.VERSION`)

صفائي ڪندڙ

ٽول ٽائپس ۽ پاپورز اسان جي بلٽ ان سينٽيزر کي استعمال ڪن ٿا انهن اختيارن کي صاف ڪرڻ لاءِ جيڪي HTML قبول ڪن ٿا.

ڊفالٽ allowListقدر ھيٺ ڏنل آھي:

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const 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توهان هيٺيان ڪري سگهو ٿا:

const 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
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

جيڪڏهن توهان چاهيو ٿا ته اسان جي صفائي واري مشين کي نظرانداز ڪيو ڇو ته توهان هڪ وقف لائبريري استعمال ڪرڻ کي ترجيح ڏيو ٿا، مثال طور DOMPurify ، توهان کي هيٺيان ڪرڻ گهرجي:

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

اختياري طور jQuery استعمال ڪندي

توهان کي بوٽ اسٽريپ 5 ۾ jQuery جي ضرورت ناهي ، پر اهو اڃا تائين ممڪن آهي ته اسان جا حصا jQuery سان استعمال ڪريو. جيڪڏهن بوٽ اسٽريپ اعتراض jQuery۾ ڳولي ٿو window، اهو jQuery جي پلگ ان سسٽم ۾ اسان جا سڀئي حصا شامل ڪندو. هي توهان کي هيٺين ڪرڻ جي اجازت ڏئي ٿو:

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

ساڳيو ئي اسان جي ٻين اجزاء لاء آهي.

ڪوبه تڪرار ناهي

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

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

بوٽ اسٽراپ رسمي طور تي ٽئين پارٽي جاوا اسڪرپٽ لائبريرين کي سپورٽ نٿو ڪري جهڙوڪ پروٽوٽائپ يا jQuery UI. واقعن جي باوجود .noConflict۽ نالن جي جاءِ تي، ٿي سگهي ٿي مطابقت جا مسئلا جيڪي توهان کي پاڻ تي حل ڪرڻ گهرجن.

jQuery واقعا

بوٽ اسٽريپ jQuery کي ڳوليندو جيڪڏهن اعتراض jQuery۾ موجود آهي ۽ اتي ڪا به صفت مقرر نه آهي . جيڪڏهن jQuery مليو آهي، بوٽ اسٽريپ واقعن کي خارج ڪندو jQuery جي ايونٽ سسٽم جي مهرباني. تنهن ڪري جيڪڏهن توهان بوٽ اسٽريپ جي واقعن کي ٻڌڻ چاهيو ٿا، توهان کي jQuery طريقا استعمال ڪرڻو پوندو ( , ) بدران .windowdata-bs-no-jquery<body>.on.oneaddEventListener

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

بند ٿيل JavaScript

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