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

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

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

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

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

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>

निर्भरता

कुछ प्लगइन्स और CSS घटक अन्य प्लगइन्स पर निर्भर करते हैं। यदि आप अलग-अलग प्लगइन्स शामिल करते हैं, तो डॉक्स में इन निर्भरताओं की जांच करना सुनिश्चित करें।

हमारे ड्रॉपडाउन, पॉपओवर और टूलटिप्स भी पॉपर पर निर्भर करते हैं ।

अभी भी jQuery का उपयोग करना चाहते हैं? यह संभव है!

बूटस्ट्रैप 5 को jQuery के बिना उपयोग करने के लिए डिज़ाइन किया गया है, लेकिन jQuery के साथ हमारे घटकों का उपयोग करना अभी भी संभव है। यदि बूटस्ट्रैप ऑब्जेक्ट jQueryमें पता लगाता है तोwindow यह हमारे सभी घटकों को jQuery के प्लगइन सिस्टम में जोड़ देगा; इसका मतलब है कि आप $('[data-bs-toggle="tooltip"]').tooltip()टूलटिप्स को सक्षम करने में सक्षम होंगे। वही हमारे अन्य घटकों के लिए जाता है।

डेटा विशेषताएँ

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

आयोजन

बूटस्ट्रैप अधिकांश प्लगइन्स की अनूठी क्रियाओं के लिए कस्टम ईवेंट प्रदान करता है। आम तौर पर, ये एक इनफिनिटिव और पिछले कृदंत रूप में आते हैं - जहां showएक घटना की शुरुआत में इनफिनिटिव (उदा।) ट्रिगर होता है, और इसके पिछले कृदंत रूप (उदा। shown) को एक क्रिया के पूरा होने पर ट्रिगर किया जाता है।

सभी अनंत घटनाएँ preventDefault()कार्यक्षमता प्रदान करती हैं। यह किसी क्रिया के प्रारंभ होने से पहले उसके निष्पादन को रोकने की क्षमता प्रदान करता है। किसी ईवेंट हैंडलर से झूठी वापसी भी स्वचालित रूप से कॉल करेगी preventDefault()।

var myModal = document.getElementById('myModal')

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

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

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

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

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

यदि आप एक विशेष प्लगइन इंस्टेंस प्राप्त करना चाहते हैं, तो प्रत्येक प्लगइन एक getInstanceविधि का खुलासा करता है। किसी तत्व से इसे सीधे प्राप्त करने के लिए, यह करें: bootstrap.Popover.getInstance(myPopoverEl).

निर्माणकर्ताओं में सीएसएस चयनकर्ता

आप प्लगइन को इनिशियलाइज़ करने के लिए DOM एलिमेंट के बजाय पहले तर्क के रूप में CSS चयनकर्ता का भी उपयोग कर सकते हैं। वर्तमान में प्लगइन के लिए तत्व विधि द्वारा पाया जाता है querySelectorक्योंकि हमारे प्लगइन्स केवल एक ही तत्व का समर्थन करते हैं।

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

अतुल्यकालिक कार्य और संक्रमण

सभी प्रोग्रामेटिक एपीआई विधियां एसिंक्रोनस हैं और संक्रमण शुरू होने के बाद लेकिन समाप्त होने से पहले कॉलर पर वापस आ जाती हैं ।

संक्रमण पूरा होने के बाद किसी क्रिया को निष्पादित करने के लिए, आप संबंधित घटना को सुन सकते हैं।

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

इसके अलावा एक संक्रमण घटक पर एक विधि कॉल को नजरअंदाज कर दिया जाएगा ।

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', function (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 !!

डिफ़ॉल्ट सेटिंग्स

Constructor.Defaultआप प्लगइन के ऑब्जेक्ट को संशोधित करके प्लगइन के लिए डिफ़ॉल्ट सेटिंग्स बदल सकते हैं :

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

कोई विरोध नहीं (केवल अगर आप jQuery का उपयोग करते हैं)

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

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

संस्करण संख्या

बूटस्ट्रैप के प्रत्येक प्लगइन के संस्करण को VERSIONप्लगइन के निर्माता की संपत्ति के माध्यम से एक्सेस किया जा सकता है। उदाहरण के लिए, टूलटिप प्लगइन के लिए:

bootstrap.Tooltip.VERSION // => "5.1.3"

जावास्क्रिप्ट अक्षम होने पर कोई विशेष फ़ॉलबैक नहीं

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

प्रक्षालक

टूलटिप्स और पॉपओवर HTML को स्वीकार करने वाले विकल्पों को सैनिटाइज़ करने के लिए हमारे बिल्ट-इन सैनिटाइज़र का उपयोग करते हैं।

डिफ़ॉल्ट allowListमान निम्न है:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var 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आप निम्न कार्य कर सकते हैं:

var 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
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

यदि आप हमारे सैनिटाइज़र को बायपास करना चाहते हैं क्योंकि आप एक समर्पित पुस्तकालय का उपयोग करना पसंद करते हैं, उदाहरण के लिए DOMPurify , तो आपको निम्न कार्य करना चाहिए:

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})