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

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

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

यदि अहां बंडलर (वेबपैक, रोलअप...) कें उपयोग करय छी, त अहां /js/dist/*.jsओय फाइल कें उपयोग कयर सकय छी जे यूएमडी तैयार छै.

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

हम बूटस्ट्रैप कें एकटा संस्करण प्रदान करय छी जे 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>

निर्भरताएँ

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

हमर ड्रॉपडाउन, पोपोवर आ टूलटिप सेहो पॉपर पर निर्भर करैत अछि .

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

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

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

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

घटनाक्रम

बूटस्ट्रैप अधिकांश प्लगइन कें अद्वितीय क्रियाक कें लेल कस्टम घटना प्रदान करयत छै. सामान्यतः ई सब अव्यय आ भूतकाल रूप मे अबैत अछि - जतय showकोनो घटनाक आरम्भ मे अव्यय (ex. ) ट्रिगर होइत अछि , आ ओकर भूतपूर्व कर्मधारय रूप (ex. shown) कोनो क्रियाक पूर्णता पर ट्रिगर होइत अछि |

सब अव्यय घटना preventDefault()कार्यक्षमता प्रदान करैत अछि। एहि स कोनो क्रिया क शुरू होएबा स पहिने ओकर निष्पादन कए रोकबाक क्षमता भेटैत अछि । कोनो इवेंट हैंडलर सँ false वापस करब सेहो स्वतः कॉल करत 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 केर प्रयोग करैत छी)

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

सेनेटाइजर

टूलटिप्स आरू पोपोवर्स हमरऽ बिल्ट-इन सेनेटाइजर के उपयोग ऐन्हऽ विकल्पऽ क॑ सेनेटाइज करै लेली करै छै जे एचटीएमएल क॑ स्वीकार करै छै ।

पूर्वनिर्धारित 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)
  }
})