جاواسکریپټ

زموږ د اختیاري جاواسکریپټ پلگ انونو سره بوټسټریپ ژوند ته راوړو. د هر پلگ ان په اړه زده کړه، زموږ ډاټا او د پروګراماتي API اختیارونو، او نور ډیر څه.

په دې پاڼه کې

انفرادي یا تالیف شوی

پلگ انونه په انفرادي ډول شامل کیدی شي (د بوټسټریپ انفرادي په کارولو سره js/dist/*.js) ، یا ټول په یوځل کارول bootstrap.jsیا کوچني bootstrap.min.jsشوي (دواړه شامل نه کړئ).

که تاسو بنډل کاروئ (ویب پیک، پارسل، ویټ…)، تاسو کولی شئ هغه /js/dist/*.jsفایلونه وکاروئ کوم چې UMD چمتو دي.

د جاواسکریپټ چوکاټونو سره کارول

پداسې حال کې چې د بوټسټریپ سی ایس ایس د هر چوکاټ سره کارول کیدی شي ، د بوټسټریپ جاواسکریپټ د جاوا سکریپټ چوکاټونو سره په بشپړ ډول مطابقت نلري لکه عکس ، ویو ، او انګولر کوم چې د DOM بشپړ پوهه په غاړه لري. دواړه بوټسټریپ او چوکاټ ممکن د ورته DOM عنصر بدلولو هڅه وکړي ، په پایله کې د غورځیدو په څیر کیګونه چې په "خلاص" موقعیت کې بند پاتې دي.

د هغو کسانو لپاره چې دا ډول چوکاټونه کاروي غوره بدیل د بوټسټریپ جاوا سکریپټ پرځای د چوکاټ ځانګړي کڅوړه کارول دي. دلته ځینې خورا مشهور انتخابونه دي:

عکس العمل: د بوټسټریپ عکس العمل
Vue: BootstrapVue (اوس مهال یوازې Vue 2 او Bootstrap 4 ملاتړ کوي)
زاویه: ng-bootstrap

د ماډل په توګه د بوټسټریپ کارول

دا پخپله هڅه وکړئ! د Twbs/examples repository څخه د ES ماډل په توګه د بوټسټریپ کارولو لپاره د سرچینې کوډ او کاري ډیمو ډاونلوډ کړئ . تاسو کولی شئ مثال په StackBlitz کې هم خلاص کړئ .

موږ د بوټسټریپ یوه نسخه چمتو کوو چې د ESM( bootstrap.esm.jsاو 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>

د 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>

انحصارونه

ځینې پلگ انونه او د CSS برخې په نورو پلگ انونو پورې اړه لري. که تاسو په انفرادي ډول فلګونه شامل کړئ، ډاډ ترلاسه کړئ چې په اسنادو کې د دې انحصارونو لپاره وګورئ.

زموږ ډراپ ډاونونه ، پاپورونه ، او اوزار ټیپونه هم په پوپر پورې اړه لري .

د معلوماتو ځانګړتیاوې

نږدې ټول بوټسټریپ پلگ ان یوازې د HTML له لارې د ډیټا ځانګړتیاو سره فعال او تنظیم کیدی شي (زموږ د جاوا سکریپټ فعالیت کارولو غوره لاره). ډاډ ترلاسه کړئ چې یوازې په یو عنصر کې د ډیټا ځانګړتیاو یوه سیټ وکاروئ (د مثال په توګه ، تاسو نشئ کولی د ورته تڼۍ څخه د وسیلې ټایپ او ماډل رامینځته کړئ.)

لکه څنګه چې اختیارونه د ډیټا ځانګړتیاو یا جاوا سکریپټ له لارې لیږدول کیدی شي، تاسو کولی شئ د اختیار نوم په کې ضمیمه کړئ data-bs-، لکه څنګه چې په کې data-bs-animation="{value}". ډاډ ترلاسه کړئ چې د اختیار نوم د قضیې ډول د " camelCase " څخه " کباب-کیس " ته بدل کړئ کله چې اختیارونه د ډیټا ځانګړتیاو له لارې تیریږي. د مثال په توګه، د data-bs-custom-class="beautifier"ځای پرځای وکاروئ data-bs-customClass="beautifier".

د بوټسټریپ 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

پیښې

بوټسټریپ د ډیری پلگ انونو ځانګړي کړنو لپاره دودیز پیښې چمتو کوي. عموما، دا په غیر انتفاعي او پخوانۍ برخه اخیستونکي بڼه کې راځي - چیرې چې انفینیټیوټ (مثال 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)

په هغه صورت کې چې یو مثال پیل شوی نه وي، دا ممکن د دویم دلیل په توګه د اختیاري ترتیب کولو څیز ومني او وکاروي.

په جوړونکو کې د CSS انتخاب کونکي

getInstanceد میتودونو او میتودونو سربیره ، ټول پلگ ان جوړونکي کولی شي د لومړي دلیل په توګه د getOrCreateInstanceDOM عنصر یا د اعتبار وړ 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`	د عنصر ماډل ویجاړوي. (د DOM عنصر کې زیرمه شوي معلومات لرې کوي)
`getInstance`	جامد میتود چې تاسو ته اجازه درکوي د DOM عنصر سره تړلي ماډل مثال ترلاسه کړئ.
`getOrCreateInstance`	جامد میتود چې تاسو ته اجازه درکوي د DOM عنصر سره تړلي موډل مثال ترلاسه کړئ ، یا یو نوی رامینځته کړئ که چیرې دا پیل نه وي.

جامد ملکیت	تفصیل
`NAME`	د پلگ ان نوم بیرته راګرځوي. (مثال `bootstrap.Tooltip.NAME`:)
`VERSION`	د هر بوټسټریپ پلگ ان نسخه د پلگ ان جوړونکي ملکیت له لارې لاسرسی کیدی شي `VERSION`(مثال: `bootstrap.Tooltip.VERSION`)

سینیټایزر

Tooltips او Popovers زموږ جوړ شوي سینیټایزر د انتخابونو پاکولو لپاره کاروي کوم چې 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 کارول

تاسو په Bootstrap 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په windowاعتراض کې شتون ولري او په کې هیڅ data-bs-no-jqueryخاصیت شتون نلري <body>. که jQuery وموندل شي، بوټسټریپ به د jQuery د پیښې سیسټم څخه مننه پیښې خپروي. نو که تاسو غواړئ د بوټسټریپ پیښو ته غوږ ونیسئ ، نو تاسو به د jQuery میتودونه ( .on, .one) پرځای وکاروئ addEventListener.

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