जावास्क्रिप्ट के बा
एक दर्जन से अधिक कस्टम जेक्वेरी प्लगइन के साथ बूटस्ट्रैप के घटक के जीवन में ले आईं। आसानी से ओह सब के शामिल करीं, भा एक-एक करके.
एक दर्जन से अधिक कस्टम जेक्वेरी प्लगइन के साथ बूटस्ट्रैप के घटक के जीवन में ले आईं। आसानी से ओह सब के शामिल करीं, भा एक-एक करके.
प्लगइन सभ के अलग-अलग शामिल कइल जा सके ला (बूटस्ट्रैप के अलग-अलग *.js
फाइल सभ के इस्तेमाल से), या एक साथ सभ के (उपयोग से bootstrap.js
या मिनिफाइड bootstrap.min.js
कइल)।
दुनु bootstrap.js
आ bootstrap.min.js
एके फाइल में सगरी प्लगइन शामिल बा. खाली एगो के शामिल करीं.
कुछ प्लगइन आ सीएसएस घटक अन्य प्लगइन सभ पर निर्भर करे लें। अगर रउआँ प्लगइन सभ के अलग-अलग शामिल करीं, डॉक्स में एह निर्भरता सभ के जांच जरूर करीं। इहो ध्यान दीं कि सभ प्लगइन jQuery पर निर्भर करे लें (एकर मतलब बा कि प्लगइन फाइल सभ से पहिले jQuery के शामिल कइल जरूरी बा)। हमनी से सलाह लींbower.json
कि jQuery के कवन संस्करण समर्थित बा।
रउआँ सभ बूटस्ट्रैप प्लगइन सभ के इस्तेमाल बिशुद्ध रूप से मार्कअप एपीआई के माध्यम से बिना जावास्क्रिप्ट के एक लाइन लिखले क सकत बानी। ई बूटस्ट्रैप के पहिला श्रेणी के एपीआई हवे आ प्लगइन के इस्तेमाल करत घरी ई रउरा पहिला विचार करे के चाहीं.
कहल जा सकेला कि कुछ स्थिति में एह कार्यक्षमता के बंद कइल वांछनीय हो सकेला. एह से, हमनी के , के साथ नेमस्पेस कइल गइल दस्तावेज पर सभ घटना सभ के अनबाइंड क के डेटा एट्रिब्यूट एपीआई के अक्षम करे के क्षमता भी उपलब्ध करावे लीं data-api
। ई अइसन लउकत बा:
एकरे अलावा, कौनों बिसेस प्लगइन के लक्ष्य बनावे खातिर, बस प्लगइन के नाँव के नेमस्पेस के रूप में डेटा-एपीआई नेमस्पेस के साथ एह तरीका से शामिल करीं:
एकही तत्व पर कई गो प्लगइन सभ से डेटा एट्रिब्यूट के इस्तेमाल मत करीं। उदाहरण खातिर, बटन में टूलटिप आ मोडल टॉगल दुनों ना हो सके ला। एकरा के पूरा करे खातिर एगो रैपिंग तत्व के इस्तेमाल करीं।
हमनी के इहो मानना बा कि रउरा सभे बूटस्ट्रैप प्लगइन के इस्तेमाल विशुद्ध रूप से जावास्क्रिप्ट एपीआई के माध्यम से करे में सक्षम होखे के चाहीं. सभ सार्वजनिक एपीआई सभ सिंगल, चेन करे लायक तरीका हवें, आ ओह संग्रह के वापस करे लें जेह पर कार्रवाई कइल गइल बा।
सभ तरीका सभ के कौनों वैकल्पिक विकल्प ऑब्जेक्ट, कौनों स्ट्रिंग जे कौनों खास तरीका के लक्ष्य बनावे ला, या कुछ ना (जवन डिफ़ॉल्ट व्यवहार के साथ प्लगइन के सुरुआत करे) के स्वीकार करे के चाहीं:
हर प्लगइन एगो Constructor
गुण पर भी आपन कच्चा कंस्ट्रक्टर के उजागर करेला: $.fn.popover.Constructor
. अगर रउआँ कवनो खास प्लगइन इंस्टेंस पावल चाहत बानी, त ओकरा के सीधे कवनो तत्व से रिट्रीव करीं: $('[rel="popover"]').data('popover')
.
रउआँ प्लगइन के Constructor.DEFAULTS
ऑब्जेक्ट के संशोधित क के कौनों प्लगइन खातिर डिफ़ॉल्ट सेटिंग बदल सकत बानी:
कई बेर बूटस्ट्रैप प्लगइन सभ के इस्तेमाल अउरी यूआई फ्रेमवर्क सभ के साथ कइल जरूरी हो जाला। एह हालात में नेमस्पेस के टक्कर कबो-कबो हो सके ला। अगर अइसन होखे त रउआँ .noConflict
ओह प्लगइन के कॉल कर सकेनी जेकर मान वापस कइल चाहत बानी।
बूटस्ट्रैप अधिकतर प्लगइन सभ के बिसेस क्रिया सभ खातिर कस्टम इवेंट उपलब्ध करावे ला। आमतौर पर ई सभ अव्यय आ भूतकाल के रूप में आवे लें - जहाँ कौनों घटना के सुरुआत में अव्यय (ex. ) के ट्रिगर कइल जाला, आ कौनों क्रिया के पूरा होखे पर show
एकर भूतकाल के कर्मधारय रूप (ex. ) के ट्रिगर कइल जाला।shown
3.0.0 के रूप में, सभ बूटस्ट्रैप इवेंट सभ के नेमस्पेस कइल गइल बा।
सभ अव्यय घटना preventDefault
कार्यक्षमता प्रदान करेला। एह से कवनो क्रिया के शुरू होखे से पहिले ओकरा निष्पादन के रोके के क्षमता मिलेला।
बूटस्ट्रैप के हर jQuery प्लगइन के संस्करण के VERSION
प्लगइन के कंस्ट्रक्टर के प्रॉपर्टी के माध्यम से एक्सेस कइल जा सकेला। उदाहरण खातिर, टूलटिप प्लगइन खातिर:
बूटस्ट्रैप के प्लगइन खास तौर प जब जावास्क्रिप्ट अक्षम होखेला त ओकरा के खास तौर प शानदार तरीका से वापस ना गिरेला। अगर रउआँ एह मामला में प्रयोगकर्ता अनुभव के परवाह करीं, त <noscript>
अपना प्रयोगकर्ता लोग के स्थिति के समझावे खातिर (आ जावास्क्रिप्ट के दोबारा सक्षम करे के तरीका) के इस्तेमाल करीं, आ/या आपन खुद के कस्टम फॉलबैक जोड़ीं।
बूटस्ट्रैप आधिकारिक तौर पर प्रोटोटाइप भा जेक्वेरी यूआई नियर थर्ड पार्टी जावास्क्रिप्ट लाइब्रेरी सभ के सपोर्ट ना करे ला । बावजूद .noConflict
आ नेमस्पेस कइल घटना सभ, संगतता के समस्या हो सके लीं जिनहन के रउआँ के अपना दम पर ठीक करे के जरूरत बा।
सरल संक्रमण प्रभाव खातिर, transition.js
एक बेर बाकी जेएस फाइल सभ के साथ शामिल करीं। अगर आप संकलित (या मिनीफाइड) के इस्तेमाल कर रहल बानी bootstrap.js
, एकरा के शामिल करे के जरूरत नइखे—ई पहिले से बा।
Transition.js इवेंट सभ खातिर एगो बेसिक हेल्पर हवे आ transitionEnd
साथ ही साथ एगो CSS ट्रांजिशन एमुलेटर भी हवे। एकर इस्तेमाल बाकी प्लगइन सभ द्वारा CSS संक्रमण समर्थन के जांच करे खातिर आ लटकत संक्रमण सभ के पकड़े खातिर कइल जाला।
संक्रमण सभ के निम्नलिखित जावास्क्रिप्ट स्निपेट के इस्तेमाल से ग्लोबल रूप से अक्षम कइल जा सके ला, जवन लोड भइला के बाद transition.js
(या bootstrap.js
या bootstrap.min.js
, जइसन कि मामला हो सके ला) आवे के चाहीं:
मोडल सभ के सुव्यवस्थित, बाकी लचीला, डायलॉग प्रॉम्प्ट सभ के साथ न्यूनतम जरूरी कामकाज आ स्मार्ट डिफ़ॉल्ट सभ के साथ।
जबले कवनो मोडल अबहीं लउकत होखे तबले कवनो मोडल जरूर ना खोलीं. एक बेर में एक से अधिका मोडल देखावे खातिर कस्टम कोड के जरूरत होला.
हमेशा कोसिस करीं कि कौनों मोडल के एचटीएमएल कोड के अपना दस्तावेज में टॉप-लेवल के स्थिति में रखीं ताकि मोडल के रूप आ/या कामकाज के प्रभावित करे वाला अउरी घटक सभ से बचे के पड़े।
मोबाइल डिवाइस प मोडल के इस्तेमाल के लेके कुछ चेतावनी बा। विस्तार से जाने खातिर हमनी के ब्राउजर सपोर्ट डॉक्स देखीं ।
एचटीएमएल 5 अपना सिमेंटिक्स के कइसे परिभाषित करे ला एकरे कारण, autofocus
बूटस्ट्रैप मोडल सभ में एचटीएमएल एट्रिब्यूट के कौनों परभाव ना पड़े ला। इहे प्रभाव हासिल करे खातिर कुछ कस्टम जावास्क्रिप्ट के इस्तेमाल करीं:
हेडर, बॉडी, आ पाद लेख में एक्शन सभ के सेट के साथ एगो रेंडर कइल मोडल।
नीचे दिहल बटन पर क्लिक क के जावास्क्रिप्ट के माध्यम से कवनो मोडल के टॉगल करीं। ई नीचे सरक जाई आ पन्ना के ऊपर से फीका पड़ जाई.
role="dialog"
आ aria-labelledby="..."
, मोडल टाइटिल के संदर्भ देत, के .modal
, आ खुद role="document"
में जोड़ल जरूर करीं ।.modal-dialog
एकरे अलावा, रउआँ आपन मोडल डायलॉग के बिबरन aria-describedby
on के साथ दे सकत बानी .modal
।
यूट्यूब वीडियो के मोडल में एम्बेड करे खातिर बूटस्ट्रैप में ना होखे वाला अतिरिक्त जावास्क्रिप्ट के जरूरत होला ताकि प्लेबैक के स्वचालित रूप से रोकल जा सके आ अउरी बहुत कुछ। अधिक जानकारी खातिर ई सहायक स्टैक ओवरफ्लो पोस्ट देखीं ।
मोडल सभ के दू गो वैकल्पिक आकार होलें, संशोधक वर्ग सभ के माध्यम से उपलब्ध बाड़ें जिनहन के एगो पर रखल जा सके ला .modal-dialog
।
मोडल सभ खातिर जे खाली देखे खातिर फीका होखे के बजाय लउके लें, .fade
अपना मोडल मार्कअप से क्लास हटाईं।
एगो मोडल के भीतर बूटस्ट्रैप ग्रिड सिस्टम के फायदा उठावे खातिर, बस .row
के भीतर s के नेस्ट .modal-body
करीं आ ओकरा बाद सामान्य ग्रिड सिस्टम क्लास सभ के इस्तेमाल करीं।
बटन के एगो गुच्छा बा जवन सभ एकही मोडल के ट्रिगर करेला, बस तनिका अलग सामग्री के संगे? मोडल के सामग्री में बदलाव करे खातिर event.relatedTarget
आ एचटीएमएल data-*
बिसेसता सभ के इस्तेमाल करीं (संभवतः jQuery के माध्यम से ) जे एह बात पर निर्भर करे ला कि कवन बटन पर क्लिक कइल गइल रहे। पर विस्तार से जाने खातिर मोडल इवेंट्स डॉक्स देखल जाव relatedTarget
,
मोडल प्लगइन मांग पर, डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से, आपके छिपल सामग्री के टॉगल क देला। ई डिफ़ॉल्ट स्क्रॉलिंग व्यवहार के ओवरराइड करे खातिर भी जोड़ देला आ मोडल के बाहर क्लिक करे पर देखावल गइल मोडल सभ के खारिज करे खातिर क्लिक क्षेत्र उपलब्ध करावे खातिर a जनरेट .modal-open
करे ला ।<body>
.modal-backdrop
जावास्क्रिप्ट लिखले बिना कवनो मोडल के सक्रिय करीं. बटन नियर नियंत्रक तत्व पर सेट data-toggle="modal"
करीं, एकरे साथ data-target="#foo"
या href="#foo"
टॉगल करे खातिर कौनों बिसेस मोडल के लक्ष्य बनावे खातिर।
myModal
जावास्क्रिप्ट के एकल लाइन के साथ आईडी वाला मोडल के कॉल करीं :
विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-
, जइसे कि में data-backdrop=""
।
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
पृष्ठभूमि के बा | बूलियन भा स्ट्रिंग के कहल जाला'static' |
सच | एगो मोडल-बैकग्राउंड तत्व शामिल बा। एकरे अलावा, अइसन बैकग्राउंड खातिर निर्दिष्ट करीं static जे क्लिक पर मोडल बंद ना करे। |
कीबोर्ड के बारे में बतावल गइल बा | बूलियन के बा | सच | एस्केप की दबावे पर मोडल बंद कर देला |
देखायीं | बूलियन के बा | सच | इनिशियलाइज होखे पर मोडल देखावे ला। |
दूर में स्थित | राह | गलत | ई विकल्प v3.3.0 से पदावनत बा आ v4 में हटा दिहल गइल बा। हमनी के एकरे बजाय क्लाइंट-साइड टेम्पलेटिंग या डेटा बाइंडिंग फ्रेमवर्क के इस्तेमाल करे के सलाह देत बानी जा, या खुद jQuery.load के कॉल करीं। अगर रिमोट यूआरएल दिहल गइल होखे तब सामग्री के एक बेर jQuery के तरीका के माध्यम से लोड कइल जाई आ div |
.modal(options)
मोडल के रूप में राउर सामग्री के सक्रिय करेला। एगो वैकल्पिक विकल्प स्वीकार करेला object
.
.modal('toggle')
मैन्युअल रूप से एगो मोडल के टॉगल करेला। मोडल के वास्तव में देखावल भा छिपावे से पहिले (यानी shown.bs.modal
या hidden.bs.modal
घटना होखे से पहिले) कॉलर के वापस आ जाला।
.modal('show')
मैन्युअल रूप से एगो मोडल खोलेला। मोडल के वास्तव में देखावल जाए से पहिले (यानी shown.bs.modal
घटना होखे से पहिले) कॉलर के वापस आ जाला।
.modal('hide')
मैन्युअल रूप से एगो मोडल के छिपा देला। मोडल के वास्तव में छिपावे से पहिले (यानी hidden.bs.modal
घटना होखे से पहिले) कॉलर के वापस आ जाला।
.modal('handleUpdate')
मोडल के पोजीशनिंग के रिएडजस्ट क के कवनो स्क्रॉलबार के काउंटर करे ला अगर कवनो स्क्रॉलबार लउके के चाहीं, जवना से मोडल बाईं ओर कूद जाई.
तबे जरूरत होला जब खुलल रहला पर मोडल के ऊंचाई बदल जाला.
बूटस्ट्रैप के मोडल क्लास मोडल फंक्शनलिटी में हुक करे खातिर कुछ इवेंट के उजागर करेला।
सभ मोडल घटना सभ के खुद मोडल पर (यानी पर <div class="modal">
) फायर कइल जाला।
घटना के प्रकार बा | बिबरन |
---|---|
शो.बीएस.मोडल के बा | show इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। अगर क्लिक के कारण होखे तब क्लिक कइल तत्व relatedTarget घटना के गुण के रूप में उपलब्ध होला। |
देखावल गइल बा.बीएस.मोडल | ई इवेंट तब फायर कइल जाला जब मोडल के प्रयोगकर्ता के देखाई देवे वाला बनावल जाला (CSS संक्रमण पूरा होखे के इंतजार करी)। अगर क्लिक के कारण होखे तब क्लिक कइल तत्व relatedTarget घटना के गुण के रूप में उपलब्ध होला। |
छिपावे के.बीएस.मोडल के बा | ई इवेंट तुरंत फायर हो जाला जब hide इंस्टेंस मेथड के कॉल हो जाला। |
छिपल.बीएस.मोडल के बा | ई इवेंट तब फायर कइल जाला जब मोडल के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण पूरा होखे के इंतजार करी)। |
लोड हो गइल बा.बीएस.मोडल | ई इवेंट तब फायर कइल जाला जब मोडल remote विकल्प के इस्तेमाल से सामग्री लोड कइले होखे। |
एह साधारण प्लगइन से लगभग कवनो चीज में ड्रॉपडाउन मेनू जोड़ीं, जवना में नवबार, टैब, आ गोली शामिल बा.
.open
डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से, ड्रॉपडाउन प्लगइन पैरेंट लिस्ट आइटम पर क्लास के टॉगल क के छिपल सामग्री (ड्रॉपडाउन मेनू) के टॉगल करे ला।
मोबाइल डिवाइस प ड्रॉपडाउन खोलला से .dropdown-backdrop
मेनू के बाहर टैप करे के समय ड्रॉपडाउन मेनू बंद करे खाती टैप एरिया के रूप में जोड़ल जाला, जवन कि सही आईओएस सपोर्ट खाती जरूरी बा। मतलब कि खुला ड्रॉपडाउन मेनू से अलग ड्रॉपडाउन मेनू में जाए खातिर मोबाइल प एक्स्ट्रा टैप करे के पड़ी।
नोट: data-toggle="dropdown"
एट्रिब्यूट पर कौनों एप्लीकेशन लेवल पर ड्रॉपडाउन मेनू बंद करे खातिर भरोसा कइल जाला, एह से हमेशा एकर इस्तेमाल कइल एगो बढ़िया बिचार बा।
data-toggle="dropdown"
ड्रॉपडाउन के टॉगल करे खातिर कवनो लिंक भा बटन में जोड़ीं .
लिंक बटन के साथ यूआरएल के बरकरार रखे खातिर, के data-target
बजाय एट्रिब्यूट के इस्तेमाल करीं href="#"
।
जावास्क्रिप्ट के माध्यम से ड्रॉपडाउन के कॉल करीं:
data-toggle="dropdown"
अभी भी जरूरी बाचाहे रउआ जावास्क्रिप्ट के माध्यम से अपना ड्रॉपडाउन के कॉल करीं भा एकरा बजाय डेटा-एपीआई के इस्तेमाल करीं, data-toggle="dropdown"
हमेशा ड्रॉपडाउन के ट्रिगर तत्व पर मौजूद रहे के जरूरत बा।
कवनो ना
$().dropdown('toggle')
कवनो दिहल नवबार भा टैब कइल नेविगेशन के ड्रॉपडाउन मेनू के टॉगल करे ला।
सभ ड्रॉपडाउन इवेंट .dropdown-menu
's मूल तत्व पर फायर कइल जाला।
सभ ड्रॉपडाउन इवेंट सभ में एगो relatedTarget
प्रॉपर्टी होला, जेकर मान टॉगलिंग एंकर तत्व होला।
घटना के प्रकार बा | बिबरन |
---|---|
शो.बीएस.ड्रॉपडाउन के बारे में बतावल गइल बा | शो इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। |
देखावल गइल बा.bs.ड्रॉपडाउन | ई इवेंट तब फायर कइल जाला जब ड्रॉपडाउन के प्रयोगकर्ता के देखाई पड़े ला (CSS संक्रमण सभ के इंतजार करी, पूरा होखे खातिर)। |
छिपावे के बा.बीएस.ड्रॉपडाउन | ई इवेंट तुरंत फायर हो जाला जब हिड इंस्टेंस मेथड के कॉल हो जाला। |
छिपल.बीएस.ड्रॉपडाउन बा | ई इवेंट तब फायर कइल जाला जब ड्रॉपडाउन के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण के इंतजार करी, पूरा होखे खातिर)। |
स्क्रॉलस्पाई प्लगइन स्क्रॉल के स्थिति के आधार पर नेव टारगेट के स्वचालित रूप से अपडेट करे खातिर बा। नवबार के नीचे वाला इलाका के स्क्रॉल करीं आ सक्रिय क्लास बदलत देखीं. ड्रॉपडाउन सब आइटम के भी हाइलाइट कईल जाई।
विज्ञापन लेगिंग कीतार, ब्रंच आईडी कला पार्टी डोलर श्रम। पिचफोर्क yr एनिम लो-फाई से पहिले कि उ लोग क्वि बिक गईल। टम्बलर फार्म-टू-टेबल साइकिल के अधिकार जवन भी होखे। अनिम केफियेह कार्लेस कार्डिगन के बा। Velit seitan mcsweeney के फोटो बूथ 3 भेड़िया चंद्रमा irure। Cosby स्वेटर लोमो जीन शॉर्ट्स, विलियम्सबर्ग हुडी न्यूनतम qui आप शायद इनके बारे में नहीं सुनले होखब एट कार्डिगन ट्रस्ट फंड culpa बायोडीजल वेस एंडरसन सौंदर्यशास्त्र। निहिल गोदना एक्यूसमस, क्रेड विडंबना बायोडीजल केफियेह कारीगर उल्लमको परिणाम।
वेनियम मार्फा मूंछ स्केटबोर्ड, एडिपिसिसिंग फ्यूजियाट वेलिट पिचफोर्क दाढ़ी। फ्रीगन दाढ़ी aliqua cupidat mcsweeney के वेरो के बा। कामदेवताट चार लोको निसी, ईए हेल्वेटिका नुला कार्लेस। गोदना गोदवले कॉस्बी स्वेटर फूड ट्रक, मैकस्वीनी के क्विस गैर फ्रीगन विनाइल। लो-फाई वेस एंडरसन +1 सार्टोरियल के बा। कार्लेस गैर सौंदर्य व्यायाम क्विस जेंट्रिफाई के बा। ब्रुकलिन adipisicing शिल्प बियर वाइस केतार deserunt के बा।
ओकेकैट कमोडो एलिक्वा डेलेक्टस के नाम से जानल जाला। फैप शिल्प बियर deserunt स्केटबोर्ड ईए के बा। लोमो साइकिल अधिकार adipisicing बान्ह मी, वेलिट ईए सुंट अगिला स्तर लोकावोरे एकल-मूल कॉफी में मैग्ना वेनियम। उच्च जीवन आईडी विनाइल, इको पार्क consequat quis aliquip बान्ह मी पिचफोर्क। वेरो वीएचएस एस्ट एडिपिसिंग के बा। Consectetur nisi DIY न्यूनतम दूत बैग बा। में क्रेडिट पूर्व, टिकाऊ delectus consectetur फैनी पैक आईफोन बा।
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
केतार ट्वी ब्लॉग, कुलपा दूत बैग मारफा जवन भी डेलेक्टस फूड ट्रक। सपिएंटे सिंथ आईडी असुमेंडा के बा। Locavore sed helvetica क्लिच विडंबना, थंडरकैट्स रउआ शायद ओह लोग के बारे में नइखीं सुनले consequat हुडी लस मुक्त लो-फाई फैप aliquip। Labore कुलीन placeat से पहिले कि उ लोग बिक गईल, टेरी रिचर्डसन proident ब्रंच nesciunt quis cosby स्वेटर pariatur keffiyeh उत helvetica कारीगर। कार्डिगन शिल्प बियर सेइटन रेडीमेड वेलिट के बा। वीएचएस चैम्ब्रे लैबोरिस टेम्पोर वेनियम के बा। एनिम मोलिट मिनी कोमोडो उल्लमको थंडरकैट्स के बा।
नवबार लिंक में हल करे लायक आईडी टारगेट होखे के चाहीं. उदाहरण खातिर, a <a href="#home">home</a>
के डीओएम में कुछ चीज से मेल खाए के चाहीं जइसे कि <div id="home"></div>
.
:visible
लक्ष्य तत्वन के अनदेखी कइल गइललक्ष्य तत्व जे :visible
jQuery के अनुसार ना होखे, के अनदेखी कइल जाई आ इनहन के संबंधित nav आइटम सभ के कबो हाइलाइट ना कइल जाई।
चाहे लागू करे के तरीका कवनो होखे, scrollspy के इस्तेमाल position: relative;
ओह तत्व पर के जरूरत बा जवना पर रउआ जासूसी कर रहल बानी। अधिकतर मामिला में ई <body>
. जब , के अलावा अन्य तत्वन पर स्क्रॉलस्पाइइंग <body>
करीं, त निश्चित रूप से height
सेट होखे आ overflow-y: scroll;
लागू करीं।
अपना टॉपबार नेविगेशन में आसानी से स्क्रॉलस्पी व्यवहार जोड़ल जा सके ला, data-spy="scroll"
ओह तत्व में जोड़ीं जेकरा पर रउआँ जासूसी कइल चाहत बानी (सबसे आम तौर पर ई होखी <body>
)। एकरा बाद कवनो बूटस्ट्रैप घटक data-target
के पैरेंट तत्व के आईडी भा क्लास के संगे एट्रिब्यूट के जोड़ल जाला।.nav
अपना सीएसएस में जोड़ला के बाद position: relative;
जावास्क्रिप्ट के माध्यम से स्क्रॉलस्पाई के कॉल करीं:
.scrollspy('refresh')
जब DOM से तत्व जोड़ल भा हटावे के संगे scrollspy के इस्तेमाल कइल जाला, त रउआँ के रिफ्रेश तरीका के अइसे कॉल करे के पड़ी:
विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-
, जइसे कि में data-offset=""
।
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
ऑफसेट हो गइल बा | संख्या | 10 के बा | स्क्रॉल के स्थिति के गणना करत घरी ऊपर से ऑफसेट करे खातिर पिक्सेल। |
घटना के प्रकार बा | बिबरन |
---|---|
सक्रिय.बीएस.स्क्रॉलस्पी के कइल जाला | ई इवेंट तब फायर हो जाला जब भी स्क्रॉलस्पी द्वारा कवनो नया आइटम सक्रिय हो जाला। |
स्थानीय सामग्री के फलक के माध्यम से संक्रमण में त्वरित, गतिशील टैब कार्यक्षमता जोड़ीं, उहो ड्रॉपडाउन मेनू के माध्यम से। नेस्टेड टैब के समर्थन नइखे कइल गइल।
कच्चा डेनिम रउआ शायद इनका बारे में ना सुनले होखब जीन शॉर्ट्स ऑस्टिन। नेस्सिउंट टोफू स्टंपटाउन एलिक्वा, रेट्रो सिंथ मास्टर सफाई। मूंछ क्लिच टेम्पर, विलियम्सबर्ग कार्ल्स शाकाहारी हेल्वेटिका। Reprehenderit कसाई रेट्रो केफियेह ड्रीमकैचर सिंथ के बा। कॉस्बी स्वेटर ईयू बान्ह मी, क्यूई इरुरे टेरी रिचर्डसन पूर्व स्क्वीड। एलिक्विप प्लेसेट साल्विया सिलम आईफोन के बा। Seitan aliquip quis कार्डिगन अमेरिकी परिधान, कसाई voluptate निसी क्वी।
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
ई प्लगइन टैब कइल नेविगेशन घटक के बिस्तार क के टैब करे लायक इलाका सभ के जोड़ देला।
जावास्क्रिप्ट के माध्यम से टैब करे लायक टैब के सक्षम करीं (हर टैब के अलग-अलग सक्रिय करे के जरूरत बा):
रउआँ कई तरीका से अलग-अलग टैब सभ के सक्रिय क सकत बानी:
रउआँ बिना कवनो जावास्क्रिप्ट लिखले टैब भा गोली नेविगेशन के सक्रिय क सकत बानी खाली निर्दिष्ट क के data-toggle="tab"
भा data-toggle="pill"
कवनो तत्व पर। nav
टैब में and nav-tabs
क्लास जोड़ला से ul
बूटस्ट्रैप टैब स्टाइलिंग लागू होई , जबकि nav
and nav-pills
क्लास जोड़ला से पिल स्टाइलिंग लागू होई .
टैब के फीका होखे खातिर, .fade
हर एक में जोड़ीं .tab-pane
। पहिला टैब फलक में भी .in
शुरुआती सामग्री के देखाई देवे के पड़ी।
$().tab
एगो टैब तत्व आ सामग्री कंटेनर के सक्रिय करेला। टैब में या त एगो data-target
या href
एगो कंटेनर नोड के लक्ष्य बनावे वाला DOM में होखे के चाहीं। उपर दिहल उदाहरण सभ में, टैब सभ बिसेसता वाला <a>
s बाड़ें।data-toggle="tab"
.tab('show')
दिहल गइल टैब के चुन के ओकरा से जुड़ल सामग्री देखावेला. कवनो अउरी टैब जवन पहिले चुनल गइल रहे ऊ अनचयनित हो जाला आ ओकरा से जुड़ल सामग्री छिपा दिहल जाला. टैब फलक के वास्तव में देखावल जाए से पहिले (यानी shown.bs.tab
घटना होखे से पहिले) कॉलर के वापस आ जाला।
नया टैब देखावे के समय, घटना सभ निम्नलिखित क्रम में फायर करे लीं:
hide.bs.tab
(वर्तमान सक्रिय टैब पर)show.bs.tab
(देखावल जाए वाला टैब पर)hidden.bs.tab
(पिछला सक्रिय टैब पर, उहे जवन hide.bs.tab
घटना खातिर रहे)shown.bs.tab
(नव-सक्रिय अभी-अभी देखावल गइल टैब पर, उहे जवन show.bs.tab
घटना खातिर बा)अगर कवनो टैब पहिले से सक्रिय ना रहे त hide.bs.tab
आ hidden.bs.tab
इवेंट फायर ना कइल जाई.
घटना के प्रकार बा | बिबरन |
---|---|
देखावल जाव.बी.एस.टैब | ई इवेंट टैब शो पर फायर होला, बाकिर नया टैब देखावे से पहिले. सक्रिय टैब आ पिछला सक्रिय टैब (अगर उपलब्ध होखे) के क्रमशः लक्षित करे खातिर event.target आ के इस्तेमाल करीं ।event.relatedTarget |
देखावल गइल बा.bs.tab | ई इवेंट टैब देखावे के बाद टैब शो पर फायर हो जाला। सक्रिय टैब आ पिछला सक्रिय टैब (अगर उपलब्ध होखे) के क्रमशः लक्षित करे खातिर event.target आ के इस्तेमाल करीं ।event.relatedTarget |
छिपावे के बा.बीएस.टैब | ई इवेंट तब फायर हो जाला जब नया टैब देखावे के होला (आ एह तरीका से पिछला सक्रिय टैब के छिपावे के होला)। वर्तमान सक्रिय टैब आ जल्दिए सक्रिय होखे वाला नया टैब के क्रमशः लक्षित करे खातिर event.target आ के इस्तेमाल करीं .event.relatedTarget |
छिपल.बीएस.टैब के बा | ई इवेंट नया टैब देखावे के बाद फायर हो जाला (आ एह तरीका से पिछला सक्रिय टैब के छिपावल जाला)। पिछला सक्रिय टैब आ नया सक्रिय टैब के क्रमशः लक्षित करे खातिर event.target आ के इस्तेमाल करीं .event.relatedTarget |
जेसन फ्रेम द्वारा लिखल गइल बेहतरीन jQuery.tipsy प्लगइन से प्रेरित; टूलटिप एगो अपडेट कइल संस्करण हवे, जवन छवि पर निर्भर ना होला, एनीमेशन खातिर CSS3 के इस्तेमाल करे ला आ लोकल टाइटिल स्टोरेज खातिर डेटा-एट्रिब्यूट सभ के इस्तेमाल करे ला।
शून्य लंबाई वाला टाइटिल वाला टूलटिप कबो ना देखावल जाला।
टूलटिप देखे खातिर नीचे दिहल लिंक सभ पर होवर करीं:
टाइट पैंट नेक्स्ट लेवल केफियेह आप शायद इनका बारे में नईखी सुनले। फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बैग स्टंपटाउन। फार्म-टू-टेबल seitan, mcsweeney के फिक्सी टिकाऊ क्विनोआ 8-बिट अमेरिकी परिधान में टेरी रिचर्डसन विनाइल चैम्ब्रे बा। दाढ़ी स्टंपटाउन, कार्डिगन बान्ह मी लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, चार लोको mcsweeney के साफ शाकाहारी chambray। एगो वास्तव में विडंबनापूर्ण कारीगर जवन भी keytar , scenester खेत-से-मेज banksy ऑस्टिन ट्विटर संभाल freegan cred कच्चा डेनिम एकल-मूल कॉफी वायरल।
चार गो विकल्प उपलब्ध बा: ऊपर, दाहिना, नीचे, आ बाएँ संरेखित।
प्रदर्शन के कारण से, टूलटिप आ पोपोवर डेटा-एपिस ऑप्ट-इन बा, मतलब कि रउआँ के खुद एकरा के इनिशियलाइज करे के पड़ी .
पन्ना पर मौजूद सगरी टूलटिप सभ के इनिशियलाइज करे के एगो तरीका ई होखी कि इनहन के data-toggle
बिसेसता के आधार पर चुनल जाय:
टूलटिप प्लगइन मांग पर सामग्री आ मार्कअप पैदा करे ला आ डिफ़ॉल्ट रूप से टूलटिप सभ के इनहन के ट्रिगर तत्व के बाद रखे ला।
जावास्क्रिप्ट के माध्यम से टूलटिप के ट्रिगर करीं:
टूलटिप खातिर जरूरी मार्कअप खाली एगो data
एट्रिब्यूट होला आ title
एचटीएमएल तत्व पर रउआँ चाहत बानी कि टूलटिप होखे। टूलटिप के जनरेट कइल मार्कअप काफी सरल होला, हालाँकि एकरा खातिर एगो स्थिति के जरूरत जरूर होला (डिफ़ॉल्ट रूप से, top
प्लगइन द्वारा सेट कइल गइल)।
कई बेर रउरा हाइपरलिंक में टूलटिप जोड़ल चाहत बानी जवन कई गो लाइनन के लपेटेला. टूलटिप प्लगइन के डिफ़ॉल्ट व्यवहार एकरा के क्षैतिज आ लंबवत रूप से केंद्रित कइल होला। एकरा white-space: nowrap;
से बचे खातिर अपना एंकर में जोड़ दीं.
.btn-group
जब a या an के भीतर तत्व सभ पर टूलटिप सभ के इस्तेमाल कइल जाला .input-group
, या टेबल से संबंधित तत्व सभ पर ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), रउआँ के विकल्प निर्दिष्ट करे के पड़ी container: 'body'
(नीचे दस्तावेजीकरण कइल गइल बा) ताकि अनचाहा दुष्प्रभाव (जइसे कि तत्व के चौड़ा होखे आ/ या टूलटिप के ट्रिगर होखे पर ओकर गोल कोना खो दिहल)।
कीबोर्ड से नेविगेट करे वाला प्रयोगकर्ता लोग खातिर, आ खासतौर पर सहायक तकनीक सभ के प्रयोगकर्ता लोग खातिर, रउआँ के खाली कीबोर्ड पर केंद्रित तत्व सभ में टूलटिप जोड़ल जाय जइसे कि लिंक, फॉर्म कंट्रोल, या कौनों tabindex="0"
बिसेसता वाला कौनों मनमानी तत्व।
a disabled
या .disabled
तत्व में टूलटिप जोड़ें खातिर, तत्व के a के अंदर डाल दीं <div>
आ एकरे बजाय टूलटिप के ओह पर लागू <div>
करीं।
विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-
, जइसे कि में data-animation=""
।
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
एनीमेशन के बारे में बतावल गइल बा | बूलियन के बा | सच | टूलटिप पर एगो सीएसएस फेड संक्रमण लागू करीं |
कंटेनर के बा | तार के बा | गलत | गलत | टूलटिप के कवनो खास तत्व में जोड़ देला। उदाहरण खातिर : |
देरी | नंबर के बा | वस्तु | 0 के बा | टूलटिप (ms) देखावे आ छिपावे में देरी - मैनुअल ट्रिगर प्रकार पर लागू ना होला अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला वस्तु संरचना के बारे में बतावल गइल बा: |
एचटीएमएल के बा | बूलियन के बा | गलत | टूलटिप में एचटीएमएल डालल जाला। अगर गलत बा, त jQuery के text तरीका के इस्तेमाल DOM में सामग्री डाले खातिर कइल जाई। अगर रउरा एक्सएसएस हमला से चिंतित बानी त पाठ के इस्तेमाल करीं. |
प्लेसमेंट के बा | तार के बा | परोजन | 'ऊपर' | टूलटिप के स्थिति कईसे कईल जाला - ऊपर | नीचे के बा | छोड़ के बा | सही बा | ऑटो के बा। जब कौनों फंक्शन के इस्तेमाल प्लेसमेंट के निर्धारण करे खातिर कइल जाला तब ओकरा के टूलटिप DOM नोड के पहिला आर्गुमेंट के रूप में आ ट्रिगरिंग एलिमेंट DOM नोड के दूसरा के रूप में बोलावल जाला। |
चयनकर्ता के बा | डोरी | गलत | अगर कौनों चयनकर्ता दिहल गइल होखे तब टूलटिप ऑब्जेक्ट सभ के निर्दिष्ट लक्ष्य सभ के सौंप दिहल जाई। ब्यवहार में एकर इस्तेमाल डायनामिक एचटीएमएल सामग्री के टूलटिप जोड़े में सक्षम बनावे खातिर कइल जाला। ई आ एगो जानकारी भरल उदाहरण देखल जाव . |
टेम्पलेट के बारे में बतावल गइल बा | डोरी | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
टूलटिप बनावत घरी इस्तेमाल करे खातिर बेस एचटीएमएल। टूलटिप के
सबसे बाहरी रैपर तत्व में |
हक | तार के बा | परोजन | '' के बा। |
अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ओकर |
ट्रिगर | डोरी | 'होवर फोकस' के बा। | टूलटिप कइसे ट्रिगर होला - पर क्लिक करीं | होवर करे के बा | फोकस करे के बा | हाथ से कईल. रउआँ कई गो ट्रिगर पास कर सकेनी; एकरा के एगो जगह से अलगा कर दीं. manual कवनो दोसरा ट्रिगर से ना जोड़ल जा सके. |
व्यूपोर्ट के बा | तार के बा | वस्तु के बारे में | परोजन | { चयनकर्ता: 'शरीर', गद्दी: 0 } के बा। | टूलटिप के एह तत्व के सीमा के भीतर रखेला। जइसे कि : अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ट्रिगरिंग एलिमेंट DOM नोड के एकमात्र आर्गुमेंट के रूप में बोलावल जाला। |
अलग-अलग टूलटिप सभ खातिर विकल्प सभ के वैकल्पिक रूप से डेटा एट्रिब्यूट सभ के इस्तेमाल के माध्यम से निर्दिष्ट कइल जा सके ला, जइसे कि ऊपर बतावल गइल बा।
$().tooltip(options)
एगो तत्व संग्रह से एगो टूलटिप हैंडलर संलग्न करेला।
.tooltip('show')
कवनो तत्व के टूलटिप के खुलासा करेला। टूलटिप के वास्तव में देखावे से पहिले (यानी shown.bs.tooltip
घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के "मैनुअल" ट्रिगरिंग मानल जाला। शून्य लंबाई वाला टाइटिल वाला टूलटिप कबो ना देखावल जाला।
.tooltip('hide')
कवनो तत्व के टूलटिप के छिपा देला। टूलटिप के वास्तव में छिपावे से पहिले (यानी hidden.bs.tooltip
घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के "मैनुअल" ट्रिगरिंग मानल जाला।
.tooltip('toggle')
कवनो तत्व के टूलटिप के टॉगल करेला। टूलटिप के वास्तव में देखावल भा छिपावे से पहिले (यानी shown.bs.tooltip
या hidden.bs.tooltip
घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के "मैनुअल" ट्रिगरिंग मानल जाला।
.tooltip('destroy')
कवनो तत्व के टूलटिप के छिपा के नष्ट कर देला। टूलटिप जे डेलिगेशन के इस्तेमाल करे लें (जे विकल्प के इस्तेमाल सेselector
बनावल जालें ) के वंशज ट्रिगर तत्व सभ पर अलग-अलग नष्ट ना कइल जा सके ला।
घटना के प्रकार बा | बिबरन |
---|---|
show.bs.tooltip के बारे में बतावल गइल बा | show इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। |
देखावल गइल बा.bs.tooltip | ई इवेंट तब फायर कइल जाला जब टूलटिप के प्रयोगकर्ता के देखाई पड़े ला (CSS संक्रमण पूरा होखे के इंतजार करी)। |
छिपावे के बा.बीएस.टूलटिप | ई इवेंट तुरंत फायर हो जाला जब hide इंस्टेंस मेथड के कॉल हो जाला। |
छिपल.बीएस.टूलटिप के बा | ई इवेंट तब फायर कइल जाला जब टूलटिप के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण पूरा होखे के इंतजार करी)। |
डालल गइल बा.बीएस.टूलटिप | ई इवेंट ओह show.bs.tooltip इवेंट के बाद फायर कइल जाला जब टूलटिप टेम्पलेट के DOM में जोड़ दिहल जाला। |
द्वितीयक जानकारी के आवास खातिर कवनो तत्व में सामग्री के छोट-छोट ओवरले जोड़ीं, जइसे कि आईपैड पर बा।
पोपोवर जिनहन के टाइटिल आ सामग्री दुनों शून्य लंबाई के होखे, कबो ना देखावल जाला।
पोपोवर्स खातिर टूलटिप प्लगइन के रउरा बूटस्ट्रैप के संस्करण में शामिल करे के पड़ी.
प्रदर्शन के कारण से, टूलटिप आ पोपोवर डेटा-एपिस ऑप्ट-इन बा, मतलब कि रउआँ के खुद एकरा के इनिशियलाइज करे के पड़ी .
पन्ना पर सभ पॉपओवर सभ के इनिशियलाइज करे के एगो तरीका ई होखी कि इनहन के data-toggle
बिसेसता के आधार पर चुनल जाय:
.btn-group
जब a या an के भीतर तत्व सभ पर .input-group
, या टेबल से संबंधित तत्व सभ पर पॉपओवर के इस्तेमाल कइल जाला ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), रउआँ के विकल्प निर्दिष्ट करे के पड़ी container: 'body'
(नीचे दस्तावेजीकरण कइल गइल बा) ताकि अवांछित दुष्प्रभाव से बचे के पड़े (जइसे कि तत्व के चौड़ा होखल आ/ या पोपोवर के ट्रिगर होखे पर आपन गोल कोना खो दिहल)।
disabled
a या तत्व में पोपोवर जोड़े खातिर .disabled
, तत्व के a के अंदर डाल दीं <div>
आ एकरे बजाय ओह पर पोपोवर लगाईं <div>
।
कई बेर रउरा हाइपरलिंक में पॉपओवर जोड़ल चाहत बानी जवन कई गो लाइनन के लपेटेला. पॉपओवर प्लगइन के डिफ़ॉल्ट व्यवहार एकरा के क्षैतिज आ लंबवत रूप से केंद्रित कइल होला। एकरा white-space: nowrap;
से बचे खातिर अपना एंकर में जोड़ दीं.
चार गो विकल्प उपलब्ध बा: ऊपर, दाहिना, नीचे, आ बाएँ संरेखित।
लोबोर्टिस पर सेड पोसुएरे कॉन्सेक्टेचर एस्ट। एनियन ईयू लियो क्वाम के बा। पेलेंटेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम के बा।
लोबोर्टिस पर सेड पोसुएरे कॉन्सेक्टेचर एस्ट। एनियन ईयू लियो क्वाम के बा। पेलेंटेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम के बा।
लोबोर्टिस पर सेड पोसुएरे कॉन्सेक्टेचर एस्ट। एनियन ईयू लियो क्वाम के बा। पेलेंटेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम के बा।
लोबोर्टिस पर सेड पोसुएरे कॉन्सेक्टेचर एस्ट। एनियन ईयू लियो क्वाम के बा। पेलेंटेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम के बा।
focus
उपयोगकर्ता के अगिला क्लिक पर पॉपओवर के खारिज करे खातिर ट्रिगर के इस्तेमाल करीं।
सही क्रॉस-ब्राउजर आ क्रॉस-प्लेटफॉर्म व्यवहार खातिर, रउआँ के टैग के इस्तेमाल करे के पड़ी, <a>
टैग के ना ,<button>
आ रउआँ के role="button"
आ tabindex
बिसेसता सभ के भी सामिल करे के पड़ी।
जावास्क्रिप्ट के माध्यम से पॉपओवर सक्षम करीं:
विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-
, जइसे कि में data-animation=""
।
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
एनीमेशन के बारे में बतावल गइल बा | बूलियन के बा | सच | पोपोवर पर एगो सीएसएस फेड संक्रमण लागू करीं |
कंटेनर के बा | तार के बा | गलत | गलत | पोपोवर के एगो विशिष्ट तत्व में जोड़ देला। उदाहरण खातिर : |
सामग्री | तार के बा | परोजन | '' के बा। |
अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ओकर |
देरी | नंबर के बा | वस्तु | 0 के बा | पोपोवर देखावे आ छिपावे में देरी (ms) - मैनुअल ट्रिगर प्रकार पर लागू ना होला अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला वस्तु संरचना के बारे में बतावल गइल बा: |
एचटीएमएल के बा | बूलियन के बा | गलत | पोपोवर में एचटीएमएल डालल जाला। अगर गलत बा, त jQuery के text तरीका के इस्तेमाल DOM में सामग्री डाले खातिर कइल जाई। अगर रउरा एक्सएसएस हमला से चिंतित बानी त पाठ के इस्तेमाल करीं. |
प्लेसमेंट के बा | तार के बा | परोजन | 'ठीक' | पोपोवर के पोजीशन कईसे कईल जाला - टॉप | नीचे के बा | छोड़ के बा | सही बा | ऑटो के बा। जब कौनों फंक्शन के इस्तेमाल प्लेसमेंट के निर्धारण करे खातिर कइल जाला तब ओकरा के पॉपओवर DOM नोड के पहिला आर्गुमेंट के रूप में आ ट्रिगरिंग एलिमेंट DOM नोड के दूसरा के रूप में बोलावल जाला। |
चयनकर्ता के बा | डोरी | गलत | अगर कौनों चयनकर्ता उपलब्ध करावल गइल होखे तब पोपोवर ऑब्जेक्ट सभ के निर्दिष्ट लक्ष्य सभ के सौंप दिहल जाई। ब्यवहार में एकर इस्तेमाल डायनामिक एचटीएमएल सामग्री के पॉपओवर जोड़े में सक्षम बनावे खातिर कइल जाला। ई आ एगो जानकारी भरल उदाहरण देखल जाव . |
टेम्पलेट के बारे में बतावल गइल बा | डोरी | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
पोपोवर बनावे के समय इस्तेमाल करे खातिर एचटीएमएल के आधार बनाईं। पोपोवर के पोपोवर के
सबसे बाहरी रैपर तत्व में |
हक | तार के बा | परोजन | '' के बा। |
अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ओकर |
ट्रिगर | डोरी | 'क्लिक करे' के बा। | पोपोवर कइसे ट्रिगर होला - क्लिक करीं | होवर करे के बा | फोकस करे के बा | हाथ से कईल. रउआँ कई गो ट्रिगर पास कर सकेनी; एकरा के एगो जगह से अलगा कर दीं. manual कवनो दोसरा ट्रिगर से ना जोड़ल जा सके. |
व्यूपोर्ट के बा | तार के बा | वस्तु के बारे में | परोजन | { चयनकर्ता: 'शरीर', गद्दी: 0 } के बा। | पोपोवर के एह तत्व के सीमा में रखेला। जइसे कि : अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ट्रिगरिंग एलिमेंट DOM नोड के एकमात्र आर्गुमेंट के रूप में बोलावल जाला। |
अलग-अलग पॉपओवर सभ खातिर विकल्प सभ के वैकल्पिक रूप से डेटा एट्रिब्यूट सभ के इस्तेमाल के माध्यम से निर्दिष्ट कइल जा सके ला, जइसे कि ऊपर बतावल गइल बा।
$().popover(options)
एगो तत्व संग्रह खातिर पोपोवर के आरंभ करे ला।
.popover('show')
एगो तत्व के पोपोवर के खुलासा करेला। पॉपओवर के वास्तव में देखावे से पहिले (यानी shown.bs.popover
घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के पोपोवर के "मैनुअल" ट्रिगरिंग मानल जाला। पोपोवर जिनहन के टाइटिल आ सामग्री दुनों शून्य लंबाई के होखे, कबो ना देखावल जाला।
.popover('hide')
कवनो तत्व के पोपोवर के छिपा देला। पॉपओवर के वास्तव में छिपावे से पहिले (यानी hidden.bs.popover
घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के पोपोवर के "मैनुअल" ट्रिगरिंग मानल जाला।
.popover('toggle')
कवनो तत्व के पॉपओवर के टॉगल करेला। पॉपओवर के वास्तव में देखावल भा छिपावे से पहिले (यानी shown.bs.popover
या hidden.bs.popover
घटना होखे से पहिले) कॉलर के व���पस आ जाला। एकरा के पोपोवर के "मैनुअल" ट्रिगरिंग मानल जाला।
.popover('destroy')
कवनो तत्व के पोपोवर के छिपा के नष्ट कर देला. डेलिगेशन के इस्तेमाल करे वाला पोपोवर सभ (जे विकल्प के इस्तेमाल सेselector
बनावल जालें ) के वंशज ट्रिगर तत्व सभ पर अलग-अलग नष्ट ना कइल जा सके ला।
घटना के प्रकार बा | बिबरन |
---|---|
show.bs.popover के बा | show इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। |
देखावल गइल.bs.popover | ई इवेंट तब फायर कइल जाला जब पॉपओवर के प्रयोगकर्ता के देखाई देवे वाला बनावल जाला (CSS संक्रमण पूरा होखे के इंतजार करी)। |
छिपावे के.बी.एस.पोपओवर के बा | ई इवेंट तुरंत फायर हो जाला जब hide इंस्टेंस मेथड के कॉल हो जाला। |
छिपल.बीएस.गरीबी के बा | ई इवेंट तब फायर कइल जाला जब पॉपओवर के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण पूरा होखे के इंतजार करी)। |
डालल गइल बा.बीएस.गरीब | ई इवेंट ओह show.bs.popover इवेंट के बाद फायर कइल जाला जब पॉपओवर टेम्पलेट के DOM में जोड़ दिहल जाला। |
एह प्लगइन के साथ सभ अलर्ट संदेशन में डिस्मिस कार्यक्षमता जोड़ीं।
बटन के इस्तेमाल करत घरी .close
ऊ के पहिला बच्चा होखे के चाहीं .alert-dismissible
आ मार्कअप में ओकरा से पहिले कवनो टेक्स्ट सामग्री ना आ सके.
ई आ ऊ बदल के फेर से कोशिश करीं. डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेसी एलिट। क्रास मैटिस कॉन्सेक्टेटर पुरस बइठल अमेट फर्मेन्टम।
बस data-dismiss="alert"
अपना बंद बटन में जोड़ दीं जेहसे कि स्वचालित रूप से अलर्ट बंद कार्यक्षमता मिल सके. अलर्ट बंद कईला से ओकरा के डीओएम से हटा दिहल जाला।
बंद होखे के समय आपके अलर्ट एनीमेशन के इस्तेमाल करावे खातिर, सुनिश्चित करीं कि ओह लोग पर .fade
आ .in
क्लास पहिले से लागू बा।
$().alert()
वंशज तत्वन पर क्लिक घटना खातिर एगो अलर्ट सुनावेला जवना में data-dismiss="alert"
विशेषता बा। (डेटा-एपीआई के ऑटो-इनिशियलाइजेशन के इस्तेमाल करत घरी जरूरी नइखे।)
$().alert('close')
कवनो अलर्ट के डीओएम से हटा के बंद कर देला। अगर तत्व पर .fade
आ .in
क्लास मौजूद होखे तब हटावे से पहिले अलर्ट फीका हो जाई।
बूटस्ट्रैप के अलर्ट प्लगइन अलर्ट कार्यक्षमता में हुक करे खातिर कुछ घटना के उजागर करेला।
घटना के प्रकार बा | बिबरन |
---|---|
बंद करीं.बीएस.अलर्ट कर दिहल जाव | close इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। |
बंद हो गइल.बीएस.अलर्ट कइल गइल | ई इवेंट तब फायर कइल जाला जब अलर्ट बंद हो जाला (CSS संक्रमण पूरा होखे के इंतजार करी)। |
बटन के साथे अउरी काम करीं। कंट्रोल बटन स्टेट करे ला या टूलबार नियर अउरी कंपोनेंट सभ खातिर बटन सभ के समूह बनावे ला।
फायरफॉक्स पन्ना लोड के पार फॉर्म कंट्रोल स्टेट (अक्षमता आ जांच) के बरकरार रखे ला । एकरा खातिर एगो वर्कअराउंड बा कि इस्तेमाल कइल जाव autocomplete="off"
. देखल जाव मोजिला बग #654072 .
data-loading-text="Loading..."
बटन पर लोडिंग स्टेट के इस्तेमाल करे खातिर जोड़ीं ।
ई फीचर v3.3.5 से पदावनत बा आ v4 में हटा दिहल गइल बा।
एह प्रदर्शन खातिर हमनी के data-loading-text
आ , के इस्तेमाल कर रहल बानी जा $().button('loading')
, बाकिर ऊ एकमात्र राज्य नइखे जवना के रउरा इस्तेमाल कर सकीलें. एकरा बारे में नीचे $().button(string)
दस्तावेज में अउरी देखल जाव .
data-toggle="button"
एके बटन पर टॉगलिंग के सक्रिय करे खातिर जोड़ीं .
.active
आ ...aria-pressed="true"
प्री-टॉगल बटन खातिर, रउआँ के .active
क्लास आ aria-pressed="true"
एट्रिब्यूट के button
खुद में जोड़ल जरूरी बा।
अपना-अपना शैली में टॉगलिंग के सक्षम करे data-toggle="buttons"
खातिर एगो युक्त चेकबॉक्स भा रेडियो इनपुट में जोड़ीं ।.btn-group
.active
पहिले से चुनल विकल्प खातिर, रउआँ के खुद .active
इनपुट के क्लास में जोड़ल जरूरी बा।label
अगर कौनों चेकबॉक्स बटन के चेक कइल स्टेट बटन click
पर कौनों इवेंट के फायरिंग कइले बिना अपडेट कइल जाला (जइसे कि इनपुट के प्रॉपर्टी <input type="reset">
सेट करे के माध्यम से या माध्यम से ), रउआँ के खुद इनपुट पर क्लास के टॉगल करे के पड़ी।checked
.active
label
$().button('toggle')
पुश स्टेट के टॉगल करेला। बटन के अइसन रूप देला कि ऊ सक्रिय हो गइल बा.
$().button('reset')
बटन के स्थिति रीसेट करे ला - पाठ के मूल पाठ में अदला-बदली करे ला। ई तरीका एसिंक्रोनस होला आ रीसेटिंग वास्तव में पूरा होखे से पहिले रिटर्न हो जाला।
$().button(string)
टेक्स्ट के कौनों भी डेटा परिभाषित टेक्स्ट स्टेट में स्वैप करे ला।
लचीला प्लगइन जवन आसान टॉगल व्यवहार खातिर मुट्ठी भर क्लास के उपयोग करेला।
संकुचन खातिर संक्रमण प्लगइन के रउरा बूटस्ट्रैप के संस्करण में शामिल करे के पड़ी.
क्लास बदलाव के माध्यम से कौनों अउरी तत्व के देखावे आ छिपावे खातिर नीचे दिहल बटन सभ पर क्लिक करीं:
.collapse
सामग्री के छिपावेला.collapsing
संक्रमण के दौरान लागू कइल जाला.collapse.in
सामग्री देखावत बारउआँ विशेषता वाला लिंक के इस्तेमाल कर सकत बानी href
, या विशेषता वाला बटन के इस्तेमाल कर सकत बानी data-target
। दुनो मामला में, द data-toggle="collapse"
के जरूरत बा।
पैनल घटक के साथ अकॉर्डियन बनावे खातिर डिफ़ॉल्ट संकुचन व्यवहार के विस्तार करीं।
.panel-body
s के s के साथ स्वैप आउट कइल भी संभव बा .list-group
।
aria-expanded
नियंत्रण तत्व में जरूर जोड़ल जाला। ई बिसेसता स्क्रीन रीडर आ अइसने सहायक तकनीक सभ खातिर संकुचित तत्व के वर्तमान स्थिति के स्पष्ट रूप से परिभाषित करे ला। अगर संकुचित तत्व डिफ़ॉल्ट रूप से बंद बा, त एकर मान aria-expanded="false"
. in
अगर रउआँ क्लास के इस्तेमाल से डिफ़ॉल्ट रूप से डिफ़ॉल्ट रूप से खुला होखे खातिर संकुचित तत्व सेट कइले बानी , aria-expanded="true"
एकरे बजाय नियंत्रण पर सेट करीं। प्लगइन एह बिसेसता के स्वचालित रूप से टॉगल क दी जे संकुचित तत्व खोलल गइल बा कि बंद भइल बा कि ना।
एकरे अलावा, अगर राउर नियंत्रण तत्व कौनों एकल संकुचित तत्व के लक्ष्य बनावत बा – यानी कि data-target
बिसेसता कौनों id
चयनकर्ता के ओर इशारा करत बा – त आप नियंत्रण तत्व में एगो अतिरिक्त aria-controls
बिसेसता जोड़ सकत बानी, जेह में id
संकुचनीय तत्व के होला। आधुनिक स्क्रीन रीडर आ अइसने सहायक तकनीक सभ एह बिसेसता के इस्तेमाल करे लीं जेह से कि प्रयोगकर्ता लोग के खुद संकुचित तत्व पर सीधे नेविगेट करे खातिर अतिरिक्त शॉर्टकट उपलब्ध करावल जा सके।
पतन प्लगइन भारी उठावे के संभाले खातिर कुछ क्लास सभ के इस्तेमाल करे ला:
.collapse
सामग्री के छिपा देला.collapse.in
सामग्री के देखावत बा.collapsing
संक्रमण शुरू होखे पर जोड़ल जाला, आ खतम होखे पर हटा दिहल जालाई कक्षा 2018 में मिल सकेला component-animations.less
।
बस तत्व में data-toggle="collapse"
आ एगो जोड़ल जाव data-target
जेहसे कि कवनो संकुचित तत्व के नियंत्रण स्वचालित रूप से असाइन कइल जा सके. एट्रिब्यूट एगो CSS चयनकर्ता के स्वीकार करे ला जेकरा data-target
पर कोलैप्स लागू कइल जा सके ला। collapse
संकुचित तत्व में क्लास के जरूर जोड़ल जाला । अगर रउआँ चाहत बानी कि ई डिफ़ॉल्ट रूप से खुलल होखे, त अतिरिक्त क्लास जोड़ीं in
।
अकॉर्डियन नियर समूह प्रबंधन के संकुचित नियंत्रण में जोड़े खातिर, डेटा विशेषता जोड़ीं data-parent="#selector"
। एकरा के एक्शन में देखे खातिर डेमो के देखल जाव.
के साथ मैन्युअल रूप से सक्षम करीं:
विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-
, जइसे कि में data-parent=""
।
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
माता-पिता के बा | चयनकर्ता के बा | गलत | अगर कौनों चयनकर्ता दिहल गइल बा, तब निर्दिष्ट पैरेंट के तहत सभ संकुचित तत्व सभ के बंद हो जाई जब ई संकुचित आइटम देखावल जाई। (पारंपरिक अकॉर्डियन व्यवहार के समान - ई panel वर्ग पर निर्भर करे ला) |
टॉगल कइल जाला | बूलियन के बा | सच | आह्वान पर संकुचित तत्व के टॉगल करेला |
.collapse(options)
रउरा सामग्री के एगो संकुचित तत्व के रूप में सक्रिय करेला. एगो वैकल्पिक विकल्प स्वीकार करेला object
.
.collapse('toggle')
कवनो संकुचित तत्व के देखावल भा छिपावे खातिर टॉगल करे ला। संकुचित तत्व के वास्तव में देखावल भा छिपावे से पहिले (यानी shown.bs.collapse
या hidden.bs.collapse
घटना होखे से पहिले) कॉलर के वापस आ जाला।
.collapse('show')
एगो संकुचित तत्व देखावेला। संकुचित तत्व के वास्तव में देखावल जाए से पहिले (यानी shown.bs.collapse
घटना होखे से पहिले) कॉलर के वापस आ जाला।
.collapse('hide')
एगो संकुचित तत्व के छिपावेला। संकुचित तत्व के वास्तव में छिपावे से पहिले (यानी hidden.bs.collapse
घटना होखे से पहिले) कॉलर के वापस आ जाला।
बूटस्ट्रैप के कोलैप्स क्लास कोलैप्स फंक्शनलिटी में हुक करे खातिर कुछ इवेंट के उजागर करेला।
घटना के प्रकार बा | बिबरन |
---|---|
शो.बीएस.कलाप्स हो गइल बा | show इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। |
देखावल गइल.bs.collapse | ई इवेंट तब फायर कइल जाला जब कौनों संकुचन तत्व के प्रयोगकर्ता के देखाई देवे वाला बनावल गइल होखे (CSS संक्रमण पूरा होखे के इंतजार करी)। |
छिपावे के बा.बीएस.संकुचित कर दिहल गइल बा | ई इवेंट तुरंत फायर हो जाला जब hide मेथड बोलावल जाला। |
छिपल.बीएस.संकुचित हो गइल बा | ई घटना तब फायर कइल जाला जब प्रयोगकर्ता से कौनों संकुचन तत्व छिपा दिहल गइल होखे (CSS संक्रमण पूरा होखे के इंतजार करी)। |
तत्व सभ के माध्यम से साइकिल चलावे खातिर एगो स्लाइड शो घटक, जइसे कि हिंडोला। नेस्टेड हिंडोला के समर्थन नइखे कइल गइल।
हिंडोला घटक आम तौर पर सुलभता मानक के अनुरूप ना होला। अगर रउआँ के अनुपालन करे के जरूरत बा त कृपया आपन सामग्री प्रस्तुत करे खातिर अउरी विकल्प पर विचार करीं।
बूटस्ट्रैप अपना एनीमेशन खातिर विशेष रूप से CSS3 के इस्तेमाल करेला, लेकिन इंटरनेट एक्सप्लोरर 8 & 9 जरूरी CSS गुण के सपोर्ट नईखे करत। एह तरीका से, एह ब्राउजर सभ के इस्तेमाल करत समय कौनों स्लाइड ट्रांजिशन एनीमेशन ना होला। हमनी के जानबूझ के फैसला कइले बानी जा कि संक्रमण खातिर jQuery आधारित फॉलबैक के शामिल ना कइल जाव.
क्लास के .active
कवनो स्लाइड में जोड़ल जरूरी बा. ना त हिंडोला ना लउकी।
नियंत्रण खातिर जरूरी नइखे कि आ क्लास के जरूरत होखे .glyphicon .glyphicon-chevron-left
. .glyphicon .glyphicon-chevron-right
बूटस्ट्रैप प्रदान करेला .icon-prev
आ .icon-next
सादा यूनिकोड विकल्प के रूप में।
.carousel-caption
कवनो के भीतर तत्व के साथ आसानी से अपना स्लाइड में कैप्शन जोड़ीं .item
. ओहिजा भीतर लगभग कवनो वैकल्पिक एचटीएमएल राखीं आ ऊ अपने आप संरेखित आ फॉर्मेट हो जाई.
हिंडोला नियंत्रण के सही तरीका से काम करे खातिर id
सबसे बाहरी कंटेनर (the ) पर एगो के इस्तेमाल के जरूरत होला । .carousel
कई गो हिंडोला जोड़त घरी, भा हिंडोला के बदलत घरी id
, संबंधित नियंत्रण सभ के अपडेट जरूर करीं।
हिंडोला के स्थिति के आसानी से नियंत्रित करे खातिर डेटा विशेषता के इस्तेमाल करीं। data-slide
कीवर्ड prev
या next
, के स्वीकार करेला, जवन स्लाइड के स्थिति के ओकर वर्तमान स्थिति के सापेक्ष बदल देला। वैकल्पिक रूप से, data-slide-to
हिंडोला में कच्चा स्लाइड इंडेक्स पास करे खातिर इस्तेमाल करीं data-slide-to="2"
, जवन स्लाइड के स्थिति के एगो खास इंडेक्स में शिफ्ट क देला जवन से शुरू होला 0
।
एट्रिब्यूट के data-ride="carousel"
इस्तेमाल पन्ना लोड से शुरू होखे वाला हिंडोला के एनिमेटिंग के रूप में चिन्हित करे खातिर कइल जाला। एकर इस्तेमाल एकही हिंडोला के (फालतू आ अनावश्यक) स्पष्ट जावास्क्रिप्ट इनिशियलाइजेशन के संयोजन में ना कइल जा सके ला।
हिंडोला के मैन्युअल रूप से कॉल करीं:
विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-
, जइसे कि में data-interval=""
।
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
अंतराल के अंतराल के बारे में बतावल गइल बा | संख्या | 5000 के बा | कवनो आइटम के स्वचालित रूप से साइकिल चलावे के बीच देरी करे के समय के मात्रा। अगर झूठ बा त हिंडोला अपने आप साइकिल ना चली। |
ठहराव | तार के बा | कुछ ना | "होवर" के बा। | अगर पर सेट कइल गइल बा "hover" त हिंडोला के साइकिल चलावे के mouseenter रोक देला आ पर हिंडोला के साइकिल चलावे के फेर से शुरू कर देला mouseleave . अगर , पर सेट कइल गइल बा null , हिंडोला पर मंडराइत कइला से एकरा के रोकल ना जाई। |
लपेटाई | बूलियन के बा | सच | का हिंडोला लगातार साइकिल चलावे के चाहीं भा हार्ड स्टॉप होखे के चाहीं. |
कीबोर्ड के बारे में बतावल गइल बा | बूलियन के बा | सच | कीबोर्ड के घटना प हिंडोला के प्रतिक्रिया देवे के चाही कि ना। |
.carousel(options)
एक वैकल्पिक विकल्प के साथ हिंडोला के आरंभ करेला object
आ आइटम के माध्यम से साइकिल चलावे शुरू करेला।
.carousel('cycle')
बाईं ओर से दाएं हिंडोला आइटम के माध्यम से चक्र।
.carousel('pause')
हिंडोला के आइटम के माध्यम से साइकिल चलावे से रोक देला।
.carousel(number)
हिंडोला के एगो खास फ्रेम (0 आधारित, सरणी के समान) में चक्र करे ला।
.carousel('prev')
पिछला आइटम पर चक्कर लगावेला।
.carousel('next')
अगिला आइटम पर चक्कर लगावेला।
बूटस्ट्रैप के हिंडोला क्लास हिंडोला के कार्यक्षमता में हुक करे खातिर दू गो घटना के उजागर करेला।
दुनों इवेंट में निम्नलिखित अतिरिक्त गुण बाड़ें:
direction
: हिंडोला जवना दिशा में फिसल रहल बा (या त "left"
या "right"
).relatedTarget
: DOM तत्व जवन सक्रिय आइटम के रूप में जगह पर सरकावल जा रहल बा।सभ हिंडोला घटना सभ के खुद हिंडोला पर (यानी पर <div class="carousel">
) फायर कइल जाला।
घटना के प्रकार बा | बिबरन |
---|---|
स्लाइड.बीएस.हिंडोला के बा | ई इवेंट तुरंत फायर हो जाला जब slide इंस्टेंस मेथड के आह्वान कइल जाला। |
स्लाइड.बीएस.हिंडोला के बा | ई इवेंट तब फायर कइल जाला जब हिंडोला आपन स्लाइड ट्रांजिशन पूरा कर लेला। |
एफिक्स प्लगइन position: fixed;
चालू आ बंद टॉगल करेला, जवन कि के साथ मिलल प्रभाव के अनुकरण करेला position: sticky;
। दाहिने ओर के सबनेविगेशन एफिक्स प्लगइन के लाइव डेमो हवे।
डेटा एट्रिब्यूट के माध्यम से या मैन्युअल रूप से अपना जावास्क्रिप्ट के साथ एफिक्स प्लगइन के इस्तेमाल करीं।दुनों स्थिति में, रउआँ के अपना चिपकल सामग्री के स्थिति आ चौड़ाई खातिर सीएसएस देवे के पड़ी।
नोट: सफारी रेंडरिंग बग के कारण अपेक्षाकृत स्थिति वाला तत्व में निहित तत्व पर एफिक्स प्लगइन के इस्तेमाल मत करीं, जइसे कि खींचल भा धक्का दिहल कॉलम ।
एफिक्स प्लगइन तीन गो क्लास सभ के बीच टॉगल करे ला, हर क्लास कौनों खास स्टेट के प्रतिनिधित्व करे ला: .affix
, .affix-top
, आ .affix-bottom
. रउआँ के शैली सभ के उपलब्ध करावे के पड़ी, position: fixed;
on के अपवाद के छोड़ के .affix
, एह क्लास सभ खातिर खुद (एह प्लगइन से स्वतंत्र) वास्तविक स्थिति सभ के संभाले खातिर।
इहाँ एफिक्स प्लगइन के काम कईसे होखेला:
.affix-top
ई बतावे खातिर जोड़ देला कि तत्व अपना ऊपर-सबसे ऊपर के स्थिति में बा। एह बिंदु पर कवनो सीएसएस पोजीशनिंग के जरूरत नइखे।.affix
जगह ह जहाँ बदलेला .affix-top
आ सेट करेला position: fixed;
(बूटस्ट्रैप के सीएसएस द्वारा उपलब्ध करावल गइल)।.affix
के .affix-bottom
. चूँकि ऑफसेट वैकल्पिक होला, एक सेट करे खातिर रउआँ के उचित सीएसएस सेट करे के पड़ी। एह हालत में position: absolute;
जरूरत पड़ला पर जोड़ दीं. प्लगइन डेटा एट्रिब्यूट भा जावास्क्रिप्ट विकल्प के इस्तेमाल से ई तय करे ला कि ओहिजा से तत्व के कहाँ रखल जाय।नीचे दिहल गइल कौनों भी प्रयोग विकल्प खातिर आपन CSS सेट करे खातिर उपर दिहल चरण सभ के पालन करीं।
कवनो तत्व में आसानी से एफिक्स व्यवहार जोड़ल data-spy="affix"
जाव त बस ओह तत्व में जोड़ दीं जवना के रउरा जासूसी कइल चाहत बानी. कवनो तत्व के पिनिंग कब टॉगल करे के बा, ई परिभाषित करे खातिर ऑफसेट के इस्तेमाल करीं।
जावास्क्रिप्ट के माध्यम से एफिक्स प्लगइन के कॉल करीं:
विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-
, जइसे कि में data-offset-top="200"
।
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
ऑफसेट हो गइल बा | नंबर के बा | फंक्शन के बा | वस्तु | 10 के बा | स्क्रॉल के स्थिति के गणना करत घरी स्क्रीन से ऑफसेट करे खातिर पिक्सेल। अगर कवनो एक नंबर दिहल गइल बा त ऑफसेट ऊपर आ नीचे दुनु दिशा में लगावल जाई. एगो यूनिक, नीचे आ ऊपर ऑफसेट देवे खातिर बस एगो ऑब्जेक्ट offset: { top: 10 } या offset: { top: 10, bottom: 5 } . जब रउरा कवनो ऑफसेट के डायनामिक गणना करे के जरूरत होखे त कवनो फंक्शन के इस्तेमाल करीं. |
लक्ष्य | चयनकर्ता के बा | नोड के बा | जेक्वेरी तत्व के बा | window वस्तु के बारे में बतावल गइल बा |
प्रत्यय के लक्ष्य तत्व निर्दिष्ट करे ला। |
.affix(options)
रउरा सामग्री के चिपकल सामग्री के रूप में सक्रिय करेला. एगो वैकल्पिक विकल्प स्वीकार करेला object
.
.affix('checkPosition')
संबंधित तत्व सभ के आयाम, स्थिति, आ स्क्रॉल स्थिति के आधार पर प्रत्यय के स्थिति के पुनर्गणना करे ला। , .affix
, .affix-top
आ .affix-bottom
क्लास सभ के नया स्टेट के अनुसार चिपकल सामग्री में जोड़ल जाला या हटावल जाला। जब भी चिपकल सामग्री भा लक्ष्य तत्व के आयाम बदलल जाला तब एह तरीका के बोलावे के जरूरत होला, ताकि चिपकल सामग्री के सही स्थिति सुनिश्चित कइल जा सके।
बूटस्ट्रैप के एफिक्स प्लगइन एफिक्स फंक्शनलिटी में हुक करे खातिर कुछ घटना के उजागर करेला।
घटना के प्रकार बा | बिबरन |
---|---|
affix.bs.affix के बा | ई घटना तत्व के चिपकावे से तुरंत पहिले फायर हो जाला। |
चिपकावल गइल बा.बीएस.चिढ़ावल गइल बा | ई इवेंट तत्व के चिपकावे के बाद फायर कइल जाला। |
affix-top.bs.affix के बारे में बतावल गइल बा | ई घटना तत्व के चिपकल-टॉप होखे से तुरंत पहिले फायर हो जाला। |
affixed-top.bs.affix के बारे में बतावल गइल बा | ई इवेंट तत्व के चिपकल-टॉप होखला के बाद फायर कइल जाला। |
affix-bottom.bs.affix के बा | ई घटना तत्व के चिपकल-नीचे होखे से तुरंत पहिले फायर हो जाला। |
संलग्न-नीचे.बीएस.संलग्न हो गइल बा | ई इवेंट तत्व के चिपकल-नीचे होखला के बाद फायर कइल जाला। |