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

साढ़े वैकल्पिक जावास्क्रिप्ट प्लगइन्स कन्नै बूटस्ट्रैप गी जीवन च लाओ। हर प्लगइन, साढ़े डेटा ते प्रोग्रामेटिक एपीआई विकल्पें, ते होर मते बारे च जानने लेई।

इस पेज पर

व्यक्तिगत या संकलित

प्लगइन गी व्यक्तिगत रूप कन्नै शामल कीता जाई सकदा ऐ (बूटस्ट्रैप दा व्यक्तिगत इस्तेमाल करदे होई js/dist/*.js), जां इक बारी च सारें दा इस्तेमाल करदे होई bootstrap.jsजां मिनीफाइड कीता जाई सकदा ऐ bootstrap.min.js(दोनें गी शामल नेईं करो)।

जेकर तुस इक बंडलर (वेबपैक, पार्सल, Vite...) दा इस्तेमाल करदे ओ तां तुस /js/dist/*.jsउनें फाइलें दा इस्तेमाल करी सकदे ओ जेह् ड़ियां UMD तैयार न.

जावास्क्रिप्ट ढांचे कन्नै इस्तेमाल

जदके बूटस्ट्रैप सीएसएस दा इस्तेमाल कुसै बी ढांचे कन्नै कीता जाई सकदा ऐ, तां बूटस्ट्रैप जावास्क्रिप्ट जावास्क्रिप्ट ढांचे जि’यां रिएक्ट, व्यू, ते एंगुलर कन्नै पूरी चाल्ली संगत नेईं ऐ जेह् ड़े DOM दा पूरा ज्ञान मनदे न. बूटस्ट्रैप ते फ्रेमवर्क दोनें इक गै 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मार्गें गी पूरा करने आस्तै मनमाने आह् ले मॉड्यूल नांऽ गी हल करने आस्तै इक दा इस्तेमाल करी सकदे ओ. जेकर तुंदे लक्ष्य ब्राउज़र समर्थन नेईं करदे न 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}". डेटा विशेषताएं दे राहें विकल्पें गी पास करदे बेल्लै विकल्प नांऽ दे केस प्रकार गी “ 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
  }
})

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

सारे कन्स्ट्रक्टर इक वैकल्पिक विकल्प वस्तु गी स्वीकार करदे न जां कुसै बी चीज़ गी नेईं (जेह् ड़ा अपने डिफाल्ट व्यवहार कन्नै इक प्लगइन शुरू करदा ऐ):

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`	इक तत्व दा मोडल नष्ट करदा ऐ। (डीओएम तत्व पर संग्रहीत डेटा गी हटांदा ऐ)
`getInstance`	स्थिर विधि जेह् ड़ी तुसेंगी इक DOM तत्व कन्नै जुड़े दा मोडल इंस्टेंस हासल करने दी इजाजत दिंदी ऐ।
`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)
  }
})

वैकल्पिक रूप कन्नै 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च मौजूद ऐ windowते पर कोई data-bs-no-jqueryविशेषता सेट नेईं ऐ <body>. जेकर jQuery पाया जंदा ऐ तां बूटस्ट्रैप jQuery दे इवेंट सिस्टम दी बदौलत घटनाएं गी उत्सर्जित करग. तो जेकर तुस बूटस्ट्रैप दी घटनाएं गी सुनना चांह् दे ओ तां .onतुसेंगी ..oneaddEventListener

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

जावास्क्रिप्ट अक्षम कीती गेई

जावास्क्रिप्ट अक्षम होने पर बूटस्ट्रैप दे प्लगइन्स च कोई खास फॉलबैक नेईं होंदा ऐ. जेकर तुस इस मामले च बरतूनी दे अनुभव दी परवाह करदे ओ तां अपने बरतूनी <noscript>गी स्थिति गी समझाने आस्तै (ते जावास्क्रिप्ट गी दुबारा सक्षम कीता जा) ते/जां अपने खुद दे कस्टम फालबैक जोड़ने आस्तै इस्तेमाल करो.