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

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

इस पेज पर

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

प्लगइन कें व्यक्तिगत रूप सं शामिल कैल जा सकय छै (बूटस्ट्रैप कें व्यक्तिगत कें उपयोग करयत 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पथ पूरा करय कें लेल मनमाना मॉड्यूल नाम कें हल करय कें लेल. यदि अहां कें लक्षित ब्राउज़र समर्थन नहि करएयत छै 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 ” सं “ kabab -case ” मे बदलनाय सुनिश्चित करूं . जेना, के 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कोनो घटनाक आरम्भ मे अव्यय (ex. ) ट्रिगर होइत अछि , आ ओकर भूतपूर्व कर्मधारय रूप (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)
  }
})

वैकल्पिक रूप स 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

बूटस्ट्रैप आधिकारिक तौर पर प्रोटोटाइप या जेक्वेरी यूआई जैना तृतीय पक्ष जावास्क्रिप्ट लाइब्रेरी कें समर्थन नहि करएयत छै. बावजूद .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>स्थिति कें समझाबय कें लेल (आ जावास्क्रिप्ट कें पुनः सक्षम करय कें तरीका) कें उपयोग करूं, आ/अथवा अपन खुद कें कस्टम फॉलबैक जोड़ूं.