जावास्क्रिप्ट
एक दर्जन से अधिक कस्टम jQuery प्लगइन्स के साथ बूटस्ट्रैप के घटकों को जीवंत करें। आसानी से उन सभी को शामिल करें, या एक-एक करके।
एक दर्जन से अधिक कस्टम jQuery प्लगइन्स के साथ बूटस्ट्रैप के घटकों को जीवंत करें। आसानी से उन सभी को शामिल करें, या एक-एक करके।
प्लगइन्स को व्यक्तिगत रूप से शामिल किया जा सकता है (बूटस्ट्रैप की अलग-अलग *.js
फाइलों का उपयोग करके), या सभी को एक साथ (का उपयोग करके bootstrap.js
या छोटा किया जा सकता है bootstrap.min.js
)।
दोनों bootstrap.js
और bootstrap.min.js
एक ही फाइल में सभी प्लगइन्स शामिल हैं। केवल एक शामिल करें।
कुछ प्लगइन्स और CSS घटक अन्य प्लगइन्स पर निर्भर करते हैं। यदि आप अलग-अलग प्लगइन्स शामिल करते हैं, तो डॉक्स में इन निर्भरताओं की जांच करना सुनिश्चित करें। यह भी ध्यान दें कि सभी प्लगइन्स jQuery पर निर्भर करते हैं (इसका मतलब है कि प्लगइन फाइलों से पहले jQuery को शामिल किया जाना चाहिए)। यह देखने के लिए हमसे परामर्श करेंbower.json
कि jQuery के कौन से संस्करण समर्थित हैं।
आप जावास्क्रिप्ट की एक भी लाइन लिखे बिना पूरी तरह से मार्कअप एपीआई के माध्यम से सभी बूटस्ट्रैप प्लगइन्स का उपयोग कर सकते हैं। यह बूटस्ट्रैप का प्रथम श्रेणी एपीआई है और प्लगइन का उपयोग करते समय आपका पहला विचार होना चाहिए।
उस ने कहा, कुछ स्थितियों में इस कार्यक्षमता को बंद करना वांछनीय हो सकता है। इसलिए, हम नामस्थान वाले दस्तावेज़ पर सभी ईवेंट को अनबाइंड करके डेटा विशेषता API को अक्षम करने की क्षमता भी प्रदान करते हैं data-api
। यह इस तरह दिखता है:
वैकल्पिक रूप से, एक विशिष्ट प्लगइन को लक्षित करने के लिए, बस प्लगइन का नाम नामस्थान के रूप में डेटा-एपीआई नेमस्पेस के साथ शामिल करें:
एक ही तत्व पर एकाधिक प्लगइन्स से डेटा विशेषताओं का उपयोग न करें। उदाहरण के लिए, एक बटन में टूलटिप और मोडल टॉगल दोनों नहीं हो सकते हैं। इसे पूरा करने के लिए, एक रैपिंग तत्व का उपयोग करें।
हम यह भी मानते हैं कि आपको पूरी तरह से जावास्क्रिप्ट एपीआई के माध्यम से सभी बूटस्ट्रैप प्लगइन्स का उपयोग करने में सक्षम होना चाहिए। सभी सार्वजनिक एपीआई एकल, श्रृंखलाबद्ध तरीके हैं, और संग्रह पर कार्रवाई की गई है।
सभी विधियों को एक वैकल्पिक विकल्प ऑब्जेक्ट को स्वीकार करना चाहिए, एक स्ट्रिंग जो किसी विशेष विधि को लक्षित करती है, या कुछ भी नहीं (जो डिफ़ॉल्ट व्यवहार के साथ एक प्लगइन शुरू करती है):
प्रत्येक प्लगइन एक संपत्ति पर अपने कच्चे कंस्ट्रक्टर को भी उजागर करता Constructor
है: $.fn.popover.Constructor
. यदि आप एक विशेष प्लगइन इंस्टेंस प्राप्त करना चाहते हैं, तो इसे सीधे किसी तत्व से पुनर्प्राप्त करें: $('[rel="popover"]').data('popover')
.
Constructor.DEFAULTS
आप प्लगइन के ऑब्जेक्ट को संशोधित करके प्लगइन के लिए डिफ़ॉल्ट सेटिंग्स बदल सकते हैं :
कभी-कभी अन्य UI फ्रेमवर्क के साथ बूटस्ट्रैप प्लगइन्स का उपयोग करना आवश्यक होता है। इन परिस्थितियों में, नामस्थान टकराव कभी-कभी हो सकता है। यदि ऐसा होता है, तो आप .noConflict
उस प्लगइन पर कॉल कर सकते हैं जिसका आप मूल्य वापस करना चाहते हैं।
बूटस्ट्रैप अधिकांश प्लगइन्स की अनूठी क्रियाओं के लिए कस्टम ईवेंट प्रदान करता है। आम तौर पर, ये एक इनफिनिटिव और पिछले कृदंत रूप में आते हैं - जहां show
एक घटना की शुरुआत में इनफिनिटिव (उदा।) ट्रिगर होता है, और इसके पिछले कृदंत रूप (उदा। shown
) को एक क्रिया के पूरा होने पर ट्रिगर किया जाता है।
3.0.0 तक, सभी बूटस्ट्रैप इवेंट्स नेमस्पेस्ड हैं।
सभी अनंत घटनाएँ preventDefault
कार्यक्षमता प्रदान करती हैं। यह किसी क्रिया के प्रारंभ होने से पहले उसके निष्पादन को रोकने की क्षमता प्रदान करता है।
बूटस्ट्रैप के प्रत्येक jQuery प्लगइन के संस्करण को VERSION
प्लगइन के निर्माता की संपत्ति के माध्यम से एक्सेस किया जा सकता है। उदाहरण के लिए, टूलटिप प्लगइन के लिए:
जावास्क्रिप्ट अक्षम होने पर बूटस्ट्रैप के प्लगइन्स विशेष रूप से सुंदर ढंग से वापस नहीं आते हैं। यदि आप इस मामले में उपयोगकर्ता अनुभव की परवाह करते हैं, तो अपने उपयोगकर्ताओं <noscript>
को स्थिति की व्याख्या करने के लिए उपयोग करें (और जावास्क्रिप्ट को फिर से कैसे सक्षम करें), और/या अपने स्वयं के कस्टम फ़ॉलबैक जोड़ें।
बूटस्ट्रैप आधिकारिक तौर पर प्रोटोटाइप या jQuery UI जैसी तृतीय-पक्ष JavaScript लाइब्रेरी का समर्थन नहीं करता है । घटनाओं के नाम के बावजूद .noConflict
, संगतता समस्याएं हो सकती हैं जिन्हें आपको स्वयं ठीक करने की आवश्यकता है।
सरल संक्रमण प्रभावों के लिए, transition.js
एक बार अन्य JS फ़ाइलों के साथ शामिल करें। यदि आप संकलित (या छोटा) का उपयोग कर रहे हैं bootstrap.js
, तो इसे शामिल करने की कोई आवश्यकता नहीं है—यह पहले से मौजूद है।
transitionEnd
Transition.js ईवेंट के साथ-साथ CSS ट्रांज़िशन एमुलेटर के लिए एक बुनियादी सहायक है । इसका उपयोग अन्य प्लगइन्स द्वारा CSS ट्रांज़िशन सपोर्ट की जाँच करने और हैंगिंग ट्रांज़िशन को पकड़ने के लिए किया जाता है।
निम्नलिखित जावास्क्रिप्ट स्निपेट का उपयोग करके संक्रमणों को विश्व स्तर पर अक्षम किया जा सकता है, जो transition.js
(या bootstrap.js
या bootstrap.min.js
, जैसा भी मामला हो) लोड होने के बाद आना चाहिए:
मॉडल सुव्यवस्थित हैं, लेकिन लचीले हैं, संवाद न्यूनतम आवश्यक कार्यक्षमता और स्मार्ट डिफ़ॉल्ट के साथ संकेत देता है।
सुनिश्चित करें कि एक मोडल न खोलें जबकि दूसरा अभी भी दिखाई दे रहा है। एक समय में एक से अधिक मोडल दिखाने के लिए कस्टम कोड की आवश्यकता होती है।
मोडल की उपस्थिति और/या कार्यक्षमता को प्रभावित करने वाले अन्य घटकों से बचने के लिए हमेशा अपने दस्तावेज़ में एक मॉडल के HTML कोड को शीर्ष-स्तरीय स्थिति में रखने का प्रयास करें।
मोबाइल उपकरणों पर मोडल का उपयोग करने के संबंध में कुछ चेतावनी हैं। विवरण के लिए हमारे ब्राउज़र समर्थन दस्तावेज़ देखें।
HTML5 अपने शब्दार्थ को कैसे परिभाषित करता है, इसके कारण autofocus
बूटस्ट्रैप मोडल में HTML विशेषता का कोई प्रभाव नहीं पड़ता है। समान प्रभाव प्राप्त करने के लिए, कुछ कस्टम JavaScript का उपयोग करें:
हेडर, बॉडी और फ़ुटर में क्रियाओं के सेट के साथ एक रेंडर किया गया मोडल।
नीचे दिए गए बटन पर क्लिक करके जावास्क्रिप्ट के माध्यम से एक मोडल टॉगल करें। यह नीचे की ओर खिसकेगा और पृष्ठ के शीर्ष से फीका हो जाएगा।
मोडल शीर्षक को , से , और स्वयं में जोड़ना role="dialog"
और , जोड़ना सुनिश्चित करें ।aria-labelledby="..."
.modal
role="document"
.modal-dialog
aria-describedby
इसके अतिरिक्त, आप ऑन के साथ अपने मोडल डायलॉग का विवरण दे सकते हैं .modal
।
YouTube वीडियो को मोडल में एम्बेड करने के लिए अतिरिक्त जावास्क्रिप्ट की आवश्यकता होती है, न कि बूटस्ट्रैप में स्वचालित रूप से प्लेबैक को रोकने के लिए और बहुत कुछ। अधिक जानकारी के लिए यह सहायक स्टैक ओवरफ़्लो पोस्ट देखें।
मॉडल में दो वैकल्पिक आकार होते हैं, जो संशोधक वर्गों के माध्यम से उपलब्ध होते हैं जिन्हें .modal-dialog
.
उन मोडल के लिए जो देखने में फीके होने के बजाय बस दिखाई देते हैं, .fade
अपने मोडल मार्कअप से क्लास को हटा दें।
एक मोडल के भीतर बूटस्ट्रैप ग्रिड सिस्टम का लाभ उठाने के लिए, बस .row
के भीतर घोंसला बनाएं .modal-body
और फिर सामान्य ग्रिड सिस्टम कक्षाओं का उपयोग करें।
बटनों का एक गुच्छा है जो सभी एक ही मोडल को ट्रिगर करते हैं, बस थोड़ा अलग सामग्री के साथ? किस बटन पर क्लिक किया गया था, इसके आधार पर मोडल की सामग्री को बदलने के लिए event.relatedTarget
HTML विशेषताओं data-*
( संभवतः jQuery के माध्यम से ) का उपयोग करें । विवरण के लिए मोडल इवेंट्स डॉक्स देखें relatedTarget
,
मोडल प्लगइन आपकी छिपी सामग्री को डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से मांग पर टॉगल करता है। .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 को स्वयं कॉल करने की सलाह देते हैं। यदि एक दूरस्थ URL प्रदान किया जाता है, तो सामग्री को एक बार 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 घटना की संपत्ति के रूप में उपलब्ध होता है। |
दिखाया गया.बीएस.मोडल | यह घटना तब सक्रिय हो जाती है जब मोडल को उपयोगकर्ता के लिए दृश्यमान बना दिया जाता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)। यदि एक क्लिक के कारण होता है, तो क्लिक किया गया तत्व relatedTarget घटना की संपत्ति के रूप में उपलब्ध होता है। |
छुपाएं.बीएस.मोडल | hide इंस्टेंस विधि को कॉल किए जाने पर इस घटना को तुरंत निकाल दिया जाता है। |
हिडन.बीएस.मोडल | इस घटना को निकाल दिया जाता है जब मोडल उपयोगकर्ता से छुपाया जा रहा है (सीएसएस संक्रमण पूरा होने की प्रतीक्षा करेगा)। |
लोडेड.बीएस.मोडल | इस घटना को निकाल दिया जाता है जब मोडल ने remote विकल्प का उपयोग करके सामग्री लोड की है। |
नेवबार, टैब और गोलियों सहित इस साधारण प्लगइन के साथ लगभग किसी भी चीज़ में ड्रॉपडाउन मेनू जोड़ें।
.open
डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से, ड्रॉपडाउन प्लगइन मूल सूची आइटम पर वर्ग को टॉगल करके छिपी हुई सामग्री (ड्रॉपडाउन मेनू) को टॉगल करता है ।
.dropdown-backdrop
मोबाइल उपकरणों पर, ड्रॉपडाउन खोलना मेनू के बाहर टैप करते समय ड्रॉपडाउन मेनू को बंद करने के लिए एक टैप क्षेत्र के रूप में जोड़ता है , उचित आईओएस समर्थन की आवश्यकता है। इसका मतलब है कि एक खुले ड्रॉपडाउन मेनू से एक अलग ड्रॉपडाउन मेनू पर स्विच करने के लिए मोबाइल पर एक अतिरिक्त टैप की आवश्यकता होती है।
नोट: data-toggle="dropdown"
एप्लिकेशन स्तर पर ड्रॉपडाउन मेनू बंद करने के लिए विशेषता पर भरोसा किया जाता है, इसलिए इसका हमेशा उपयोग करना एक अच्छा विचार है।
data-toggle="dropdown"
किसी ड्रॉपडाउन को चालू करने के लिए लिंक या बटन में जोड़ें ।
URL को लिंक बटनों के साथ अक्षुण्ण रखने के लिए, के data-target
बजाय विशेषता का उपयोग करें href="#"
।
जावास्क्रिप्ट के माध्यम से ड्रॉपडाउन को कॉल करें:
data-toggle="dropdown"
अभी भी आवश्यकभले ही आप अपने ड्रॉपडाउन को जावास्क्रिप्ट के माध्यम से कॉल करें या इसके बजाय डेटा-एपीआई का उपयोग करें, data-toggle="dropdown"
ड्रॉपडाउन के ट्रिगर तत्व पर हमेशा उपस्थित होना आवश्यक है।
कोई भी नहीं
$().dropdown('toggle')
किसी दिए गए नेवबार या टैब्ड नेविगेशन के ड्रॉपडाउन मेनू को टॉगल करता है।
सभी ड्रॉपडाउन घटनाओं को .dropdown-menu
मूल तत्व पर सक्रिय किया जाता है।
सभी ड्रॉपडाउन घटनाओं में एक relatedTarget
संपत्ति होती है, जिसका मूल्य टॉगलिंग एंकर तत्व होता है।
घटना प्रकार | विवरण |
---|---|
शो.बीएस.ड्रॉपडाउन | जब शो इंस्टेंस विधि कहा जाता है तो यह घटना तुरंत सक्रिय हो जाती है। |
दिखाया गया.bs.ड्रॉपडाउन | यह घटना तब सक्रिय होती है जब उपयोगकर्ता को ड्रॉपडाउन दिखाई देता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)। |
छुपाएं.bs.ड्रॉपडाउन | जब छुपा इंस्टेंस विधि कहा जाता है तो इस घटना को तुरंत निकाल दिया जाता है। |
छिपा हुआ.bs.ड्रॉपडाउन | यह घटना तब सक्रिय होती है जब ड्रॉपडाउन उपयोगकर्ता से छिपा हुआ समाप्त हो जाता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)। |
स्क्रॉलस्पी प्लगइन स्क्रॉल स्थिति के आधार पर स्वचालित रूप से एनएवी लक्ष्यों को अपडेट करने के लिए है। नेवबार के नीचे के क्षेत्र को स्क्रॉल करें और सक्रिय वर्ग परिवर्तन देखें। ड्रॉपडाउन उप आइटम भी हाइलाइट किए जाएंगे।
एड लेगिंग्स कीटार, ब्रंच आईडी आर्ट पार्टी डोलर लेबर। पिचफोर्क यर एनिम लो-फाई इससे पहले कि वे क्यूई बिक गए। टम्बलर फार्म-टू-टेबल साइकिल अधिकार जो भी हो। एनिम केफियेह कार्ल्स कार्डिगन। वेलिट सीतान मैकस्वीनी का फोटो बूथ 3 वुल्फ मून इरुरे। कॉस्बी स्वेटर लोमो जीन शॉर्ट्स, विलियम्सबर्ग हूडि मिनिम क्यूई आपने शायद उनके बारे में नहीं सुना होगा और कार्डिगन ट्रस्ट फंड अपराधी बायोडीजल वेस एंडरसन एस्थेटिक। निहिल ने टैटू गुदवाया आरोप, क्रेडिट विडंबना बायोडीजल केफियेह कारीगर उलमको परिणाम।
वेनियम मार्फा मूंछें स्केटबोर्ड, एडिपिसिसिंग फुगियाट वेलिट पिचफोर्क दाढ़ी। फ़्रीगन बियर्ड एलिका क्यूपिडेटाट मैकस्वीनी का वेरो. कामदेव चार लोको निसी, ईए हेल्वेटिका नल्ला कार्ल्स। टैटू वाला कॉस्बी स्वेटर फूड ट्रक, मैकस्वीनी का क्विस नॉन फ्रीगन विनाइल। लो-फाई वेस एंडरसन +1 सार्टोरियल। कार्ल्स नॉन एस्थेटिक एक्सरसाइज क्विज़ जेंट्रीफाई। ब्रुकलिन एडिपिसिसिंग क्राफ्ट बीयर वाइस कीटर डेसेरुंट।
ओसीकैट कमोडो एलिका डेलेक्टस। फैप क्राफ्ट बियर डेज़रुंट स्केटबोर्ड ईए। लोमो साइकिल राइट्स एडिपिसिसिंग बन मील, वेलिट ईए सनट नेक्स्ट लेवल लोकावोर सिंगल-ओरिजिन कॉफ़ी इन मैग्ना वेनियम। हाई लाइफ आईडी विनाइल, इको पार्क कॉन्सेक्वेट क्विस एलिक्विप बन मील पिचफोर्क। वेरो वीएचएस एस्ट एडिपिसिसिंग। कॉन्सेक्टेटूर निसी DIY मिनिम मैसेंजर बैग। क्रेडिट एक्स इन, सस्टेनेबल डेलेक्टस कॉन्सेक्टेचर फैनी पैक आईफोन।
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.
Keytar twee ब्लॉग, culpa मैसेंजर बैग मारफा जो भी डेलेक्टस फूड ट्रक है। Sapiente synth id ग्रहण. लोकावोर सेड हेल्वेटिका क्लिच विडंबना, थंडरकैट्स जो आपने शायद उनके बारे में नहीं सुना है, परिणामस्वरूप हूडि ग्लूटेन-फ्री लो-फाई फैप एलिक्विप। लैबोरे एलीट प्लेसैट से पहले वे बिक गए, टेरी रिचर्डसन प्रॉडेंट ब्रंच नेस्क्यूंट क्विस कॉस्बी स्वेटर परियातुर केफियेह यूट हेल्वेटिका कारीगर। कार्डिगन क्राफ्ट बीयर सीटन रेडीमेड वेलिट। वीएचएस चेम्ब्रे लेबरिस टेम्पोर वेनिअम। एनिम मोलिट मिनिम कमोडो उलमको थंडरकैट्स।
नेवबार लिंक में समाधान योग्य आईडी लक्ष्य होने चाहिए। उदाहरण के लिए, <a href="#home">home</a>
डोम में किसी चीज़ के अनुरूप होना चाहिए जैसे <div id="home"></div>
.
:visible
लक्षित तत्वों पर ध्यान नहीं दिया गयालक्ष्य तत्व जो :visible
jQuery के अनुसार नहीं हैं उन्हें अनदेखा कर दिया जाएगा और उनके संबंधित एनएवी आइटम को कभी भी हाइलाइट नहीं किया जाएगा।
कार्यान्वयन विधि से कोई फर्क नहीं पड़ता, स्क्रॉलस्पी को position: relative;
उस तत्व पर उपयोग की आवश्यकता होती है जिस पर आप जासूसी कर रहे हैं। ज्यादातर मामलों में यह है <body>
। के अलावा अन्य तत्वों पर स्क्रॉल करते समय , एक सेट और लागू <body>
होना सुनिश्चित करें ।height
overflow-y: scroll;
अपने टॉपबार नेविगेशन में आसानी से स्क्रॉलस्पी व्यवहार जोड़ने data-spy="scroll"
के लिए, उस तत्व में जोड़ें जिसे आप जासूसी करना चाहते हैं (आमतौर पर यह होगा <body>
)। फिर किसी बूटस्ट्रैप घटक data-target
के मूल तत्व की आईडी या वर्ग के साथ विशेषता जोड़ें।.nav
अपने सीएसएस में जोड़ने के बाद position: relative;
, जावास्क्रिप्ट के माध्यम से स्क्रॉलस्पी को कॉल करें:
.scrollspy('refresh')
डीओएम से तत्वों को जोड़ने या हटाने के संयोजन के साथ स्क्रॉलस्पी का उपयोग करते समय, आपको रीफ्रेश विधि को इस तरह कॉल करना होगा:
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-
, जैसा कि में है data-offset=""
।
नाम | प्रकार | चूक | विवरण |
---|---|---|---|
ओफ़्सेट | संख्या | 10 | स्क्रॉल की स्थिति की गणना करते समय ऊपर से ऑफ़सेट करने के लिए पिक्सेल। |
घटना प्रकार | विवरण |
---|---|
सक्रिय करें.bs.scrollspy | जब भी कोई नया आइटम स्क्रॉलस्पी द्वारा सक्रिय हो जाता है तो यह घटना सक्रिय हो जाती है। |
स्थानीय सामग्री के पैन के माध्यम से संक्रमण के लिए त्वरित, गतिशील टैब कार्यक्षमता जोड़ें, यहां तक कि ड्रॉपडाउन मेनू के माध्यम से भी। नेस्टेड टैब समर्थित नहीं हैं।
कच्चा डेनिम आपने शायद उनके बारे में नहीं सुना होगा जीन शॉर्ट्स ऑस्टिन। नेस्कियंट टोफू स्टंपटाउन एलिका, रेट्रो सिंथेस मास्टर क्लीन्ज़। मूंछें क्लिच टेम्पोर, विलियम्सबर्ग कार्ल्स वेगन हेल्वेटिका। रेप्रेहेंडरिट कसाई रेट्रो केफियेह ड्रीमकैचर सिंथेस। कॉस्बी स्वेटर यू बान मील, क्वी इरुरे टेरी रिचर्डसन एक्स स्क्वीड। एलिकिप प्लेसैट साल्विया सिलम आईफोन। सीटान एलिक्विप क्विस कार्डिगन अमेरिकन अपैरल, कसाई वोलुप्टेट निसी क्यूई।
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
और कक्षाएं जोड़ने से बूटस्ट्रैप टैब स्टाइल लागू होगा , जबकि और कक्षाएं जोड़ने पर पिल स्टाइल लागू होगी ।nav-tabs
ul
nav
nav-pills
टैब को फीका करने के लिए, .fade
प्रत्येक में जोड़ें .tab-pane
. पहले टैब फलक को भी .in
प्रारंभिक सामग्री को दृश्यमान बनाना होगा।
$().tab
एक टैब तत्व और सामग्री कंटेनर को सक्रिय करता है। टैब में या तो एक data-target
या एक href
लक्ष्यीकरण एक कंटेनर नोड होना चाहिए। उपरोक्त उदाहरणों में, टैब विशेषताओं के <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.टैब | एक टैब दिखाए जाने के बाद यह ईवेंट टैब शो पर सक्रिय होता है। क्रमशः सक्रिय टैब और पिछले सक्रिय टैब (यदि उपलब्ध हो) का उपयोग करें event.target और लक्षित करें।event.relatedTarget |
छुपाएं.bs.टैब | यह घटना तब सक्रिय होती है जब एक नया टैब दिखाया जाना है (और इस प्रकार पिछला सक्रिय टैब छिपाया जाना है)। वर्तमान सक्रिय टैब और नए शीघ्र-से-सक्रिय टैब को क्रमशः उपयोग event.target और लक्षित करने के लिए।event.relatedTarget |
हिडन.बीएस.टैब | एक नया टैब दिखाए जाने के बाद यह घटना सक्रिय होती है (और इस प्रकार पिछला सक्रिय टैब छिपा हुआ है)। पिछले सक्रिय टैब और नए सक्रिय टैब को क्रमशः उपयोग event.target और लक्षित करने के लिए।event.relatedTarget |
जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tips प्लगइन से प्रेरित; टूलटिप्स एक अद्यतन संस्करण हैं, जो छवियों पर भरोसा नहीं करते हैं, एनिमेशन के लिए CSS3 का उपयोग करते हैं, और स्थानीय शीर्षक भंडारण के लिए डेटा-विशेषताएं।
शून्य-लंबाई वाले शीर्षक वाले टूलटिप्स कभी प्रदर्शित नहीं होते हैं।
टूलटिप्स देखने के लिए नीचे दिए गए लिंक पर होवर करें:
अगले स्तर की टाइट पैंट आपने शायद उनके बारे में नहीं सुना होगा। फोटो बूथ दाढ़ी कच्ची डेनिम लेटरप्रेस शाकाहारी मैसेंजर बैग स्टंपटाउन। फार्म-टू-टेबल सीटन, मैकस्वीनी के फिक्स टिकाऊ क्विनोआ 8-बिट अमेरिकी परिधान में टेरी रिचर्डसन विनाइल चेम्ब्रे है। बियर्ड स्टंपटाउन, कार्डिगन बन मील लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, फोर लोको मैकस्वीनी का शुद्ध शाकाहारी चंब्रे। वास्तव में एक विडंबनापूर्ण कारीगर जो कुछ भी कीटर , सीनस्टर फार्म-टू-टेबल बैंकी ऑस्टिन ट्विटर हैंडल फ्रीगन क्रेडिट रॉ डेनिम सिंगल-ओरिजिन कॉफी वायरल।
चार विकल्प उपलब्ध हैं: ऊपर, दाएँ, नीचे और बाएँ संरेखित।
प्रदर्शन कारणों से, टूलटिप और पॉपओवर डेटा-एपिस ऑप्ट-इन हैं, जिसका अर्थ है कि आपको उन्हें स्वयं प्रारंभ करना होगा ।
किसी पृष्ठ पर सभी टूलटिप्स को प्रारंभ करने का एक तरीका यह होगा कि उन्हें उनकी data-toggle
विशेषता के आधार पर चुना जाए:
टूलटिप प्लगइन मांग पर सामग्री और मार्कअप उत्पन्न करता है, और डिफ़ॉल्ट रूप से टूलटिप्स को उनके ट्रिगर तत्व के बाद रखता है।
जावास्क्रिप्ट के माध्यम से टूलटिप को ट्रिगर करें:
टूलटिप के लिए आवश्यक मार्कअप केवल एक data
विशेषता है और title
HTML तत्व पर आप टूलटिप रखना चाहते हैं। टूलटिप का उत्पन्न मार्कअप अपेक्षाकृत सरल है, हालांकि इसके लिए एक स्थिति की आवश्यकता होती है (डिफ़ॉल्ट रूप से, top
प्लगइन द्वारा सेट)।
कभी-कभी आप हाइपरलिंक में एक टूलटिप जोड़ना चाहते हैं जो कई पंक्तियों को लपेटता है। टूलटिप प्लगइन का डिफ़ॉल्ट व्यवहार इसे क्षैतिज और लंबवत रूप से केन्द्रित करना है। white-space: nowrap;
इससे बचने के लिए अपने एंकर में शामिल करें ।
.btn-group
a या a के भीतर .input-group
या तालिका-संबंधित तत्वों ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, ) के तत्वों पर टूलटिप्स का उपयोग करते समय , आपको अवांछित दुष्प्रभावों से बचने <tfoot>
के लिए विकल्प (नीचे प्रलेखित) निर्दिष्ट करना होगा (जैसे कि तत्व व्यापक रूप से बढ़ रहा है और/ container: 'body'
या टूलटिप के चालू होने पर इसके गोल कोनों को खोना)।
कीबोर्ड से नेविगेट करने वाले उपयोगकर्ताओं के लिए, और विशेष रूप से सहायक तकनीकों के उपयोगकर्ताओं के लिए, आपको केवल कीबोर्ड-फ़ोकस करने योग्य तत्वों जैसे लिंक, प्रपत्र नियंत्रण, या किसी tabindex="0"
विशेषता वाले किसी भी मनमाने तत्व में टूलटिप्स जोड़ना चाहिए।
disabled
किसी या .disabled
तत्व में टूलटिप जोड़ने के लिए , तत्व को a के अंदर रखें और इसके बजाय <div>
टूलटिप को उस पर लागू करें ।<div>
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-
, जैसा कि में है data-animation=""
।
नाम | टाइप | चूक | विवरण |
---|---|---|---|
एनीमेशन | बूलियन | सच | टूलटिप पर CSS फ़ेड ट्रांज़िशन लागू करें |
पात्र | स्ट्रिंग | असत्य | असत्य | टूलटिप को एक विशिष्ट तत्व में जोड़ता है। उदाहरण |
देरी | संख्या | वस्तु | 0 | टूलटिप (एमएस) दिखाने और छिपाने में देरी - मैन्युअल ट्रिगर प्रकार पर लागू नहीं होती है यदि एक नंबर की आपूर्ति की जाती है, तो देरी को छिपाने/दिखाने दोनों पर लागू किया जाता है वस्तु संरचना है: |
एचटीएमएल | बूलियन | असत्य | टूलटिप में HTML डालें। यदि गलत है, text तो DOM में सामग्री डालने के लिए jQuery की विधि का उपयोग किया जाएगा। यदि आप XSS हमलों के बारे में चिंतित हैं तो टेक्स्ट का उपयोग करें। |
प्लेसमेंट | स्ट्रिंग | समारोह | 'ऊपर' | टूलटिप की स्थिति कैसे बनाएं - शीर्ष | नीचे | बाएं | सही | ऑटो। जब किसी फ़ंक्शन का उपयोग प्लेसमेंट को निर्धारित करने के लिए किया जाता है, तो इसे टूलटिप DOM नोड को इसके पहले तर्क के रूप में और ट्रिगर करने वाले तत्व DOM नोड को इसके दूसरे के रूप में कहा जाता है। |
चयनकर्ता | डोरी | असत्य | यदि कोई चयनकर्ता प्रदान किया जाता है, तो टूलटिप ऑब्जेक्ट निर्दिष्ट लक्ष्यों को सौंपे जाएंगे। व्यवहार में, इसका उपयोग गतिशील HTML सामग्री को टूलटिप्स जोड़ने के लिए सक्षम करने के लिए किया जाता है। इसे और एक सूचनात्मक उदाहरण देखें । |
टेम्पलेट | डोरी | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
टूलटिप बनाते समय उपयोग के लिए आधार HTML। टूलटिप
सबसे बाहरी आवरण तत्व में |
शीर्षक | स्ट्रिंग | समारोह | '' | डिफ़ॉल्ट शीर्षक मान यदि यदि कोई फ़ंक्शन दिया जाता है, तो उसे उस तत्व के संदर्भ सेट के साथ बुलाया जाएगा, |
चालू कर देना | डोरी | 'होवर फोकस' | टूलटिप कैसे ट्रिगर होता है - क्लिक करें | होवर | फोकस | नियमावली। आप कई ट्रिगर पास कर सकते हैं; उन्हें एक स्थान से अलग करें। 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 इंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है। |
दिखाया गया.बीएस.टूलटिप | इस घटना को तब सक्रिय किया जाता है जब टूलटिप को उपयोगकर्ता के लिए दृश्यमान बना दिया जाता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)। |
Hide.bs.tooltip | hide इंस्टेंस विधि को कॉल किए जाने पर इस घटना को तुरंत निकाल दिया जाता है। |
हिडन.बीएस.टूलटिप | यह घटना तब सक्रिय हो जाती है जब टूलटिप उपयोगकर्ता से छिपा हुआ समाप्त हो जाता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)। |
इन्सर्टेड.बीएस.टूलटिप | यह घटना उस show.bs.tooltip घटना के बाद सक्रिय हो जाती है जब टूलटिप टेम्पलेट को DOM में जोड़ा जाता है। |
माध्यमिक जानकारी रखने के लिए किसी भी तत्व में सामग्री के छोटे ओवरले जोड़ें, जैसे कि iPad पर।
पॉपओवर जिनके शीर्षक और सामग्री दोनों शून्य-लंबाई वाले हैं, कभी प्रदर्शित नहीं होते हैं।
पॉपओवर को टूलटिप प्लगइन को आपके बूटस्ट्रैप के संस्करण में शामिल करने की आवश्यकता होती है।
प्रदर्शन कारणों से, टूलटिप और पॉपओवर डेटा-एपिस ऑप्ट-इन हैं, जिसका अर्थ है कि आपको उन्हें स्वयं प्रारंभ करना होगा ।
किसी पृष्ठ पर सभी पॉपओवर प्रारंभ करने का एक तरीका यह होगा कि आप उन्हें उनकी data-toggle
विशेषता के अनुसार चुनें:
.btn-group
a या a के भीतर .input-group
या तालिका-संबंधित तत्वों ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, ) के तत्वों पर पॉपओवर का उपयोग करते समय , आपको अवांछित दुष्प्रभावों से बचने <tfoot>
के लिए विकल्प (नीचे प्रलेखित) निर्दिष्ट करना होगा (जैसे कि तत्व व्यापक रूप से बढ़ रहा है और/ container: 'body'
या अपने गोल कोनों को खोना जब पॉपओवर शुरू हो जाता है)।
disabled
किसी या .disabled
तत्व में पॉपओवर जोड़ने के लिए , तत्व को a के अंदर रखें और इसके बजाय <div>
पॉपओवर लागू करें ।<div>
कभी-कभी आप एक हाइपरलिंक में एक पॉपओवर जोड़ना चाहते हैं जो कई पंक्तियों को लपेटता है। पॉपओवर प्लगइन का डिफ़ॉल्ट व्यवहार इसे क्षैतिज और लंबवत रूप से केंद्रित करना है। white-space: nowrap;
इससे बचने के लिए अपने एंकर में शामिल करें ।
चार विकल्प उपलब्ध हैं: ऊपर, दाएँ, नीचे और बाएँ संरेखित।
सेड पोसुरे कॉन्सेक्टेटुर एस्ट और लोबोर्टिस। ऐनियन यू लियो क्वाम। पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनेटिस वेस्टिबुलम।
सेड पोसुरे कॉन्सेक्टेटुर एस्ट और लोबोर्टिस। ऐनियन यू लियो क्वाम। पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनेटिस वेस्टिबुलम।
सेड पोसुरे कॉन्सेक्टेटुर एस्ट और लोबोर्टिस। ऐनियन यू लियो क्वाम। पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनेटिस वेस्टिबुलम।
सेड पोसुरे कॉन्सेक्टेटुर एस्ट और लोबोर्टिस। ऐनियन यू लियो क्वाम। पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनेटिस वेस्टिबुलम।
focus
उपयोगकर्ता द्वारा किए जाने वाले अगले क्लिक पर पॉपओवर को खारिज करने के लिए ट्रिगर का उपयोग करें ।
उचित क्रॉस-ब्राउज़र और क्रॉस-प्लेटफ़ॉर्म व्यवहार के लिए, आपको टैग का उपयोग करना चाहिए, <a>
टैग का नहीं ,<button>
और आपको role="button"
और tabindex
विशेषताओं को भी शामिल करना चाहिए।
जावास्क्रिप्ट के माध्यम से पॉपओवर सक्षम करें:
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-
, जैसा कि में है data-animation=""
।
नाम | टाइप | चूक | विवरण |
---|---|---|---|
एनीमेशन | बूलियन | सच | पॉपओवर के लिए CSS फ़ेड ट्रांज़िशन लागू करें |
पात्र | स्ट्रिंग | असत्य | असत्य | पॉपओवर को एक विशिष्ट तत्व में जोड़ता है। उदाहरण |
विषय | स्ट्रिंग | समारोह | '' | डिफ़ॉल्ट सामग्री मान यदि यदि कोई फ़ंक्शन दिया जाता है, तो इसे इसके |
देरी | संख्या | वस्तु | 0 | पॉपओवर दिखाने और छिपाने में देरी (एमएस) - मैन्युअल ट्रिगर प्रकार पर लागू नहीं होती यदि एक नंबर की आपूर्ति की जाती है, तो देरी को छिपाने/दिखाने दोनों पर लागू किया जाता है वस्तु संरचना है: |
एचटीएमएल | बूलियन | असत्य | पॉपओवर में HTML डालें। यदि गलत है, text तो DOM में सामग्री डालने के लिए jQuery की विधि का उपयोग किया जाएगा। यदि आप XSS हमलों के बारे में चिंतित हैं तो टेक्स्ट का उपयोग करें। |
प्लेसमेंट | स्ट्रिंग | समारोह | 'सही' | पॉपओवर की स्थिति कैसे बनाएं - शीर्ष | नीचे | बाएं | सही | ऑटो। जब किसी फ़ंक्शन का उपयोग प्लेसमेंट को निर्धारित करने के लिए किया जाता है, तो इसे पॉपओवर DOM नोड को इसके पहले तर्क के रूप में और ट्रिगर करने वाले तत्व DOM नोड को इसके दूसरे के रूप में कहा जाता है। |
चयनकर्ता | डोरी | असत्य | यदि कोई चयनकर्ता प्रदान किया जाता है, तो पॉपओवर ऑब्जेक्ट निर्दिष्ट लक्ष्यों को सौंपे जाएंगे। व्यवहार में, इसका उपयोग गतिशील HTML सामग्री को पॉपओवर जोड़ने के लिए सक्षम करने के लिए किया जाता है। इसे और एक सूचनात्मक उदाहरण देखें । |
टेम्पलेट | डोरी | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
पॉपओवर बनाते समय उपयोग करने के लिए HTML को आधार बनाएं। पॉपओवर का पॉपओवर का
सबसे बाहरी आवरण तत्व में |
शीर्षक | स्ट्रिंग | समारोह | '' | डिफ़ॉल्ट शीर्षक मान यदि यदि कोई फ़ंक्शन दिया जाता है, तो इसे इसके |
चालू कर देना | डोरी | 'क्लिक' | पॉपओवर कैसे ट्रिगर होता है - क्लिक करें | होवर | फोकस | नियमावली। आप कई ट्रिगर पास कर सकते हैं; उन्हें एक स्थान से अलग करें। 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 | यह घटना तब सक्रिय होती है जब पॉपओवर उपयोगकर्ता को दिखाई देता है (सीएसएस ट्रांज़िशन पूरा होने की प्रतीक्षा करेगा)। |
छिपाना.bs.popover | hide इंस्टेंस विधि को कॉल किए जाने पर इस घटना को तुरंत निकाल दिया जाता है। |
हिडन.बीएस.पॉपओवर | यह घटना तब सक्रिय हो जाती है जब पॉपओवर उपयोगकर्ता से छिपा हुआ समाप्त हो जाता है (सीएसएस ट्रांज़िशन पूरा होने की प्रतीक्षा करेगा)। |
डाला.bs.popover | इस घटना को उस show.bs.popover घटना के बाद सक्रिय किया जाता है जब पॉपओवर टेम्पलेट को DOM में जोड़ा जाता है। |
इस प्लगइन के साथ सभी अलर्ट संदेशों में बर्खास्तगी कार्यक्षमता जोड़ें।
एक .close
बटन का उपयोग करते समय, यह पहला बच्चा होना चाहिए .alert-dismissible
और मार्कअप में इससे पहले कोई टेक्स्ट सामग्री नहीं आ सकती है।
इसे और वह बदलें और पुनः प्रयास करें। ड्यूस मोलिस, इस्ट नॉन कमोडो लक्टस, निसि इरेट पोर्टिटर लिगुला, एगेट लैकिनिया ओडियो सेम नेक एलीट। क्रैस मैटिस कॉन्सेक्टेटुर पुरुस सिट एमेट फेरमेंटम।
data-dismiss="alert"
अलर्ट क्लोज फंक्शनलिटी को स्वचालित रूप से देने के लिए बस अपने क्लोज बटन में जोड़ें । किसी अलर्ट को बंद करने से वह DOM से हट जाता है।
अपने अलर्ट बंद करते समय एनिमेशन का उपयोग करने के लिए, सुनिश्चित करें कि उनके पास .fade
और.in
कक्षाएं पहले से ही लागू हैं।
$().alert()
विशेषता वाले वंशज तत्वों पर क्लिक ईवेंट के लिए अलर्ट सुनता है data-dismiss="alert"
। (डेटा-एपीआई के ऑटो-इनिशियलाइज़ेशन का उपयोग करते समय आवश्यक नहीं है।)
$().alert('close')
अलर्ट को DOM से हटाकर बंद कर देता है। यदि तत्व पर .fade
और कक्षाएं मौजूद हैं, तो अलर्ट हटाए जाने से पहले ही फीका हो जाएगा।.in
बूटस्ट्रैप का अलर्ट प्लगइन अलर्ट कार्यक्षमता में शामिल होने के लिए कुछ घटनाओं को उजागर करता है।
घटना प्रकार | विवरण |
---|---|
बंद करें.bs.अलर्ट | close इंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है। |
बंद.बीएस.अलर्ट | जब अलर्ट बंद हो जाता है तो यह ईवेंट सक्रिय हो जाता है (सीएसएस ट्रांज़िशन पूरा होने की प्रतीक्षा करेगा)। |
बटन के साथ और अधिक करें। नियंत्रण बटन बताता है या टूलबार जैसे अधिक घटकों के लिए बटनों के समूह बनाता है।
फ़ायरफ़ॉक्स पूरे पेज लोड पर फॉर्म कंट्रोल स्टेट्स (विकलांगता और जाँच) बना रहता है । इसके लिए एक उपाय है उपयोग करना 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
संक्रमण शुरू होने पर जोड़ा जाता है, और समाप्त होने पर हटा दिया जाता हैइन वर्गों में पाया जा सकता है component-animations.less
।
बंधनेवाला तत्व का नियंत्रण स्वचालित रूप से असाइन करने के लिए बस जोड़ें data-toggle="collapse"
और तत्व में a जोड़ें। एट्रिब्यूट सीएसएस चयनकर्ता को पतन लागू करने के लिए स्वीकार करता है data-target
। कक्षा को संक्षिप्त करने योग्य तत्व में 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
घटना होने से पहले) कॉलर पर वापस आ जाता है।
बूटस्ट्रैप का पतन वर्ग पतन की कार्यक्षमता में शामिल होने के लिए कुछ घटनाओं को उजागर करता है।
घटना प्रकार | विवरण |
---|---|
शो.bs.पतन | show इंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है। |
दिखाया गया.bs.पतन | यह घटना तब सक्रिय होती है जब उपयोगकर्ता को एक संक्षिप्त तत्व दिखाई देता है (सीएसएस संक्रमण पूरा होने की प्रतीक्षा करेगा)। |
छिपाना.bs.पतन | इस घटना को तुरंत निकाल दिया जाता है जब hide विधि को बुलाया जाता है। |
छिपा हुआ.bs.पतन | यह घटना तब सक्रिय होती है जब उपयोगकर्ता से एक संक्षिप्त तत्व छुपाया जाता है (सीएसएस संक्रमण पूरा होने की प्रतीक्षा करेगा)। |
हिंडोला जैसे तत्वों के माध्यम से साइकिल चलाने के लिए एक स्लाइड शो घटक। नेस्टेड हिंडोला समर्थित नहीं हैं।
हिंडोला घटक आम तौर पर पहुंच-योग्यता मानकों के अनुरूप नहीं होता है। यदि आपको आज्ञाकारी होने की आवश्यकता है, तो कृपया अपनी सामग्री प्रस्तुत करने के लिए अन्य विकल्पों पर विचार करें।
बूटस्ट्रैप अपने एनिमेशन के लिए विशेष रूप से CSS3 का उपयोग करता है, लेकिन Internet Explorer 8 और 9 आवश्यक CSS गुणों का समर्थन नहीं करता है। इस प्रकार, इन ब्राउज़रों का उपयोग करते समय कोई स्लाइड ट्रांज़िशन एनिमेशन नहीं होते हैं। हमने जानबूझकर संक्रमण के लिए jQuery-आधारित फ़ॉलबैक शामिल नहीं करने का निर्णय लिया है।
.active
कक्षा को किसी एक स्लाइड में जोड़ने की आवश्यकता है । अन्यथा, हिंडोला दिखाई नहीं देगा।
आवश्यक रूप से नियंत्रणों के लिए .glyphicon .glyphicon-chevron-left
और कक्षाओं की आवश्यकता नहीं है। .glyphicon .glyphicon-chevron-right
बूटस्ट्रैप प्रदान करता है .icon-prev
और .icon-next
सादे यूनिकोड विकल्प के रूप में।
.carousel-caption
किसी भी तत्व के साथ आसानी से अपनी स्लाइड में कैप्शन जोड़ें .item
। लगभग किसी भी वैकल्पिक HTML को वहां रखें और यह स्वचालित रूप से संरेखित और स्वरूपित हो जाएगा।
हिंडोला नियंत्रणों को ठीक से काम करने के लिए कैरोसेल id
को सबसे बाहरी कंटेनर पर ( ) के उपयोग की आवश्यकता होती है। .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">
) पर फ़ायर किए जाते हैं.
घटना प्रकार | विवरण |
---|---|
स्लाइड.bs.carousel | slide इंस्टेंस विधि लागू होने पर यह घटना तुरंत सक्रिय हो जाती है। |
slid.bs.carousel | यह इवेंट तब सक्रिय होता है जब कैरोसेल ने अपना स्लाइड ट्रांज़िशन पूरा कर लिया हो। |
affix प्लगइन position: fixed;
के साथ मिले प्रभाव का अनुकरण करते हुए, चालू और बंद टॉगल करता है position: sticky;
। दाईं ओर सबनेविगेशन एफिक्स प्लगइन का लाइव डेमो है।
डेटा विशेषताओं के माध्यम से या अपने स्वयं के जावास्क्रिप्ट के साथ मैन्युअल रूप से एफ़िक्स प्लगइन का उपयोग करें। दोनों ही स्थितियों में, आपको अपनी चिपकाई गई सामग्री की स्थिति और चौड़ाई के लिए CSS प्रदान करनी होगी।
नोट: किसी सफ़ारी रेंडरिंग बग के कारण किसी अपेक्षाकृत स्थित तत्व, जैसे खींचे गए या पुश किए गए कॉलम में निहित तत्व पर एफ़िक्स प्लगइन का उपयोग न करें ।
एफिक्स प्लगइन तीन वर्गों के बीच टॉगल करता है, प्रत्येक एक विशेष स्थिति का प्रतिनिधित्व करता है: .affix
, .affix-top
, और .affix-bottom
। position: fixed;
वास्तविक स्थिति को .affix
संभालने के लिए आपको इन वर्गों के लिए स्वयं (इस प्लगइन से स्वतंत्र) के अपवाद के साथ शैलियों को प्रदान करना होगा ।
यहां बताया गया है कि एफिक्स प्लगइन कैसे काम करता है:
.affix-top
है कि तत्व अपनी सबसे ऊपरी स्थिति में है। इस बिंदु पर कोई सीएसएस स्थिति की आवश्यकता नहीं है।.affix
प्रतिस्थापित .affix-top
और सेट position: fixed;
(बूटस्ट्रैप के सीएसएस द्वारा प्रदान किया गया)।.affix
यदि एक निचला ऑफ़सेट परिभाषित किया गया है, तो पिछले स्क्रॉलिंग को इसके साथ बदलना चाहिए .affix-bottom
। चूंकि ऑफ़सेट वैकल्पिक हैं, इसलिए एक को सेट करने के लिए आपको उपयुक्त सीएसएस सेट करना होगा। इस मामले में, position: absolute;
जब आवश्यक हो तो जोड़ें। प्लगइन डेटा विशेषता या जावास्क्रिप्ट विकल्प का उपयोग यह निर्धारित करने के लिए करता है कि तत्व को वहां से कहां रखा जाए।नीचे दिए गए किसी भी उपयोग विकल्प के लिए अपना सीएसएस सेट करने के लिए उपरोक्त चरणों का पालन करें।
किसी भी तत्व में आसानी से प्रत्यय व्यवहार जोड़ने data-spy="affix"
के लिए, बस उस तत्व में जोड़ें जिसकी आप जासूसी करना चाहते हैं। किसी तत्व की पिनिंग को कब टॉगल करना है, यह परिभाषित करने के लिए ऑफ़सेट का उपयोग करें।
जावास्क्रिप्ट के माध्यम से एफिक्स प्लगइन को कॉल करें:
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-
, जैसा कि में है data-offset-top="200"
।
नाम | प्रकार | चूक | विवरण |
---|---|---|---|
ओफ़्सेट | संख्या | समारोह | वस्तु | 10 | स्क्रॉल की स्थिति की गणना करते समय स्क्रीन से ऑफसेट करने के लिए पिक्सेल। यदि एक ही नंबर प्रदान किया जाता है, तो ऑफसेट को ऊपर और नीचे दोनों दिशाओं में लागू किया जाएगा। एक अद्वितीय, निचला और शीर्ष ऑफ़सेट प्रदान करने के लिए बस एक ऑब्जेक्ट offset: { top: 10 } या offset: { top: 10, bottom: 5 } . किसी फ़ंक्शन का उपयोग तब करें जब आपको ऑफ़सेट की गतिशील रूप से गणना करने की आवश्यकता हो। |
लक्ष्य | चयनकर्ता | नोड | jQuery तत्व | window वस्तु _ |
प्रत्यय के लक्ष्य तत्व को निर्दिष्ट करता है। |
.affix(options)
आपकी सामग्री को चिपकाई गई सामग्री के रूप में सक्रिय करता है। एक वैकल्पिक विकल्प स्वीकार करता है object
।
.affix('checkPosition')
प्रासंगिक तत्वों के आयाम, स्थिति और स्क्रॉल स्थिति के आधार पर प्रत्यय की स्थिति का पुनर्गणना करता है। नई स्थिति के अनुसार चिपकाई गई सामग्री में , , और कक्षाएं जोड़ी जाती हैं या हटा दी जाती .affix
हैं .affix-top
। .affix-bottom
चिपकाई गई सामग्री की सही स्थिति सुनिश्चित करने के लिए, जब भी चिपकाई गई सामग्री या लक्ष्य तत्व के आयाम बदले जाते हैं, तो इस पद्धति को कॉल करने की आवश्यकता होती है।
बूटस्ट्रैप का एफ़िक्स प्लगइन एफ़िक्स कार्यक्षमता में हुक करने के लिए कुछ घटनाओं को उजागर करता है।
घटना प्रकार | विवरण |
---|---|
affix.bs.affix | तत्व चिपकाए जाने से ठीक पहले यह घटना आग लगती है। |
affixed.bs.affix | तत्व चिपकाए जाने के बाद इस घटना को निकाल दिया जाता है। |
affix-top.bs.affix | तत्व को शीर्ष पर चिपकाए जाने से ठीक पहले यह घटना सक्रिय हो जाती है। |
affixed-top.bs.affix | तत्व को शीर्ष पर चिपकाए जाने के बाद इस घटना को निकाल दिया जाता है। |
affix-bottom.bs.affix | तत्व को नीचे चिपकाए जाने से ठीक पहले यह घटना आग लगती है। |
affixed-bottom.bs.affix | तत्व को नीचे चिपकाए जाने के बाद इस घटना को निकाल दिया जाता है। |