JavaScript
डझनभर सानुकूल jQuery प्लगइनसह बूटस्ट्रॅपचे घटक जिवंत करा. त्या सर्वांचा किंवा एक एक करून सहजतेने समाविष्ट करा.
डझनभर सानुकूल jQuery प्लगइनसह बूटस्ट्रॅपचे घटक जिवंत करा. त्या सर्वांचा किंवा एक एक करून सहजतेने समाविष्ट करा.
प्लगइन वैयक्तिकरित्या समाविष्ट केले जाऊ शकतात (बूटस्ट्रॅपच्या वैयक्तिक *.js
फाइल्स वापरून), किंवा सर्व एकाच वेळी (वापरून bootstrap.js
किंवा मिनिफाइड bootstrap.min.js
).
दोन्ही bootstrap.js
आणि bootstrap.min.js
एकाच फाईलमध्ये सर्व प्लगइन असतात. फक्त एक समाविष्ट करा.
काही प्लगइन आणि CSS घटक इतर प्लगइनवर अवलंबून असतात. तुम्ही स्वतंत्रपणे प्लगइन समाविष्ट करत असल्यास, डॉक्समध्ये या अवलंबित्वांची खात्री करा. हे देखील लक्षात ठेवा की सर्व प्लगइन jQuery वर अवलंबून आहेत (याचा अर्थ प्लगइन फाइल्सच्या आधी jQuery समाविष्ट करणे आवश्यक आहे). jQuery च्या कोणत्या आवृत्त्या समर्थित आहेत हे पाहण्यासाठी आमचा सल्ला घ्या.bower.json
तुम्ही JavaScript ची एक ओळ न लिहिता मार्कअप API द्वारे सर्व बूटस्ट्रॅप प्लगइन पूर्णपणे वापरू शकता. हे बूटस्ट्रॅपचे प्रथम श्रेणी API आहे आणि प्लगइन वापरताना तुमचा प्रथम विचार केला पाहिजे.
ते म्हणाले, काही परिस्थितींमध्ये ही कार्यक्षमता बंद करणे इष्ट असू शकते. म्हणून, आम्ही सोबत असलेल्या दस्तऐवजाच्या नेमस्पेसवरील सर्व इव्हेंट्स अनबाइंड करून डेटा विशेषता API अक्षम करण्याची क्षमता देखील प्रदान करतो data-api
. हे असे दिसते:
वैकल्पिकरित्या, विशिष्ट प्लगइनला लक्ष्य करण्यासाठी, फक्त प्लगइनचे नाव नेमस्पेस म्हणून डेटा-एपीआय नेमस्पेससह समाविष्ट करा:
एकाच घटकावरील एकाधिक प्लगइनमधील डेटा विशेषता वापरू नका. उदाहरणार्थ, बटणामध्ये टूलटिप असू शकत नाही आणि मॉडेल टॉगल करू शकत नाही. हे पूर्ण करण्यासाठी, रॅपिंग घटक वापरा.
आम्हाला विश्वास आहे की तुम्ही JavaScript API द्वारे सर्व बूटस्ट्रॅप प्लगइन पूर्णपणे वापरण्यास सक्षम असाल. सर्व सार्वजनिक API एकल, साखळी पद्धती आहेत आणि त्यावर कारवाई केलेले संकलन परत करतात.
सर्व पद्धतींनी पर्यायी पर्याय ऑब्जेक्ट, विशिष्ट पद्धतीला लक्ष्य करणारी स्ट्रिंग किंवा काहीही (जे डीफॉल्ट वर्तनासह प्लगइन सुरू करते) स्वीकारले पाहिजे:
Constructor
प्रत्येक प्लगइन मालमत्तेवर त्याचे कच्चे कन्स्ट्रक्टर देखील उघड करते : $.fn.popover.Constructor
. तुम्ही विशिष्ट प्लगइन उदाहरण मिळवू इच्छित असल्यास, ते थेट घटकावरून पुनर्प्राप्त करा: $('[rel="popover"]').data('popover')
.
Constructor.DEFAULTS
तुम्ही प्लगइनच्या ऑब्जेक्टमध्ये बदल करून प्लगइनसाठी डीफॉल्ट सेटिंग्ज बदलू शकता :
कधीकधी इतर UI फ्रेमवर्कसह बूटस्ट्रॅप प्लगइन वापरणे आवश्यक असते. या परिस्थितीत, नेमस्पेसची टक्कर अधूनमधून होऊ शकते. असे झाल्यास, तुम्ही .noConflict
ज्या प्लगइनचे मूल्य परत करू इच्छिता त्यावर कॉल करू शकता.
बूटस्ट्रॅप बहुतेक प्लगइनच्या अद्वितीय क्रियांसाठी सानुकूल इव्हेंट प्रदान करते. सामान्यतः, हे अनंत आणि भूतकाळातील कृदंत स्वरूपात येतात - जिथे अनंत (उदा. show
) एखाद्या घटनेच्या प्रारंभी shown
ट्रिगर केले जाते आणि कृती पूर्ण झाल्यावर त्याचे भूतकाळातील कृदंत स्वरूप (उदा.) ट्रिगर केले जाते.
3.0.0 पर्यंत, सर्व बूटस्ट्रॅप इव्हेंट नेमस्पेस आहेत.
सर्व अनंत घटना preventDefault
कार्यक्षमता प्रदान करतात. हे कृती सुरू होण्यापूर्वी त्याची अंमलबजावणी थांबविण्याची क्षमता प्रदान करते.
VERSION
प्रत्येक बूटस्ट्रॅपच्या jQuery प्लगइनची आवृत्ती प्लगइनच्या कन्स्ट्रक्टरच्या मालमत्तेद्वारे ऍक्सेस केली जाऊ शकते . उदाहरणार्थ, टूलटिप प्लगइनसाठी:
जेव्हा JavaScript अक्षम असते तेव्हा बूटस्ट्रॅपचे प्लगइन विशेषतः सुंदरपणे मागे पडत नाहीत. तुम्हाला या प्रकरणात वापरकर्त्याच्या अनुभवाची काळजी असल्यास, तुमच्या वापरकर्त्यांना <noscript>
परिस्थिती (आणि JavaScript पुन्हा सक्षम कसे करावे) समजावून सांगण्यासाठी आणि/किंवा तुमचे स्वतःचे सानुकूल फॉलबॅक जोडा.
बूटस्ट्रॅप प्रोटोटाइप किंवा jQuery UI सारख्या तृतीय-पक्ष JavaScript लायब्ररींना अधिकृतपणे समर्थन देत नाही . इव्हेंट आणि नेमस्पेस असूनही .noConflict
, सुसंगतता समस्या असू शकतात ज्यांचे निराकरण तुम्हाला स्वतः करावे लागेल.
साध्या संक्रमण प्रभावांसाठी, transition.js
इतर JS फायलींसोबत एकदा समाविष्ट करा. जर तुम्ही संकलित (किंवा मिनिफाइड) वापरत असाल तर bootstrap.js
, हे समाविष्ट करण्याची गरज नाही—ते आधीपासून आहे.
Transition.js हा transitionEnd
कार्यक्रमांसाठी मूलभूत मदतनीस तसेच CSS संक्रमण एमुलेटर आहे. CSS संक्रमण समर्थन तपासण्यासाठी आणि हँगिंग संक्रमणे पकडण्यासाठी इतर प्लगइनद्वारे याचा वापर केला जातो.
खालील JavaScript स्निपेट वापरून संक्रमणे जागतिक स्तरावर अक्षम केली जाऊ शकतात, जी लोड झाल्यानंतर transition.js
(किंवा bootstrap.js
, bootstrap.min.js
जसे की असेल) येणे आवश्यक आहे:
मॉडेल्स सुव्यवस्थित, परंतु लवचिक, किमान आवश्यक कार्यक्षमतेसह आणि स्मार्ट डीफॉल्टसह संवाद प्रॉम्प्ट करतात.
एखादे मॉडेल अजून दृश्यमान असताना उघडू नये याची खात्री करा. एका वेळी एकापेक्षा जास्त मॉडेल दाखवण्यासाठी सानुकूल कोड आवश्यक आहे.
मॉडेलचे स्वरूप आणि/किंवा कार्यक्षमतेवर परिणाम करणारे इतर घटक टाळण्यासाठी आपल्या दस्तऐवजात नेहमी मॉडेलचा HTML कोड उच्च-स्तरीय स्थानावर ठेवण्याचा प्रयत्न करा.
मोबाईल डिव्हाइसेसवर मॉडेल्स वापरण्याबाबत काही चेतावणी आहेत. तपशीलांसाठी आमचे ब्राउझर समर्थन दस्तऐवज पहा.
HTML5 त्याचे शब्दार्थ कसे परिभाषित करते त्यामुळे, autofocus
बूटस्ट्रॅप मॉडेल्समध्ये HTML विशेषताचा कोणताही प्रभाव पडत नाही. समान प्रभाव प्राप्त करण्यासाठी, काही सानुकूल JavaScript वापरा:
शीर्षलेख, मुख्य भाग आणि तळटीपमधील क्रियांच्या संचासह प्रस्तुत केलेले मॉडेल.
खालील बटणावर क्लिक करून JavaScript द्वारे मॉडेल टॉगल करा. ते खाली सरकले जाईल आणि पृष्ठाच्या शीर्षस्थानी फिकट होईल.
मॉडेल शीर्षकाचा संदर्भ देत, कडे आणि role="dialog"
स्वतः जोडण्याची खात्री करा .aria-labelledby="..."
.modal
role="document"
.modal-dialog
aria-describedby
याव्यतिरिक्त, तुम्ही वर सह तुमच्या मोडल संवादाचे वर्णन देऊ शकता .modal
.
मोडल्समध्ये YouTube व्हिडिओ एम्बेड करण्यासाठी आपोआप प्लेबॅक आणि बरेच काही थांबवण्यासाठी बूटस्ट्रॅपमध्ये नसलेली अतिरिक्त JavaScript आवश्यक आहे. अधिक माहितीसाठी हे उपयुक्त स्टॅक ओव्हरफ्लो पोस्ट पहा .
मॉडेल्सचे दोन पर्यायी आकार आहेत, जे मॉडिफायर क्लासेसद्वारे उपलब्ध आहेत .modal-dialog
.
पाहण्यासाठी फिकट होण्याऐवजी दिसणार्या मॉडेलसाठी, .fade
तुमच्या मॉडेल मार्कअपमधून वर्ग काढून टाका.
मॉडेलमध्ये बूटस्ट्रॅप ग्रिड सिस्टीमचा लाभ घेण्यासाठी, फक्त मध्ये नेस्ट .row
करा .modal-body
आणि नंतर सामान्य ग्रिड सिस्टम क्लासेस वापरा.
थोड्या वेगळ्या सामग्रीसह, सर्व समान मॉडेल ट्रिगर करणार्या बटणांचा समूह आहे? कोणत्या बटणावर क्लिक केले आहे त्यानुसार मॉडेलमधील सामग्री बदलण्यासाठी HTML विशेषता (शक्यतो jQuery द्वारेevent.relatedTarget
) वापरा . वरील तपशीलांसाठी मॉडेल इव्हेंट डॉक्स पहा ,data-*
relatedTarget
मॉडेल प्लगइन डेटा विशेषता किंवा JavaScript द्वारे मागणीनुसार तुमची लपवलेली सामग्री टॉगल करते. हे डिफॉल्ट स्क्रोलिंग वर्तन ओव्हरराइड .modal-open
करण्यासाठी जोडते आणि मॉडेलच्या बाहेर क्लिक करताना दर्शविलेले मॉडेल डिसमिस करण्यासाठी क्लिक क्षेत्र प्रदान करते.<body>
.modal-backdrop
JavaScript न लिहिता एक मॉडेल सक्रिय करा. कंट्रोलर घटकावर सेट करा data-toggle="modal"
, जसे की बटणासह, टॉगल करण्यासाठी data-target="#foo"
किंवा href="#foo"
विशिष्ट मॉडेल लक्ष्य करण्यासाठी.
myModal
JavaScript च्या एका ओळीसह id सह मॉडेल कॉल करा :
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये 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.bs.modal | show जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो . क्लिकमुळे झाले असल्यास, क्लिक केलेला घटक relatedTarget इव्हेंटची मालमत्ता म्हणून उपलब्ध असतो. |
दाखवले आहे.bs.modal | जेव्हा मॉडेल वापरकर्त्यासाठी दृश्यमान केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). क्लिकमुळे झाले असल्यास, क्लिक केलेला घटक relatedTarget इव्हेंटची मालमत्ता म्हणून उपलब्ध असतो. |
hide.bs.modal | hide जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो . |
hidden.bs.modal | जेव्हा मॉडेल वापरकर्त्यापासून लपविले जाणे पूर्ण केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). |
loaded.bs.modal | remote जेव्हा मॉडेलने पर्याय वापरून सामग्री लोड केली तेव्हा हा कार्यक्रम काढला जातो . |
नॅव्हबार, टॅब आणि गोळ्यांसह या साध्या प्लगइनसह जवळजवळ कोणत्याही गोष्टीमध्ये ड्रॉपडाउन मेनू जोडा.
.open
डेटा विशेषता किंवा JavaScript द्वारे, ड्रॉपडाउन प्लगइन लपलेली सामग्री (ड्रॉपडाउन मेनू) पालक सूची आयटमवर वर्ग टॉगल करून टॉगल करते .
मोबाईल डिव्हाइसेसवर, ड्रॉपडाउन उघडणे .dropdown-backdrop
मेनूच्या बाहेर टॅप करताना ड्रॉपडाउन मेनू बंद करण्यासाठी टॅप क्षेत्र म्हणून जोडते, योग्य iOS समर्थनाची आवश्यकता. याचा अर्थ असा की खुल्या ड्रॉपडाउन मेनूमधून वेगळ्या ड्रॉपडाउन मेनूवर स्विच करण्यासाठी मोबाइलवर अतिरिक्त टॅप आवश्यक आहे.
टीप: data-toggle="dropdown"
अॅप्लिकेशन स्तरावर ड्रॉपडाउन मेनू बंद करण्यासाठी विशेषता अवलंबून असते, म्हणून ती नेहमी वापरणे चांगली कल्पना आहे.
data-toggle="dropdown"
ड्रॉपडाउन टॉगल करण्यासाठी लिंक किंवा बटणावर जोडा .
लिंक बटणांसह URL अखंड ठेवण्यासाठी, data-target
ऐवजी विशेषता वापरा href="#"
.
JavaScript द्वारे ड्रॉपडाउन कॉल करा:
data-toggle="dropdown"
अजूनही आवश्यक आहेतुम्ही तुमच्या ड्रॉपडाउनला JavaScript द्वारे कॉल करत असलात किंवा त्याऐवजी डेटा-एपीआय वापरत असलात तरीही, data-toggle="dropdown"
ड्रॉपडाउनच्या ट्रिगर घटकावर नेहमीच उपस्थित असणे आवश्यक आहे.
काहीही नाही
$().dropdown('toggle')
दिलेल्या नॅव्हबार किंवा टॅब केलेल्या नेव्हिगेशनचा ड्रॉपडाउन मेनू टॉगल करते.
सर्व ड्रॉपडाउन इव्हेंट्सच्या .dropdown-menu
मूळ घटकावर फायर केले जातात.
सर्व ड्रॉपडाउन इव्हेंटमध्ये relatedTarget
गुणधर्म असतात, ज्याचे मूल्य टॉगलिंग अँकर घटक असते.
कार्यक्रमाचा प्रकार | वर्णन |
---|---|
show.bs.ड्रॉपडाउन | जेव्हा शो उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो. |
दाखवले.bs.ड्रॉपडाउन | जेव्हा ड्रॉपडाउन वापरकर्त्यासाठी दृश्यमान केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). |
hide.bs.ड्रॉपडाउन | जेव्हा लपवा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो. |
hidden.bs.dropdown | जेव्हा ड्रॉपडाउन वापरकर्त्यापासून लपविले जाणे पूर्ण केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). |
ScrollSpy प्लगइन स्क्रोल स्थितीवर आधारित एनएव्ही लक्ष्य स्वयंचलितपणे अद्यतनित करण्यासाठी आहे. navbar खालील क्षेत्र स्क्रोल करा आणि सक्रिय वर्ग बदल पहा. ड्रॉपडाउन उप आयटम देखील हायलाइट केले जातील.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ते विकले जाण्यापूर्वी. Tumblr फार्म-टू-टेबल सायकल अधिकार काहीही असो. Anim keffiyeh carles cardigan. Velit seitan mcsweeney चे फोटो बूथ 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल आणि कार्डिगन ट्रस्ट फंड कल्पा बायोडिझेल वेस एंडरसन सौंदर्यशास्त्र. निहिल टॅटू अक्यूसमस, क्रेड आयरनी बायोडिझेल केफीयेह कारागीर उल्लामको परिणाम.
वेनिअम मारफा मिश्या स्केटबोर्ड, अॅडिपिसिसिंग फ्यूगिएट वेलीट पिचफोर्क दाढी. फ्रीगन दाढी अलिक्वा कपिडॅटॅट मॅकस्वीनीचा वेरो. क्युपिडाट चार लोको निसी, ईए हेल्वेटिका नुल्ला कार्ल्स. टॅटू कॉस्बी स्वेटर फूड ट्रक, mcsweeney's quis non freegan vinyl. लो-फाय वेस अँडरसन +1 सारटोरियल. कार्लेस नॉन एस्थेटिक एक्सरसिटेशन quis gentrify. ब्रुकलिन अॅडिपिसिसिंग क्राफ्ट बिअर व्हाइस कीटार डेझरंट.
Occaecat commodo aliqua delectus. फॅप क्राफ्ट बिअर डेझरंट स्केटबोर्ड ईए. लोमो सायकल राइट्स अॅडिपिसिसिंग बॅन मी, वेलीट ईए सन नेक्स्ट लेव्हल लोकाव्होर सिंगल-ओरिजिन कॉफी इन मॅग्ना व्हेनिअम. हाय लाइफ आयडी विनाइल, इको पार्क कॉन्सेक्वॅट क्विस अलिक्विप बॅन मी पिचफोर्क. व्हेरो व्हीएचएस हे ऍडिपिसिसिंग आहे. 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 मेसेंजर बॅग marfa जे काही delectus अन्न ट्रक. Sapiente synth id गृहीत धरा. Locavore sed helvetica cliche irony, thundercats तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल हूडी ग्लूटेन-फ्री lo-fi fap aliquip. टेरी रिचर्डसन प्रॉडेंट ब्रंच नेसियंट क्विस कॉस्बी स्वेटर पॅरियातूर केफियेह यूट हेल्वेटिका आर्टिसन हे विकले जाण्यापूर्वीच लेबर एलिट प्लेसॅट. कार्डिगन क्राफ्ट बिअर सीटन रेडीमेड वेलीट. व्हीएचएस चेंब्रे श्रमिक टेम्पर व्हेनिअम. अनिम मॉलिट मिनिम कमोडो उल्लाम्को गडगडाट.
नवबार लिंक्समध्ये निराकरण करण्यायोग्य आयडी लक्ष्य असणे आवश्यक आहे. उदाहरणार्थ, <a href="#home">home</a>
DOM मधील एखाद्या गोष्टीशी संबंधित असणे आवश्यक आहे जसे की <div id="home"></div>
.
:visible
लक्ष्य नसलेल्या घटकांकडे दुर्लक्ष केले:visible
jQuery नुसार नसलेल्या लक्ष्य घटकांकडे दुर्लक्ष केले जाईल आणि त्यांच्याशी संबंधित एनएव्ही आयटम कधीही हायलाइट केले जाणार नाहीत.
अंमलबजावणीची पद्धत काहीही असो, scrollspy ला position: relative;
तुम्ही ज्या घटकाची हेरगिरी करत आहात त्याचा वापर आवश्यक आहे. बहुतेक प्रकरणांमध्ये हे आहे <body>
. व्यतिरिक्त इतर घटकांवर स्क्रोलस्पायिंग करताना , एक सेट आणि लागू <body>
असल्याची खात्री करा .height
overflow-y: scroll;
तुमच्या टॉपबार नेव्हिगेशनमध्ये सहजपणे स्क्रोलस्पाय वर्तन जोडण्यासाठी, data-spy="scroll"
तुम्ही ज्या घटकावर टेहळणी करू इच्छिता त्यात जोडा (बहुधा हे असेल <body>
). data-target
नंतर कोणत्याही बूटस्ट्रॅप घटकाच्या मूळ घटकाच्या ID किंवा वर्गासह विशेषता जोडा .nav
.
तुमच्या CSS मध्ये जोडल्यानंतर position: relative;
, JavaScript द्वारे scrollspy ला कॉल करा:
.scrollspy('refresh')
DOM मधील घटक जोडणे किंवा काढून टाकणे याच्या संयोगाने scrollspy वापरताना, तुम्हाला याप्रमाणे रीफ्रेश पद्धत कॉल करणे आवश्यक आहे:
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-
प्रमाणे जोडा data-offset=""
.
नाव | प्रकार | डीफॉल्ट | वर्णन |
---|---|---|---|
ऑफसेट | संख्या | 10 | स्क्रोलच्या स्थितीची गणना करताना वरून ऑफसेट करण्यासाठी पिक्सेल. |
कार्यक्रमाचा प्रकार | वर्णन |
---|---|
activate.bs.scrollspy | स्क्रोलस्पायने नवीन आयटम सक्रिय केल्यावर हा कार्यक्रम सुरू होतो. |
स्थानिक सामग्रीच्या पॅनमधून संक्रमण करण्यासाठी द्रुत, डायनॅमिक टॅब कार्यक्षमता जोडा, अगदी ड्रॉपडाउन मेनूद्वारे. नेस्टेड टॅब समर्थित नाहीत.
रॉ डेनिम तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल जीन शॉर्ट्स ऑस्टिन. Nesciunt tofu stumptown aliqua, retro synth master cleanse. मिश्या क्लिच टेम्पर, विलियम्सबर्ग कार्ल्स व्हेगन हेल्वेटिका. Reprehenderit butcher retro keffiyeh dreamcatcher synth. कॉस्बी स्वेटर ईयू बान्ह मी, क्वि इरुरे टेरी रिचर्डसन माजी स्क्विड. एलिक्विप प्लेसॅट सॅल्व्हिया सिलम आयफोन. Seitan aliquip quis cardigan American apparel, butcher voluptate nisi qui.
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.
हे प्लगइन टॅब करण्यायोग्य क्षेत्रे जोडण्यासाठी टॅब केलेले नेव्हिगेशन घटक वाढवते.
JavaScript द्वारे टॅब करण्यायोग्य टॅब सक्षम करा (प्रत्येक टॅब स्वतंत्रपणे सक्रिय करणे आवश्यक आहे):
तुम्ही वैयक्तिक टॅब अनेक प्रकारे सक्रिय करू शकता:
तुम्ही कोणतेही JavaScript न लिहिता टॅब किंवा पिल नेव्हिगेशन सक्रिय करू शकता फक्त एक घटक निर्दिष्ट करून data-toggle="tab"
किंवा त्यावर. टॅबमध्ये आणि वर्ग data-toggle="pill"
जोडल्याने बूटस्ट्रॅप टॅब स्टाइल लागू होईल, आणि वर्ग जोडल्यास पिल स्टाइलिंग लागू होईल .nav
nav-tabs
ul
nav
nav-pills
टॅब फेड इन करण्यासाठी, .fade
प्रत्येकामध्ये जोड�� .tab-pane
. .in
पहिल्या टॅब उपखंडात प्रारंभिक सामग्री दृश्यमान करणे देखील आवश्यक आहे .
$().tab
टॅब घटक आणि सामग्री कंटेनर सक्रिय करते. टॅबमध्ये DOM मध्ये कंटेनर नोडला लक्ष्य करणारा एक 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
इव्हेंट फायर केले जाणार नाहीत.
कार्यक्रमाचा प्रकार | वर्णन |
---|---|
show.bs.tab | हा कार्यक्रम टॅब शोवर सुरू होतो, परंतु नवीन टॅब दाखवण्यापूर्वी. सक्रिय टॅब आणि मागील सक्रिय टॅब (उपलब्ध असल्यास) अनुक्रमे वापरा event.target आणि लक्ष्यित करा.event.relatedTarget |
दाखवले.bs.tab | टॅब दर्शविल्यानंतर हा कार्यक्रम टॅब शोवर सुरू होतो. सक्रिय टॅब आणि मागील सक्रिय टॅब (उपलब्ध असल्यास) अनुक्रमे वापरा event.target आणि लक्ष्यित करा.event.relatedTarget |
hide.bs.tab | जेव्हा नवीन टॅब दाखवायचा असतो (आणि अशा प्रकारे मागील सक्रिय टॅब लपवायचा असतो) तेव्हा हा कार्यक्रम सुरू होतो. अनुक्रमे वर्तमान सक्रिय टॅब आणि लवकरच सक्रिय होणारा नवीन टॅब वापरा event.target आणि लक्ष्यित करा.event.relatedTarget |
hidden.bs.tab | हा कार्यक्रम नवीन टॅब दर्शविल्यानंतर सुरू होतो (आणि अशा प्रकारे मागील सक्रिय टॅब लपविला जातो). मागील सक्रिय टॅब आणि नवीन सक्रिय टॅब अनुक्रमे वापरा event.target आणि लक्ष्यित करण्यासाठी.event.relatedTarget |
जेसन फ्रेमने लिहिलेल्या उत्कृष्ट jQuery.tipsy प्लगइनद्वारे प्रेरित; टूलटिप्स ही एक अद्ययावत आवृत्ती आहे, जी प्रतिमांवर अवलंबून नाही, अॅनिमेशनसाठी CSS3 आणि स्थानिक शीर्षक संचयनासाठी डेटा-विशेषता वापरतात.
शून्य-लांबीच्या शीर्षकांसह टूलटिप्स कधीही प्रदर्शित केल्या जात नाहीत.
टूलटिप पाहण्यासाठी खालील लिंकवर फिरवा:
घट्ट पँट पुढील स्तरावर केफियेह तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल. फोटो बूथ दाढी कच्ची डेनिम लेटरप्रेस शाकाहारी मेसेंजर बॅग स्टंपटाउन. फार्म-टू-टेबल सीटन, मॅकस्वेनीच्या फिक्सी सस्टेनेबल क्विनोआ 8-बिट अमेरिकन अॅपेरलमध्ये टेरी रिचर्डसन विनाइल चेंब्रे आहे. दाढी स्टंपटाऊन, कार्डिगन्स बन मी लोमो थंडरकॅट्स. टोफू बायोडिझेल विलियम्सबर्ग मार्फा, चार लोको मॅकस्वीनी क्लीन्स व्हेगन चेंब्रे. एक खरोखर उपरोधिक कारागीर काहीही असो कीटार, सीनस्टर फार्म-टू-टेबल बँक्सी ऑस्टिन ट्विटर हँडल फ्रीगन क्रेड रॉ डेनिम सिंगल-ओरिजिन कॉफी व्हायरल.
चार पर्याय उपलब्ध आहेत: वर, उजवीकडे, तळाशी आणि डावीकडे संरेखित.
कार्यप्रदर्शन कारणांसाठी, टूलटिप आणि पॉपओव्हर डेटा-एपीआय निवडले आहेत, म्हणजे तुम्ही ते स्वतःच सुरू केले पाहिजेत .
पृष्ठावरील सर्व टूलटिप सुरू करण्याचा एक मार्ग म्हणजे त्यांना त्यांच्या data-toggle
गुणधर्मानुसार निवडणे:
टूलटिप प्लगइन मागणीनुसार सामग्री आणि मार्कअप तयार करते आणि डीफॉल्टनुसार त्यांच्या ट्रिगर घटकानंतर टूलटिप ठेवते.
JavaScript द्वारे टूलटिप ट्रिगर करा:
टूलटिपसाठी आवश्यक मार्कअप ही केवळ एक data
विशेषता आहे आणि title
HTML घटकावर तुम्हाला टूलटिप हवी आहे. टूलटिपचे व्युत्पन्न केलेले मार्कअप अगदी सोपे आहे, जरी त्यास स्थान आवश्यक आहे (डिफॉल्टनुसार, top
प्लगइनद्वारे सेट केलेले).
काहीवेळा तुम्हाला हायपरलिंकमध्ये टूलटिप जोडायची असते जी अनेक ओळी गुंडाळते. टूलटिप प्लगइनचे डीफॉल्ट वर्तन हे क्षैतिज आणि अनुलंब मध्यभागी ठेवणे आहे. white-space: nowrap;
हे टाळण्यासाठी तुमच्या अँकरमध्ये जोडा .
.btn-group
a किंवा an मधील घटकांवर टूलटिप वापरताना .input-group
, किंवा टेबल-संबंधित घटकांवर ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), तुम्हाला container: 'body'
अवांछित दुष्परिणाम टाळण्यासाठी पर्याय (खाली दस्तऐवजीकरण) निर्दिष्ट करावा लागेल (जसे की घटक विस्तृत होत आहेत आणि/ किंवा टूलटिप ट्रिगर झाल्यावर त्याचे गोलाकार कोपरे गमावणे).
कीबोर्डसह नेव्हिगेट करणार्या वापरकर्त्यांसाठी आणि विशेषत: सहाय्यक तंत्रज्ञानाच्या वापरकर्त्यांसाठी, तुम्ही फक्त कीबोर्ड-फोकस करण्यायोग्य घटक जसे की लिंक्स, फॉर्म कंट्रोल्स किंवा tabindex="0"
विशेषता असलेल्या कोणत्याही अनियंत्रित घटकांमध्ये टूलटिप जोडल्या पाहिजेत.
disabled
एक किंवा घटकामध्ये टूलटिप जोडण्यासाठी .disabled
, a च्या आत घटक ठेवा आणि त्याऐवजी <div>
टूलटिप लागू करा .<div>
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-
प्रमाणे जोडा data-animation=""
.
नाव | प्रकार | डीफॉल्ट | वर्णन |
---|---|---|---|
अॅनिमेशन | बुलियन | खरे | टूलटिपवर CSS फेड संक्रमण लागू करा |
कंटेनर | स्ट्रिंग | खोटे | खोटे | विशिष्ट घटकास टूलटिप जोडते. उदाहरण: |
विलंब | संख्या | वस्तू | 0 | टूलटिप (ms) दर्शविण्यास आणि लपविण्यास विलंब - मॅन्युअल ट्रिगर प्रकारावर लागू होत नाही जर नंबर दिला असेल तर, लपवा/शो या दोन्हीसाठी विलंब लागू केला जातो ऑब्जेक्ट संरचना आहे: |
html | बुलियन | खोटे | टूलटिपमध्ये 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.bs.tooltip | show जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो . |
दाखवले.bs.टूलटिप | जेव्हा टूलटिप वापरकर्त्यासाठी दृश्यमान केली जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). |
hide.bs.tooltip | hide जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो . |
hidden.bs.tooltip | जेव्हा टूलटिप वापरकर्त्यापासून लपविणे पूर्ण होते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). |
inserted.bs.tooltip | show.bs.tooltip जेव्हा टूलटिप टेम्प्लेट DOM मध्ये जोडले जाते तेव्हा हा इव्हेंट इव्हेंटनंतर काढला जातो . |
गृहनिर्माण दुय्यम माहितीसाठी कोणत्याही घटकामध्ये iPad वरील सामग्रीचे छोटे आच्छादन जोडा.
ज्यांचे शीर्षक आणि आशय शून्य-लांबीचे आहेत असे पॉपओव्हर्स कधीही प्रदर्शित होत नाहीत.
Popovers ला टूलटिप प्लगइन तुमच्या बूटस्ट्रॅपच्या आवृत्तीमध्ये समाविष्ट करणे आवश्यक आहे.
कार्यप्रदर्शन कारणांसाठी, टूलटिप आणि पॉपओव्हर डेटा-एपीआय निवडले आहेत, म्हणजे तुम्ही ते स्वतःच सुरू केले पाहिजेत .
पृष्ठावरील सर्व पॉपओव्हर्स सुरू करण्याचा एक मार्ग म्हणजे त्यांना त्यांच्या data-toggle
गुणधर्मानुसार निवडणे:
.btn-group
a किंवा an मधील घटकांवर .input-group
किंवा टेबलशी संबंधित घटकांवर ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, ) popovers वापरताना , अवांछित साइड इफेक्ट्स (जसे की घटक विस्तृत होत जाणे आणि/) टाळण्यासाठी <tfoot>
तुम्हाला पर्याय (खाली दस्तऐवजीकरण) निर्दिष्ट करावा लागेल . container: 'body'
किंवा पॉपओव्हर ट्रिगर झाल्यावर त्याचे गोलाकार कोपरे गमावणे).
disabled
एक किंवा घटकामध्ये पॉपओव्हर जोडण्यासाठी .disabled
, a च्या आत घटक ठेवा आणि त्याऐवजी <div>
पॉपओव्हर लागू करा .<div>
काहीवेळा तुम्हाला एका हायपरलिंकमध्ये पॉपओव्हर जोडायचा आहे जो एकाधिक ओळी गुंडाळतो. पॉपओव्हर प्लगइनचे डीफॉल्ट वर्तन हे क्षैतिज आणि अनुलंब मध्यभागी ठेवणे आहे. white-space: nowrap;
हे टाळण्यासाठी तुमच्या अँकरमध्ये जोडा .
चार पर्याय उपलब्ध आहेत: वर, उजवीकडे, तळाशी आणि डावीकडे संरेखित.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम.
focus
वापरकर्त्याने केलेल्या पुढील क्लिकवर पॉपओव्हर्स डिसमिस करण्यासाठी ट्रिगर वापरा .
योग्य क्रॉस-ब्राउझर आणि क्रॉस-प्लॅटफॉर्म वर्तनासाठी, आपण टॅग वापरणे आवश्यक आहे, <a>
टॅग नाही ,<button>
आणि आपण role="button"
आणि tabindex
गुणधर्म देखील समाविष्ट करणे आवश्यक आहे.
JavaScript द्वारे popovers सक्षम करा:
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-
प्रमाणे जोडा data-animation=""
.
नाव | प्रकार | डीफॉल्ट | वर्णन |
---|---|---|---|
अॅनिमेशन | बुलियन | खरे | पॉपओव्हरवर CSS फेड संक्रमण लागू करा |
कंटेनर | स्ट्रिंग | खोटे | खोटे | एका विशिष्ट घटकाला पॉपओव्हर जोडते. उदाहरण: |
सामग्री | स्ट्रिंग | कार्य | '' |
एखादे फंक्शन दिले असल्यास, ते |
विलंब | संख्या | वस्तू | 0 | पॉपओव्हर (ms) दर्शविण्यास आणि लपविण्यास विलंब - मॅन्युअल ट्रिगर प्रकारावर लागू होत नाही जर नंबर दिला असेल तर, लपवा/शो या दोन्हीसाठी विलंब लागू केला जातो ऑब्जेक्ट संरचना आहे: |
html | बुलियन | खोटे | पॉपओव्हरमध्ये 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 | show जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो . |
दाखवले.bs.popover | जेव्हा वापरकर्त्यासाठी पॉपओव्हर दृश्यमान केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). |
hide.bs.popover | hide जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो . |
hidden.bs.popover | जेव्हा पॉपओव्हर वापरकर्त्यापासून लपवून ठेवणे पूर्ण होते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). |
inserted.bs.popover | show.bs.popover जेव्हा पॉपओव्हर टेम्पलेट DOM मध्ये जोडले गेले तेव्हा हा कार्यक्रम इव्हेंटनंतर काढला जातो . |
या प्लगइनसह सर्व अलर्ट संदेशांमध्ये डिसमिस कार्यक्षमता जोडा.
बटण वापरताना .close
, ते चे पहिले मूल असणे आवश्यक .alert-dismissible
आहे आणि मार्कअपमध्ये त्याच्या आधी कोणतीही मजकूर सामग्री येऊ शकत नाही.
हे आणि ते बदला आणि पुन्हा प्रयत्न करा. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.
data-dismiss="alert"
आपोआप अलर्ट क्लोज कार्यक्षमता देण्यासाठी फक्त तुमच्या क्लोज बटणावर जोडा . सूचना बंद केल्याने ते DOM मधून काढून टाकले जाते.
तुमच्या सूचना बंद करताना अॅनिमेशन वापरण्यासाठी, त्यांना आधीच लागू केलेले वर्ग .fade
आणि वर्ग आहेत याची खात्री करा..in
$().alert()
data-dismiss="alert"
विशेषता असलेल्या वंशज घटकांवरील क्लिक इव्हेंटसाठी अलर्ट ऐकते . (डेटा-एपीआयचे ऑटो-इनिशियलायझेशन वापरताना आवश्यक नाही.)
$().alert('close')
DOM मधून अॅलर्ट काढून टाकून बंद करते. .fade
घटकावर आणि वर्ग उपस्थित असल्यास .in
, ते काढून टाकण्यापूर्वी अलर्ट कमी होईल.
बूटस्ट्रॅप चे अॅलर्ट प्लगइन अॅलर्ट फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करते.
कार्यक्रमाचा प्रकार | वर्णन |
---|---|
close.bs.alert | close जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो . |
बंद.bs.alert | जेव्हा इशारा बंद केला जातो तेव्हा हा कार्यक्रम उडवला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). |
बटणांसह अधिक करा. कंट्रोल बटण स्टेटस किंवा टूलबार सारख्या अधिक घटकांसाठी बटणांचे गट तयार करा.
फायरफॉक्स पृष्ठ लोडवर नियंत्रण स्थिती (अक्षमता आणि तपासणी) कायम ठेवते . यासाठी एक उपाय वापरणे आवश्यक आहे autocomplete="off"
. Mozilla बग #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 जोडा. कोलॅप्स लागू करण्यासाठी विशेषता CSS निवडक स्वीकारते data-target
. संकुचित घटकामध्ये data-target
वर्ग जोडण्याची खात्री करा . collapse
तुम्हाला ते डीफॉल्ट उघडायचे असल्यास, अतिरिक्त वर्ग जोडा in
.
संकुचित नियंत्रणामध्ये एकॉर्डियन-सारखे गट व्यवस्थापन जोडण्यासाठी, डेटा विशेषता जोडा data-parent="#selector"
. हे कृतीत पाहण्यासाठी डेमोचा संदर्भ घ्या.
यासह व्यक्तिचलितपणे सक्षम करा:
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये 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.collaps | show जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो . |
दाखवले.bs.collaps | जेव्हा संकुचित घटक वापरकर्त्यासाठी दृश्यमान केला जातो तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). |
hide.bs.collaps | hide पद्धत कॉल केल्यावर हा कार्यक्रम ताबडतोब उडाला आहे. |
hidden.bs.collaps | जेव्हा संकुचित घटक वापरकर्त्यापासून लपविला जातो तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). |
कॅरोसेल सारख्या घटकांमधून सायकल चालवण्यासाठी स्लाइडशो घटक. नेस्टेड कॅरोसेल समर्थित नाहीत.
कॅरोसेल घटक सामान्यत: प्रवेशयोग्यता मानकांचे पालन करत नाही. तुम्हाला अनुपालन करण्याची आवश्यकता असल्यास, कृपया तुमची सामग्री सादर करण्यासाठी इतर पर्यायांचा विचार करा.
बूटस्ट्रॅप केवळ त्याच्या अॅनिमेशनसाठी 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"
पृष्ठ लोडपासून सुरू होणार्या अॅनिमेटिंग म्हणून कॅरोसेल चिन्हांकित करण्यासाठी विशेषता वापरली जाते . हे समान कॅरोसेलच्या (अनावश्यक आणि अनावश्यक) स्पष्ट JavaScript इनिशिएलायझेशनसह संयोजनात वापरले जाऊ शकत नाही.
यासह कॅरोसेलला मॅन्युअली कॉल करा:
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये 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.bs.carousel | ही घटना ताबडतोब सुरू होते जेव्हा slide उदाहरण पद्धत लागू केली जाते. |
slid.bs.carousel | कॅरोसेलने स्लाइड संक्रमण पूर्ण केल्यावर हा इव्हेंट फायर केला जातो. |
position: fixed;
सह सापडलेल्या प्रभावाचे अनुकरण करून, affix प्लगइन चालू आणि बंद टॉगल करते position: sticky;
. उजवीकडील सबनेव्हिगेशन हे ऍफिक्स प्लगइनचे थेट डेमो आहे.
डेटा विशेषतांद्वारे किंवा तुमच्या स्वतःच्या JavaScript द्वारे अॅफिक्स प्लगइन वापरा.दोन्ही परिस्थितींमध्ये, तुम्ही तुमच्या जोडलेल्या सामग्रीची स्थिती आणि रुंदीसाठी CSS प्रदान करणे आवश्यक आहे.
टीप: सफारी रेंडरिंग बगमुळे ओढलेल्या किंवा पुश केलेल्या स्तंभासारख्या तुलनेने स्थानबद्ध घटकामध्ये असलेल्या घटकावर अॅफिक्स प्लगइन वापरू नका. .
अॅफिक्स प्लगइन तीन वर्गांमध्ये टॉगल करते, प्रत्येक विशिष्ट स्थितीचे प्रतिनिधित्व करते: .affix
, .affix-top
, आणि .affix-bottom
. position: fixed;
तुम्ही on च्या अपवादासह, शैली प्रदान करणे आवश्यक आहे.affix
वास्तविक पोझिशन्स हाताळण्यासाठी तुम्ही स्वतः या वर्गांसाठी (या प्लगइनपासून स्वतंत्र) ऑनचा
अॅफिक्स प्लगइन कसे कार्य करते ते येथे आहे:
.affix-top
प्रारंभ करण्यासाठी, घटक त्याच्या सर्वोच्च स्थानावर आहे हे दर्शवण्यासाठीया टप्प्यावर CSS पोझिशनिंग आवश्यक नाही..affix
बदलते .affix-top
आणि सेट करते position: fixed;
(बूटस्ट्रॅपच्या CSS द्वारे प्रदान केलेले)..affix
जर तळाचा ऑफसेट परिभाषित केला असेल, तर स्क्रोल करताना ते सोबत बदलले पाहिजे .affix-bottom
. ऑफसेट पर्यायी असल्याने, एक सेट करण्यासाठी तुम्हाला योग्य CSS सेट करणे आवश्यक आहे. या प्रकरणात, position: absolute;
आवश्यक तेव्हा जोडा. तेथून घटक कुठे ठेवायचा हे ठरवण्यासाठी प्लगइन डेटा विशेषता किंवा JavaScript पर्याय वापरते.खालीलपैकी कोणत्याही वापर पर्यायांसाठी तुमचा CSS सेट करण्यासाठी वरील पायऱ्या फॉलो करा.
कोणत्याही घटकावर सहजतेने affix वर्तन जोडण्यासाठी, फक्त data-spy="affix"
तुम्ही ज्या घटकाची हेरगिरी करू इच्छिता त्यात जोडा. घटकाचे पिनिंग कधी टॉगल करायचे ते परिभाषित करण्यासाठी ऑफसेट वापरा.
JavaScript द्वारे affix प्लगइनवर कॉल करा:
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये 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 | घटक तळाशी चिकटवल्यानंतर हा कार्यक्रम काढला जातो. |