in English

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

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

इस पृष्ठ पर

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

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

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

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

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

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

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

एक मॉड्यूल के रूप में बूटस्ट्रैप का उपयोग करना

इसे स्वयं आज़माएं! twbs/examples रिपॉजिटरी से बूटस्ट्रैप को 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पथ को पूरा करने के लिए मनमानी मॉड्यूल नामों को हल करने के लिए a का उपयोग कर सकते हैं। यदि आपके लक्षित ब्राउज़र समर्थन नहीं करते हैं 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`	स्टेटिक विधि जो आपको डीओएम तत्व से जुड़े मोडल इंस्टेंस को प्राप्त करने की अनुमति देती है।
`getOrCreateInstance`	स्टेटिक विधि जो आपको डीओएम तत्व से जुड़े मोडल इंस्टेंस को प्राप्त करने की अनुमति देती है, या यदि इसे प्रारंभ नहीं किया गया था तो एक नया बनाएं।

स्थिर संपत्ति	विवरण
`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

वही हमारे अन्य घटकों के लिए जाता है।

कोई विवाद नहीं

कभी-कभी अन्य UI फ्रेमवर्क के साथ बूटस्ट्रैप प्लगइन्स का उपयोग करना आवश्यक होता है। इन परिस्थितियों में, नामस्थान टकराव कभी-कभी हो सकता है। यदि ऐसा होता है, तो आप .noConflictउस प्लगइन पर कॉल कर सकते हैं जिसका आप मूल्य वापस करना चाहते हैं।

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

बूटस्ट्रैप आधिकारिक तौर पर प्रोटोटाइप या jQuery UI जैसी तृतीय-पक्ष JavaScript लाइब्रेरी का समर्थन नहीं करता है। घटनाओं के नाम के बावजूद .noConflict, संगतता समस्याएं हो सकती हैं जिन्हें आपको स्वयं ठीक करने की आवश्यकता है।

jQuery की घटनाएं

बूटस्ट्रैप jQuery का पता लगाएगा यदि वस्तु jQueryमें मौजूद है windowऔर कोई data-bs-no-jqueryविशेषता सेट नहीं है <body>। यदि jQuery मिल जाता है, तो बूटस्ट्रैप jQuery के ईवेंट सिस्टम के कारण ईवेंट का उत्सर्जन करेगा। इसलिए यदि आप बूटस्ट्रैप की घटनाओं को सुनना चाहते हैं, तो आपको के बजाय jQuery विधियों ( .on, .one) का उपयोग करना होगा addEventListener।

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

अक्षम जावास्क्रिप्ट

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