जावास्क्रिप्ट के बा
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')भागत चयनकर्ता लोग के बा
अगर रउआँ बिसेस चयनकर्ता सभ के इस्तेमाल करे लीं, उदाहरण खातिर: collapse:Example, इनहन से बचल जरूर करीं, काहें से कि ई jQuery के माध्यम से गुजर जाई।
बूटस्ट्रैप अधिकतर प्लगइन सभ के बिसेस क्रिया सभ खातिर कस्टम इवेंट उपलब्ध करावे ला। आमतौर पर ई सभ अव्यय आ भूतकाल के रूप में आवे लें - जहाँ कौनों घटना के सुरुआत में अव्यय (ex. ) के ट्रिगर कइल जाला, आ कौनों क्रिया के पूरा होखे पर showएकर भूतकाल के कर्मधारय रूप (ex. ) के ट्रिगर कइल जाला।shown
सभ अव्यय घटना preventDefault()कार्यक्षमता प्रदान करेला। एह से कवनो क्रिया के शुरू होखे से पहिले ओकरा निष्पादन के रोके के क्षमता मिलेला। कवनो इवेंट हैंडलर से false रिटर्न कइला से भी स्वचालित रूप से कॉल हो जाई preventDefault().
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.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 (e) {
// Action to execute once the collapsible area is expanded
})एकरा अलावा एगो संक्रमण घटक पर एगो मेथड कॉल के अनदेखी कईल जाई .
$('#myCarousel').on('slid.bs.carousel', function (e) {
$('#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ऑब्जेक्ट के संशोधित क के कौनों प्लगइन खातिर डिफ़ॉल्ट सेटिंग बदल सकत बानी:
$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to 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.1.3"बूटस्ट्रैप के प्लगइन खास तौर प जब जावास्क्रिप्ट अक्षम होखेला त ओकरा के खास तौर प शानदार तरीका से वापस ना गिरेला। अगर रउआँ एह मामला में प्रयोगकर्ता अनुभव के परवाह करीं, त <noscript>अपना प्रयोगकर्ता लोग के स्थिति के समझावे खातिर (आ जावास्क्रिप्ट के दोबारा सक्षम करे के तरीका) के इस्तेमाल करीं, आ/या आपन खुद के कस्टम फॉलबैक जोड़ीं।
थर्ड पार्टी लाइब्रेरी के बारे में बतावल गइल बा
बूटस्ट्रैप आधिकारिक तौर पर प्रोटोटाइप भा जेक्वेरी यूआई नियर थर्ड पार्टी जावास्क्रिप्ट लाइब्रेरी सभ के सपोर्ट ना करे ला । बावजूद .noConflictआ नेमस्पेस कइल घटना सभ, संगतता के समस्या हो सके लीं जिनहन के रउआँ के अपना दम पर ठीक करे के जरूरत बा।
बूटस्ट्रैप के सभ जावास्क्रिप्ट फाइल सभ पर निर्भर करे util.jsलीं आ एकरा के बाकी जावास्क्रिप्ट फाइल सभ के साथ सामिल करे के पड़े ला। अगर आप संकलित (या मिनीफाइड) के इस्तेमाल कर रहल बानी bootstrap.js, एकरा के शामिल करे के जरूरत नइखे—ई पहिले से बा।
util.jsएह में यूटिलिटी फंक्शन आ इवेंट सभ खातिर एगो बेसिक हेल्पर transitionEndके साथे-साथ सीएसएस ट्रांजिशन एमुलेटर भी सामिल बा। एकर इस्तेमाल बाकी प्लगइन सभ द्वारा CSS संक्रमण समर्थन के जांच करे खातिर आ लटकत संक्रमण सभ के पकड़े खातिर कइल जाला।