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

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

व्यक्तिगत भा संकलित कइल जाव

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

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

निर्भरता के बारे में बतावल गइल बा

कुछ प्लगइन आ सीएसएस घटक अन्य प्लगइन सभ पर निर्भर करे लें। अगर रउआँ प्लगइन सभ के अलग-अलग शामिल करीं, डॉक्स में एह निर्भरता सभ के जांच जरूर करीं। इहो ध्यान दीं कि सभ प्लगइन jQuery पर निर्भर करे लें (एकर मतलब बा कि प्लगइन फाइल सभ से पहिले jQuery के शामिल कइल जरूरी बा)। हमनी से सलाह लींpackage.json कि jQuery के कवन संस्करण समर्थित बा।

हमनी के ड्रॉपडाउन, पॉपओवर आ टूलटिप भी Popper.js पर निर्भर करेला ।

डेटा के विशेषता के बारे में बतावल गइल बा

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

हालाँकि, कुछ स्थिति सभ में एह कामकाज के अक्षम कइल वांछनीय हो सके ला। डेटा एट्रिब्यूट एपीआई के अक्षम करे खातिर, डॉक्यूमेंट पर सभ इवेंट सभ के अनबाइंड करीं जे data-apiअइसन के साथ नेमस्पेस कइल गइल बा:

$(document).off('.data-api')

एकरे अलावा, कौनों बिसेस प्लगइन के लक्ष्य बनावे खातिर, बस प्लगइन के नाँव के नेमस्पेस के रूप में डेटा-एपीआई नेमस्पेस के साथ एह तरीका से शामिल करीं:

$(document).off('.alert.data-api')

घटनाक्रम के बारे में बतावल गइल बा

बूटस्ट्रैप अधिकतर प्लगइन सभ के बिसेस क्रिया सभ खातिर कस्टम इवेंट उपलब्ध करावे ला। आमतौर पर ई सभ अव्यय आ भूतकाल के रूप में आवे लें - जहाँ कौनों घटना के सुरुआत में अव्यय (ex. ) के ट्रिगर कइल जाला, आ कौनों क्रिया के पूरा होखे पर showएकर भूतकाल के कर्मधारय रूप (ex. ) के ट्रिगर कइल जाला।shown

सभ अव्यय घटना preventDefault()कार्यक्षमता प्रदान करेला। एह से कवनो क्रिया के शुरू होखे से पहिले ओकरा निष्पादन के रोके के क्षमता मिलेला। कवनो इवेंट हैंडलर से false रिटर्न कइला से भी स्वचालित रूप से कॉल हो जाई preventDefault().

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

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

हमनी के इहो मानना ​​बा कि रउरा सभे बूटस्ट्रैप प्लगइन के इस्तेमाल विशुद्ध रूप से जावास्क्रिप्ट एपीआई के माध्यम से करे में सक्षम होखे के चाहीं. सभ सार्वजनिक एपीआई सभ सिंगल, चेन करे लायक तरीका हवें, आ ओह संग्रह के वापस करे लें जेह पर कार्रवाई कइल गइल बा।

$('.btn.danger').button('toggle').addClass('fat')

सभ तरीका सभ के कौनों वैकल्पिक विकल्प ऑब्जेक्ट, कौनों स्ट्रिंग जे कौनों खास तरीका के लक्ष्य बनावे ला, या कुछ ना (जवन डिफ़ॉल्ट व्यवहार के साथ प्लगइन के सुरुआत करे) के स्वीकार करे के चाहीं:

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

हर प्लगइन एगो Constructorगुण पर भी आपन कच्चा कंस्ट्रक्टर के उजागर करेला: $.fn.popover.Constructor. अगर रउआँ कवनो खास प्लगइन इंस्टेंस पावल चाहत बानी, त ओकरा के सीधे कवनो तत्व से रिट्रीव करीं: $('[rel="popover"]').data('popover').

एसिंक्रोनस फंक्शन आ संक्रमण के बारे में बतावल गइल बा

सब प्रोग्रामेटिक एपीआई मेथड एसिंक्रोनस होला आ एक बार संक्रमण शुरू होखला के बाद लेकिन खतम होखे से पहिले कॉलर के पास वापस आ जाला .

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

$('#myCollapse').on('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

एकरा अलावा एगो संक्रमण घटक पर एगो मेथड कॉल के अनदेखी कईल जाई .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('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
$.fn.modal.Constructor.Default.keyboard = false

कवनो टकराव नइखे

कई बेर बूटस्ट्रैप प्लगइन सभ के इस्तेमाल अउरी यूआई फ्रेमवर्क सभ के साथ कइल जरूरी हो जाला। एह हालात में नेमस्पेस के टक्कर कबो-कबो हो सके ला। अगर अइसन होखे त रउआँ .noConflictओह प्लगइन के कॉल कर सकेनी जेकर मान वापस कइल चाहत बानी।

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

संस्करण के नंबर दिहल गइल बा

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

$.fn.tooltip.Constructor.VERSION // => "4.6.2"

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

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

उटिल के बा

बूटस्ट्रैप के सभ जावास्क्रिप्ट फाइल सभ पर निर्भर करे util.jsलीं आ एकरा के बाकी जावास्क्रिप्ट फाइल सभ के साथ सामिल करे के पड़े ला। अगर आप संकलित (या मिनीफाइड) के इस्तेमाल कर रहल बानी bootstrap.js, एकरा के शामिल करे के जरूरत नइखे—ई पहिले से बा।

util.jsएह में यूटिलिटी फंक्शन आ इवेंट सभ खातिर एगो बेसिक हेल्पर transitionEndके साथे-साथ सीएसएस ट्रांजिशन एमुलेटर भी सामिल बा। एकर इस्तेमाल बाकी प्लगइन सभ द्वारा CSS संक्रमण समर्थन के जांच करे खातिर आ लटकत संक्रमण सभ के पकड़े खातिर कइल जाला।

सेनेटाइजर के इस्तेमाल कइल जाला

टूलटिप्स आ पोपोवर हमनी के बिल्ट-इन सेनेटाइजर के इस्तेमाल ओह विकल्पन के सेनेटाइज करे खातिर करेला जवन एचटीएमएल के स्वीकार करेला.

डिफ़ॉल्ट whiteListमान निम्नलिखित बा:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // 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: []
}

अगर रउआँ एह डिफ़ॉल्ट में नया मान जोड़ल चाहत बानी त रउआँ whiteListनिम्नलिखित कर सकत बानी:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-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-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

अगर रउआ हमनी के सेनेटाइजर के बाईपास करे के चाहत बानी काहे कि रउआ एगो समर्पित लाइब्रेरी के इस्तेमाल कइल पसंद करेनी, उदाहरण खातिर DOMPurify , त रउआ निम्नलिखित काम करे के चाहीं:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})