JavaScript

ကျွန်ုပ်တို့၏ရွေးချယ်နိုင်သော JavaScript ပလပ်အင်များဖြင့် Bootstrap ကို အသက်ဝင်စေပါသည်။ ပလပ်အင်တစ်ခုစီ၊ ကျွန်ုပ်တို့၏ဒေတာနှင့် ပရိုဂရမ်မာ API ရွေးချယ်စရာများနှင့် အခြားအရာများအကြောင်း လေ့လာပါ။

ဤစာမျက်နှာတွင်

တစ်ဦးချင်း သို့မဟုတ် ပြုစုခြင်း။

ပလပ်အင်များကို တစ်ဦးချင်းစီ (Bootstrap ၏တစ်ဦးချင်းစီ ကို အသုံးပြု၍) သို့မဟုတ် js/dist/*.jsတစ်ကြိမ်တည်းအသုံးပြုခြင်း bootstrap.jsသို့မဟုတ် အသေးစိပ်ပြုလုပ်ခြင်း bootstrap.min.js(နှစ်ခုလုံးမပါဝင်ပါ)။

အကယ်၍ သင်သည် အစုအစည်းတစ်ခု (Webpack၊ Parcel၊ Vite…) ကိုအသုံးပြု /js/dist/*.jsပါက UMD အဆင်သင့်ဖြစ်သည့်ဖိုင်များကို သင်အသုံးပြုနိုင်ပါသည်။

JavaScript ဘောင်များဖြင့် အသုံးပြုခြင်း။

Bootstrap CSS ကို မည်သည့် framework နှင့်မဆို အသုံးပြုနိုင်သော်လည်း၊ Bootstrap JavaScript သည် DOM ၏ ဗဟုသုတ အပြည့်ရှိသည်ဟု ယူဆသည့် React၊ Vue နှင့် Angular ကဲ့သို့သော JavaScript framework များနှင့် အပြည့်အဝ သဟဇာတမဖြစ်ပါ ။ Bootstrap နှင့် framework နှစ်ခုလုံးသည် တူညီသော DOM ဒြပ်စင်ကို ပြောင်းလဲရန် ကြိုးပမ်းနိုင်ပြီး၊ "open" အနေအထားတွင် ပိတ်နေသော dropdowns များကဲ့သို့ bug များ ဖြစ်ပေါ်နိုင်သည်။

ဤ frameworks အမျိုးအစားကိုအသုံးပြုသူများအတွက် ပိုမိုကောင်းမွန်သောရွေးချယ်စရာတစ်ခုမှာ Bootstrap JavaScript အစား framework-specific package ကိုအသုံးပြုခြင်းဖြစ်သည်။ ဤသည်မှာ လူကြိုက်အများဆုံး ရွေးချယ်စရာများထဲမှ အချို့ဖြစ်သည်-

တုံ့ပြန်မှု- Bootstrap ကို တုံ့ပြန်ပါ။
Vue- BootstrapVue (လောလောဆယ် Vue 2 နှင့် Bootstrap 4 ကိုသာ ပံ့ပိုးသည်)
Angular: ng-bootstrap

Bootstrap ကို module တစ်ခုအနေဖြင့်အသုံးပြုခြင်း။

သင်ကိုယ်တိုင်ကြိုးစားပါ။ twbs/example repository မှ ES module တစ်ခုအနေဖြင့် Bootstrap ကိုအသုံးပြုရန်အတွက် အရင်းအမြစ်ကုဒ်နှင့် အလုပ်လုပ်သည့်သရုပ်ပြကို ဒေါင်းလုဒ်လုပ်ပါ ။ ဥပမာ StackBlitz တွင်လည်း သင်ဖွင့်နိုင်သည် ။

သင်၏ ပစ်မှတ်ထားသောဘရောက်ဆာများက ၎င်းကိုပံ့ပိုးပေးမည် ဆိုပါက ဘရောက်ဆာတွင် Bootstrap ကို module တစ်ခုအနေဖြင့်အသုံးပြုရန်ခွင့်ပြုသည့် ESM( bootstrap.esm.jsနှင့် ) အဖြစ်တည်ဆောက်ထားသော Bootstrap ဗားရှင်းကို ကျွန်ုပ်တို့ ပေးပါသည် ။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 အစုအဝေးများနှင့် နှိုင်းယှဉ်ပါက၊ browser တွင် ESM ကိုအသုံးပြုခြင်းဖြင့် module အမည်အစား လမ်းကြောင်းနှင့် ဖိုင်အမည်အပြည့်အစုံကို အသုံးပြုရန် လိုအပ်သည်။ browser ရှိ JS modules များအကြောင်းပိုမိုဖတ်ပါ။ အဲဒါကြောင့် အထက်က 'bootstrap.esm.min.js'အစား သုံးပါတယ် 'bootstrap'။ သို့သော်၊ Popper သည် ကျွန်ုပ်တို့၏ JavaScript သို့ Popper ကို တင်သွင်းသည့် ကျွန်ုပ်တို့၏ Popper မှီခိုမှုကြောင့် ပိုမိုရှုပ်ထွေးပါသည်။

import * as Popper from "@popperjs/core"

ဤကဲ့သို့ စမ်းကြည့်ပါက၊ အောက်ပါကဲ့သို့ ကွန်ဆိုးလ်တွင် အမှားအယွင်းတစ်ခု တွေ့ရပါမည်။

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

importmap၎င်းကိုဖြေရှင်းရန်၊ လမ်းကြောင်းများကိုပြီးမြောက်ရန် မတရားသော module အမည်များကိုဖြေရှင်းရန် သင်အသုံးပြုနိုင်သည် ။ သင်၏ ပစ်မှတ်ထားသောဘရောက်ဆာများကို မပံ့ပိုး ပါက၊ သင်သည် es-module-shims ပရောဂျက် importmapကိုအသုံးပြုရန်လိုအပ်ပါသည် ။ ဤသည်မှာ Bootstrap နှင့် Popper အတွက် အလုပ်လုပ်ပုံဖြစ်သည် ။

<!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 အစိတ်အပိုင်းများသည် အခြားပလပ်အင်များပေါ်တွင် မူတည်သည်။ အကယ်၍ သင်သည် ပလပ်အင်များကို တစ်ဦးချင်းစီ ထည့်သွင်းပါက၊ စာရွက်စာတမ်းများတွင် ဤမှီခိုမှု ရှိမရှိ စစ်ဆေးပါ။

ကျွန်ုပ်တို့၏ dropdowns၊ popovers နှင့် tooltips များသည် Popper ပေါ်တွင်မူတည် ပါသည်။

ဒေတာဂုဏ်တော်

Bootstrap ပလပ်အင်အားလုံးနီးပါးကို ဒေတာ attribute များဖြင့် HTML တစ်ခုတည်းဖြင့် ဖွင့်နိုင်ပြီး (ကျွန်ုပ်တို့နှစ်သက်သော JavaScript လုပ်ဆောင်ချက်ကို အသုံးပြုသည့်နည်းလမ်း)။ ဒြပ်စင်တစ်ခုတည်းတွင် ဒေတာ attributes အစုံကို တစ်ခုတည်း ကိုသာ အသုံးပြုရန် သေချာ ပါစေ။ (ဥပမာ၊ တူညီသောခလုတ်မှ tooltip နှင့် modal ကို သင်စတင်၍မရပါ။)

ရွေးချယ်မှုများကို ဒေတာ attributes သို့မဟုတ် JavaScript မှတဆင့် ကျော်ဖြတ်နိုင်သောကြောင့်၊ သင်သည် ရွေးချယ်မှုအမည်တစ်ခုအား ထည့်သွင်း data-bs-နိုင်သည် data-bs-animation="{value}"။ ဒေတာ attribute များမှတစ်ဆင့် ရွေးချယ်မှုများကို ဖြတ်သန်းသည့်အခါ “ camelCase ” မှ “ kebab-case ” သို့ ရွေးချယ်မှုအမည်၏ case အမျိုးအစားကို ပြောင်းလဲရန် သေချာပါစေ ။ ဥပမာအားဖြင့်၊ data-bs-custom-class="beautifier"အစားကို သုံးပါ data-bs-customClass="beautifier"။

Bootstrap 5.2.0 အရ၊ အစိတ်အပိုင်းအားလုံးသည် JSON စာကြောင်းကဲ့သို့ ရိုးရှင်းသော အစိတ်အပိုင်းဖွဲ့စည်းမှုပုံစံကို ထားရှိပေးနိုင်သော စမ်းသပ် လက်ဝယ်ထားသော ဒေတာ attribute ကို ပံ့ပိုးပေးပါသည်။ data-bs-configဒြပ်စင်တစ်ခုတွင် ရည်ညွှန်းချက်ပါရှိသည့်အခါ ၊ နောက်ဆုံး တန်ဖိုးသည် ဖြစ်မည်ဖြစ်ပြီး သီးခြားဒေ data-bs-config='{"delay":0, "title":123}'တာ attribute များသည် ပေးထားသောတန်ဖိုးများကို အစားထိုးမည်ဖြစ်သည် ။ ထို့အပြင်၊ ရှိပြီးသားဒေတာ attribute များသည် JSON တန်ဖိုးများကဲ့သို့ နေရာယူနိုင်သည် ။data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

ရွေးချယ်မှုများ

ကျွန်ုပ်တို့သည် စွမ်းဆောင်ရည်အကြောင်းပြချက်များအတွက် DOM ဒြပ်စင်များကို မေးမြန်းရန် မူရင်း querySelectorနှင့် နည်းလမ်းများကို အသုံးပြုသည်၊ ထို့ကြောင့် သင်သည် မှန်ကန်သောရွေးချယ်မှု များကို အသုံးပြုရပါမည် ။ အကယ်၍ သင်သည် ကဲ့သို့သော အထူးရွေးချယ်မှုများကို အသုံးပြုပါက ၎င်းတို့ကို လွတ်မြောက်ရန် သေချာစေပါ။querySelectorAllcollapse:Example

အဲ့ဒါနဲ့

Bootstrap သည် ပလပ်အင်အများစု၏ ထူးခြားသောလုပ်ဆောင်ချက်များအတွက် စိတ်ကြိုက်ဖြစ်ရပ်များကို ပံ့ပိုးပေးပါသည်။ ယေဘူယျအားဖြင့်၊ ၎င်းတို့သည် အဆုံးမရှိနှင့် အတိတ်ပါဝင်မှုပုံစံဖြင့် လာပါသည် - အဆုံးမရှိ (ဥပမာ 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

သီးသန့် plugin instance တစ်ခုကို ရယူလိုပါက၊ plugin တစ်ခုစီသည် getInstancemethod တစ်ခုကို ဖော်ထုတ်ပါသည်။ ဥပမာအားဖြင့်၊ အစိတ်အပိုင်းတစ်ခုမှ သာဓကတစ်ခုကို တိုက်ရိုက်ရယူရန်-

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')

Asynchronous လုပ်ဆောင်ချက်များနှင့် အသွင်ကူးပြောင်းမှုများ

ပရိုဂရမ်မာ API နည်းလမ်းအားလုံးသည် အပြိုင်အဆိုင် ဖြစ်ပြီး အကူးအပြောင်းကိုစတင်သည်နှင့် ခေါ်ဆိုသူထံ ပြန်သွားရန်၊ သို့သော် မပြီးဆုံးမီ ။ အကူးအပြောင်းပြီးသည်နှင့် လုပ်ဆောင်ချက်တစ်ခုအား လုပ်ဆောင်ရန်အတွက် သက်ဆိုင်ရာဖြစ်ရပ်ကို သင်နားထောင်နိုင်ပါသည်။

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

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

ထို့အပြင်၊ transitioning component တစ်ခုပေါ်တွင် method call ကို လျစ်လျူရှု ပါမည်။

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

နည်းလမ်းများနှင့် ဂုဏ်သတ္တိများ

Bootstrap ပလပ်အင်တိုင်းသည် အောက်ပါနည်းလမ်းများနှင့် တည်ငြိမ်ဂုဏ်သတ္တိများကို ဖော်ပြသည်။

နည်းလမ်း	ဖော်ပြချက်
`dispose`	ဒြပ်စင်တစ်ခု၏ပုံစံကို ဖျက်ဆီးသည်။ (DOM ဒြပ်စင်ပေါ်ရှိ သိမ်းဆည်းထားသည့် ဒေတာကို ဖယ်ရှားသည်)
`getInstance`	DOM ဒြပ်စင်တစ်ခုနှင့်ဆက်စပ်နေသော modal instance ကိုရရှိရန်ခွင့်ပြုသည့် Static method
`getOrCreateInstance`	DOM ဒြပ်စင်နှင့် ဆက်စပ်နေသော modal instance ကို ရယူရန် ခွင့်ပြုသည့် Static method သည် ၎င်းကို စတင်ခြင်းမပြုပါက အသစ်တစ်ခုဖန်တီးပါ။

အထဲမှာလည်း ပစ္စည်းဥစ္စာ	ဖော်ပြချက်
`NAME`	ပလပ်အင်အမည်ကို ပြန်ပေးသည်။ (ဥပမာ- `bootstrap.Tooltip.NAME`)
`VERSION`	Bootstrap ၏ ပလပ်အင်တစ်ခုစီ၏ ဗားရှင်းကို `VERSION`plugin ၏ တည်ဆောက်သူ၏ ပိုင်ဆိုင်မှုမှတစ်ဆင့် ဝင်ရောက်ကြည့်ရှုနိုင်သည် (ဥပမာ- `bootstrap.Tooltip.VERSION`)

သန့်စင်ဆေး

Tooltips နှင့် Popovers သည် HTML ကိုလက်ခံသည့်ရွေးချယ်မှုများကို သန့်စင်ရန်အတွက် ကျွန်ုပ်တို့၏ built-in sanitizer ကိုအသုံးပြုပါသည်။

မူရင်း 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 ဖြင့် ကျွန်ုပ်တို့၏ အစိတ်အပိုင်းများကို အသုံးပြုရန် ဖြစ်နိုင်သေးသည်။ အကယ်၍ Bootstrap 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 မူဘောင်များနှင့်အတူ Bootstrap ပလပ်အင်များကို အသုံးပြုရန် လိုအပ်သည်။ ဤအခြေအနေများတွင်၊ namespace သည် ရံဖန်ရံခါ ဖြစ်ပေါ်နိုင်သည်။ ဒီလိုဖြစ်သွားရင်၊ သင့် .noConflictတန်ဖိုးကို ပြန်ပြောင်းလိုတဲ့ plugin ကို ခေါ်နိုင်ပါတယ်။

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

Bootstrap သည် Prototype သို့မဟုတ် jQuery UI ကဲ့သို့သော ပြင်ပမှ JavaScript စာကြည့်တိုက်များကို တရားဝင် ပံ့ပိုးမထားပါ။ ဖြစ်ရပ်များနှင့် နာမည် .noConflictသတ်မှတ်ထားသော်လည်း၊ သင်ကိုယ်တိုင် ပြင်ဆင်ရန် လိုအပ်သည့် လိုက်ဖက်ညီမှု ပြဿနာများရှိနိုင်ပါသည်။

jQuery ဖြစ်ရပ်များ

အရာဝတ္တု jQueryတွင် ရှိနေပါက Bootstrap သည် jQuery ကိုတွေ့ရှိ ပြီး attribute တွင်သတ်မှတ်ခြင်း မရှိပါ ။ jQuery ကိုတွေ့ရှိပါက၊ Bootstrap သည် jQuery ၏ဖြစ်ရပ်စနစ်ကြောင့် အဖြစ်အပျက်များကို ထုတ်လွှတ်မည်ဖြစ်သည်။ ထို့ကြောင့် Bootstrap ၏အဖြစ်အပျက်များကိုနားဆင်လိုပါက jQuery နည်းလမ်းများအစား ( , ) ကိုအသုံးပြုရမည်ဖြစ်ပါသည် ။windowdata-bs-no-jquery<body>.on.oneaddEventListener

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

JavaScript ကို ပိတ်ထားသည်။

JavaScript ကို ပိတ်ထားသည့်အခါ Bootstrap ၏ ပလပ်အင်များသည် အထူးတုံ့ပြန်မှု မရှိပါ။ ဤကိစ္စရပ်တွင် အသုံးပြုသူအတွေ့အကြုံကို <noscript>သင်စိတ်ဝင်စားပါက၊ သင့်အသုံးပြုသူများထံ အခြေအနေ (နှင့် JavaScript ပြန်လည်ဖွင့်နည်း) ကို ရှင်းပြရန်နှင့်/သို့မဟုတ် သင့်စိတ်ကြိုက် တုံ့ပြန်မှုများကို ထည့်သွင်းပါ။