in English

जावास्क्रिप्ट के बा

हमनी के वैकल्पिक जावास्क्रिप्ट प्लगइन के साथ बूटस्ट्रैप के जीवन में ले आईं। हर प्लगइन, हमनी के डेटा आ प्रोग्रामेटिक एपीआई विकल्प, आ अउरी बहुत कुछ के बारे में जानीं.

एह पन्ना पर दिहल गइल बा

व्यक्तिगत भा संकलित कइल जाव

प्लगइन सभ के अलग-अलग शामिल कइल जा सके ला (बूटस्ट्रैप के ब्यक्तिगत के इस्तेमाल से js/dist/*.js), या एक साथ सभ के इस्तेमाल से bootstrap.jsया मिनीफाइड कइल जा सके ला bootstrap.min.js(दुनों के शामिल मत करीं)।

अगर रउआ बंडलर (वेबपैक, पार्सल, वाइट...) के इस्तेमाल करेनी त रउआ अइसन /js/dist/*.jsफाइल के इस्तेमाल कर सकेनी जवन यूएमडी तैयार होखे।

जावास्क्रिप्ट ढाँचा के साथ प्रयोग कइल जाला

जबकि बूटस्ट्रैप सीएसएस के इस्तेमाल कवनो भी फ्रेमवर्क के साथ कइल जा सके ला, बूटस्ट्रैप जावास्क्रिप्ट रिएक्ट, व्यू, आ एंगुलर नियर जावास्क्रिप्ट फ्रेमवर्क सभ के साथ पूरा तरीका से संगत नइखे जे DOM के पूरा जानकारी मान लेला। बूटस्ट्रैप आ फ्रेमवर्क दुनों एकही डोम तत्व के उत्परिवर्तन करे के कोसिस क सके लें, एकरे परिणाम के रूप में ड्रॉपडाउन नियर बग हो सके लें जे "खुला" स्थिति में फंस जालें।

एह प्रकार के फ्रेमवर्क के इस्तेमाल करे वाला लोग खातिर एगो बेहतर विकल्प ई बा कि बूटस्ट्रैप जावास्क्रिप्ट के बजाय फ्रेमवर्क-विशिष्ट पैकेज के इस्तेमाल कइल जाय। इहाँ कुछ सभसे लोकप्रिय विकल्प दिहल गइल बाड़ें:

रिएक्ट करीं: रिएक्ट करीं बूटस्ट्रैप
Vue: BootstrapVue (वर्तमान में खाली Vue 2 आ Bootstrap 4 के सपोर्ट करे ला)
कोणीय: एनजी-बूटस्ट्रैप के बा

बूटस्ट्रैप के मॉड्यूल के रूप में इस्तेमाल कइल जा रहल बा

खुदे आजमा के देखीं! twbs/examples रिपोजिटरी से बूटस्ट्रैप के ईएस मॉड्यूल के रूप में इस्तेमाल करे खातिर स्रोत कोड आ कामकाजी डेमो डाउनलोड करीं . रउआँ उदाहरण के 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>

जेएस बंडलर सभ के तुलना में, ब्राउजर में ईएसएम के इस्तेमाल करे खातिर मॉड्यूल नाँव के बजाय पूरा पथ आ फाइलनाम के इस्तेमाल करे के पड़े ला। ब्राउजर में जेएस मॉड्यूल के बारे में अउरी पढ़ीं। एही से हमनी के ऊपर '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पथ सभ के पूरा करे खातिर मनमाना मॉड्यूल नाँव सभ के हल करे खातिर an के इस्तेमाल कर सकत बानी। अगर राउर लक्षित ब्राउजर सपोर्ट ना करे लें 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>

निर्भरता के बारे में बतावल गइल बा

कुछ प्लगइन आ सीएसएस घटक अन्य प्लगइन सभ पर निर्भर करे लें। अगर रउआँ प्लगइन सभ के अलग-अलग शामिल करीं, डॉक्स में एह निर्भरता सभ के जांच जरूर करीं।

हमनी के ड्रॉपडाउन, पॉपओवर, आ टूलटिप भी पॉपर पर निर्भर करेला ।

डेटा के विशेषता के बारे में बतावल गइल बा

लगभग सभ बूटस्ट्रैप प्लगइन सभ के डेटा एट्रिब्यूट सभ के साथ अकेले एचटीएमएल के माध्यम से सक्षम आ कॉन्फ़िगर कइल जा सके ला (जावास्क्रिप्ट कामकाज के इस्तेमाल करे के हमनी के पसंदीदा तरीका)। एकही तत्व पर खाली डेटा एट्रिब्यूट सभ के एक सेट के इस्तेमाल जरूर करीं (जइसे कि, आप एकही बटन से टूलटिप आ मोडल के ट्रिगर नइखीं कर सकत।)

चूंकि विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला, रउआँ , में विकल्प नाँव जोड़ सकत बानी 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

घटनाक्रम के बारे में बतावल गइल बा

बूटस्ट्रैप अधिकतर प्लगइन सभ के बिसेस क्रिया सभ खातिर कस्टम इवेंट उपलब्ध करावे ला। आमतौर पर ई सभ अव्यय आ भूतकाल के रूप में आवे लें - जहाँ कौनों घटना के सुरुआत में अव्यय (ex. ) के ट्रिगर कइल जाला, आ कौनों क्रिया के पूरा होखे पर showएकर भूतकाल के कर्मधारय रूप (ex. ) के ट्रिगर कइल जाला।shown

सभ अव्यय घटना preventDefault()कार्यक्षमता प्रदान करेला। एह से कवनो क्रिया के शुरू होखे से पहिले ओकरा निष्पादन के रोके के क्षमता मिलेला। कवनो इवेंट हैंडलर से false रिटर्न कइला से भी स्वचालित रूप से कॉल हो जाई preventDefault().

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

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

प्रोग्रामेटिक एपीआई के बा

सभ कंस्ट्रक्टर सभ कौनों वैकल्पिक विकल्प ऑब्जेक्ट के स्वीकार करे लें या कुछ ना (जवन कौनों प्लगइन के अपना डिफ़ॉल्ट व्यवहार के साथ शुरू करे ला):

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

एसिंक्रोनस फंक्शन आ संक्रमण के बारे में बतावल गइल बा

सभ प्रोग्रामेटिक एपीआई तरीका एसिंक्रोनस होला आ एक बेर संक्रमण शुरू हो गइला के बाद कॉलर के वापस लवट जाला, लेकिन खतम होखे से पहिले . संक्रमण पूरा हो गइला के बाद कौनों क्रिया के निष्पादित करे खातिर, आप संबंधित घटना के सुन सकत बानी।

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`	स्थिर विधि जवन रउआ के कवनो डोम तत्व से जुड़ल मोडल इंस्टेंस पावे के अनुमति देला।
`getOrCreateInstance`	स्थिर तरीका जवन रउआँ के कवनो DOM तत्व से जुड़ल मोडल इंस्टेंस पावे के अनुमति देला, या फिर नया बनावे के अनुमति देला अगर ई इनिशियलाइज ना भइल होखे।

स्थिर गुण के बा	बिबरन
`NAME`	प्लगइन के नाम वापस कर देला। (उदाहरण खातिर: `bootstrap.Tooltip.NAME`) .
`VERSION`	बूटस्ट्रैप के हर प्लगइन के संस्करण के `VERSION`प्लगइन के कंस्ट्रक्टर के प्रॉपर्टी के माध्यम से एक्सेस कइल जा सके ला (उदाहरण: `bootstrap.Tooltip.VERSION`)

सेनेटाइजर के इस्तेमाल कइल जाला

टूलटिप्स आ पोपोवर हमनी के बिल्ट-इन सेनेटाइजर के इस्तेमाल ओह विकल्पन के सेनेटाइज करे खातिर करेला जवन एचटीएमएल के स्वीकार करेला.

डिफ़ॉल्ट 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)
  }
})

वैकल्पिक रूप से जेक्वेरी के इस्तेमाल से

बूटस्ट्रैप 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

बूटस्ट्रैप आधिकारिक तौर पर प्रोटोटाइप भा जेक्वेरी यूआई नियर थर्ड पार्टी जावास्क्रिप्ट लाइब्रेरी सभ के सपोर्ट ना करे ला। बावजूद .noConflictआ नेमस्पेस कइल घटना सभ, संगतता के समस्या हो सके लीं जिनहन के रउआँ के अपना दम पर ठीक करे के जरूरत बा।

जेक्वेरी के घटना के बारे में बतावल गइल बा

बूटस्ट्रैप jQuery के पता लगाई अगर ऑब्जेक्ट jQueryमें मौजूद बा windowआ पर कवनो data-bs-no-jqueryएट्रिब्यूट सेट नइखे <body>। अगर jQuery मिल जाव त बूटस्ट्रैप jQuery के इवेंट सिस्टम के बदौलत इवेंट इमिट करी। त अगर रउआ बूटस्ट्रैप के इवेंट सुनल चाहत बानी त रउआ के , के जगह jQuery मेथड ( .on, .one) के इस्तेमाल करे के पड़ी addEventListener।

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

जावास्क्रिप्ट के अक्षम कर दिहल गइल बा

जावास्क्रिप्ट अक्षम होखे पर बूटस्ट्रैप के प्लगइन सभ में कौनों खास फॉलबैक ना होला। अगर रउआँ एह मामला में प्रयोगकर्ता अनुभव के परवाह करीं, त <noscript>अपना प्रयोगकर्ता लोग के स्थिति के समझावे खातिर (आ जावास्क्रिप्ट के दोबारा सक्षम करे के तरीका) के इस्तेमाल करीं, आ/या आपन खुद के कस्टम फॉलबैक जोड़ीं।