പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്സ് നാവിഗേഷനിലേക്ക് പോകുക
Check
in English

ജാവാസ്ക്രിപ്റ്റ്

ഞങ്ങളുടെ ഓപ്‌ഷണൽ JavaScript പ്ലഗിനുകൾ ഉപയോഗിച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പ് ജീവസുറ്റതാക്കുക. ഓരോ പ്ലഗിൻ, ഞങ്ങളുടെ ഡാറ്റ, പ്രോഗ്രാമാറ്റിക് API ഓപ്‌ഷനുകൾ എന്നിവയെക്കുറിച്ചും മറ്റും അറിയുക.

ഈ പേജിൽ

വ്യക്തിഗതമോ സമാഹരിച്ചതോ

പ്ലഗിനുകൾ വ്യക്തിഗതമായി ഉൾപ്പെടുത്താം (ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ വ്യക്തിഗതം ഉപയോഗിച്ച് js/dist/*.js), അല്ലെങ്കിൽ എല്ലാം ഒരേസമയം ഉപയോഗിക്കുകയോ bootstrap.jsചെറുതാക്കിയത് bootstrap.min.js(രണ്ടും ഉൾപ്പെടുത്തരുത്).

നിങ്ങൾ ഒരു ബണ്ടർ ഉപയോഗിക്കുകയാണെങ്കിൽ (വെബ്പാക്ക്, പാർസൽ, വീറ്റ്...), നിങ്ങൾക്ക് /js/dist/*.jsUMD തയ്യാറായ ഫയലുകൾ ഉപയോഗിക്കാം.

JavaScript ചട്ടക്കൂടുകൾ ഉപയോഗിച്ചുള്ള ഉപയോഗം

ബൂട്ട്‌സ്‌ട്രാപ്പ് CSS ഏത് ചട്ടക്കൂടിലും ഉപയോഗിക്കാമെങ്കിലും, ബൂട്ട്‌സ്‌ട്രാപ്പ് JavaScript , DOM-നെ കുറിച്ചുള്ള പൂർണ്ണമായ അറിവ് അനുമാനിക്കുന്ന React, Vue, Angular പോലുള്ള JavaScript ഫ്രെയിംവർക്കുകളുമായി പൂർണ്ണമായും പൊരുത്തപ്പെടുന്നില്ല . ബൂട്ട്‌സ്‌ട്രാപ്പും ചട്ടക്കൂടും ഒരേ DOM ഘടകത്തെ പരിവർത്തനം ചെയ്യാൻ ശ്രമിച്ചേക്കാം, അതിന്റെ ഫലമായി "ഓപ്പൺ" സ്ഥാനത്ത് കുടുങ്ങിയിരിക്കുന്ന ഡ്രോപ്പ്‌ഡൌണുകൾ പോലുള്ള ബഗുകൾ ഉണ്ടാകുന്നു.

ഇത്തരത്തിലുള്ള ചട്ടക്കൂടുകൾ ഉപയോഗിക്കുന്നവർക്കുള്ള ഒരു മികച്ച ബദൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് ജാവാസ്‌ക്രിപ്റ്റിന് പകരം ഒരു ഫ്രെയിംവർക്ക്-നിർദ്ദിഷ്ട പാക്കേജ് ഉപയോഗിക്കുക എന്നതാണ്. ഏറ്റവും ജനപ്രിയമായ ചില ഓപ്ഷനുകൾ ഇതാ:

ഒരു മൊഡ്യൂളായി ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിക്കുന്നു

ഇത് സ്വയം പരീക്ഷിക്കുക! ബൂട്ട്‌സ്‌ട്രാപ്പ് ഒരു ES മൊഡ്യൂളായി ഉപയോഗിക്കുന്നതിന് സോഴ്‌സ് കോഡും വർക്കിംഗ് ഡെമോയും twbs/examples repository- ൽ നിന്ന് ഡൗൺലോഡ് ചെയ്യുക . നിങ്ങൾക്ക് 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 ഘടകങ്ങളും മറ്റ് പ്ലഗിന്നുകളെ ആശ്രയിച്ചിരിക്കുന്നു. നിങ്ങൾ പ്ലഗിനുകൾ വ്യക്തിഗതമായി ഉൾപ്പെടുത്തുകയാണെങ്കിൽ, ഡോക്‌സിൽ ഈ ഡിപൻഡൻസികൾ പരിശോധിക്കുന്നത് ഉറപ്പാക്കുക.

ഞങ്ങളുടെ ഡ്രോപ്പ്ഡൗണുകൾ, പോപോവറുകൾ, ടൂൾടിപ്പുകൾ എന്നിവയും പോപ്പറിനെ ആശ്രയിച്ചിരിക്കുന്നു .

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ

മിക്കവാറും എല്ലാ ബൂട്ട്‌സ്‌ട്രാപ്പ് പ്ലഗിനുകളും എച്ച്ടിഎംഎൽ വഴി മാത്രം ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് പ്രവർത്തനക്ഷമമാക്കാനും കോൺഫിഗർ ചെയ്യാനും കഴിയും (ജാവാസ്ക്രിപ്റ്റ് ഫംഗ്‌ഷണാലിറ്റി ഉപയോഗിക്കുന്നതിനുള്ള ഞങ്ങളുടെ ഇഷ്ട മാർഗം). ഒരൊറ്റ എലമെന്റിൽ ഒരു സെറ്റ് ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ മാത്രമേ ഉപയോഗിക്കുന്നുള്ളൂവെന്ന് ഉറപ്പാക്കുക (ഉദാ, ഒരേ ബട്ടണിൽ നിന്ന് നിങ്ങൾക്ക് ടൂൾടിപ്പും മോഡലും ട്രിഗർ ചെയ്യാൻ കഴിയില്ല.)

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ ജാവാസ്ക്രിപ്റ്റ് വഴിയോ ഓപ്‌ഷനുകൾ കൈമാറാൻ കഴിയുന്നതിനാൽ, എന്നതിലെന്നപോലെ നിങ്ങൾക്ക് ഒരു ഓപ്‌ഷൻ പേര് data-bs-ചേർക്കാം data-bs-animation="{value}". ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി ഓപ്‌ഷനുകൾ കൈമാറുമ്പോൾ, ഓപ്‌ഷൻ പേരിന്റെ കേസ് തരം “ഒട്ടകം” എന്നതിൽ നിന്ന് “കബാബ്-കേസ്” ആയി മാറ്റുന്നത് ഉറപ്പാക്കുക . ഉദാഹരണത്തിന്, 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, 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')

അസിൻക്രണസ് ഫംഗ്ഷനുകളും പരിവർത്തനങ്ങളും

എല്ലാ പ്രോഗ്രമാറ്റിക് എപിഐ രീതികളും അസമന്വിതമാണ് , പരിവർത്തനം ആരംഭിച്ചുകഴിഞ്ഞാൽ, അത് അവസാനിക്കുന്നതിന് മുമ്പ് കോളറിലേക്ക് മടങ്ങുക . പരിവർത്തനം പൂർത്തിയായിക്കഴിഞ്ഞാൽ ഒരു പ്രവർത്തനം നിർവ്വഹിക്കുന്നതിന്, നിങ്ങൾക്ക് അനുബന്ധ ഇവന്റ് കേൾക്കാനാകും.

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)

സാനിറ്റൈസർ

ടൂൾടിപ്പുകളും പോപ്പോവറുകളും 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

ഞങ്ങളുടെ മറ്റ് ഘടകങ്ങൾക്കും ഇത് ബാധകമാണ്.

സംഘർഷമില്ല

ചിലപ്പോൾ മറ്റ് യുഐ ചട്ടക്കൂടുകൾക്കൊപ്പം ബൂട്ട്സ്ട്രാപ്പ് പ്ലഗിനുകൾ ഉപയോഗിക്കേണ്ടത് ആവശ്യമാണ്. ഈ സാഹചര്യത്തിൽ, നെയിംസ്പേസ് കൂട്ടിയിടികൾ ഇടയ്ക്കിടെ സംഭവിക്കാം. .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>നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് സാഹചര്യം (എങ്ങനെ JavaScript വീണ്ടും പ്രവർത്തനക്ഷമമാക്കാം) വിശദീകരിക്കാൻ ഉപയോഗിക്കുക, കൂടാതെ/അല്ലെങ്കിൽ നിങ്ങളുടെ സ്വന്തം ഇഷ്‌ടാനുസൃത ഫാൾബാക്കുകൾ ചേർക്കുക.