जावास्क्रिप्ट
एक डझना परस चड सानुकूल jQuery प्लगइनांनी Bootstrap च्या घटकांक जिवीत हाडचें. सहजतायेन सगळ्यांचो आस्पाव करचो, वा एक एक करून.
एक डझना परस चड सानुकूल jQuery प्लगइनांनी Bootstrap च्या घटकांक जिवीत हाडचें. सहजतायेन सगळ्यांचो आस्पाव करचो, वा एक एक करून.
प्लगइन वैयक्तीकपणान (Botstrap ची वैयक्तीक *.js
फायली वापरून), वा सगळे एकाच वेळार (वापर करून bootstrap.js
वा मिनीफायड करून bootstrap.min.js
) समाविष्ट करूंक शकतात.
दोनूय bootstrap.js
आनी bootstrap.min.js
सगळे प्लगइन एकाच फायलीन आसतात. फकत एकूच आस्पाव करचो.
कांय प्लगइन आनी CSS घटक हेर प्लगइनांचेर आदारून आसतात. तुमी प्लगइन वैयक्तीकपणान समाविष्ट केल्यार, डॉक्सांत ह्यो अवलंबन तपासपाची खात्री करात. तशेंच लक्षांत दवरात की सगळे प्लगइन jQuery चेर आदारीत आसात (हाचो अर्थ प्लगइन फायलीं पयलीं jQuery समाविष्ट करपाक जाय ). jQuery च्या खंयच्या आवृत्त्यांक तेंको आसा तें पळोवपाक आमचो सल्लो घेयात .bower.json
तुमी सगळे Bootstrap प्लगइन शुध्दपणान मार्कअप API वरवीं वापरूं येतात, जावास्क्रिप्टाची एकूय ओळ बरयनासतना. हो Bootstrap चो पयल्या दर्जाचो API आसा आनी प्लगइन वापरतना तुमचो पयलो विचार आसपाक जाय.
म्हणल्यार, कांय परिस्थितींत ही कार्यक्षमताय बंद करप गरजेचें आसूं येता. देखून, आमी कडेन नावस्पेस केल्ल्या दस्तावेजाचेर सगळ्यो घडणुको अनबाइंड करून डेटा गुणधर्म API अक्षम करपाचीय क्षमता दितात data-api
. हें अशें दिसता: १.
पर्यायीपणान, विशिश्ट प्लगइनाक लक्ष्य करपाक, फकत प्लगइनाचे नांव नांवस्थान म्हणून डेटा-api नांवस्थाना वांगडा अशे तरेन समाविष्ट करात:
एकाच घटकाचेर जायत्या प्लगइनांतल्यान डेटा गुणधर्म वापरूं नाकात. देखीक, बटणाक टूलटिप आनी मोडल टॉगल करप दोनूय आसूंक शकनात. हें साध्य करपाखातीर एक आवरण घटक वापरात.
तशेंच तुमकां सगळे बूटस्ट्रॅप प्लगइन शुध्दपणान जावास्क्रिप्ट एपीआय वरवीं वापरपाक मेळपाक जाय अशें आमी मानतात. सगळे भौशीक API एकूच, साखळी करपाक येवपी पद्दती आसात, आनी ताचेर कारवाय केल्लो संग्रह परत दितात.
सगळ्या पद्दतींनी पर्यायी पर्याय वस्तू, विशिश्ट पद्दतीक लक्ष्य करपी स्ट्रिंग स्वीकारपाक जाय, वा कांयच ना (जें मुलभूत वर्तनान प्लगइन सुरू करता):
दरेक प्लगइन आपलो कच्चो कंस्ट्रक्टरय एका Constructor
गुणधर्माचेर उक्तो करता: $.fn.popover.Constructor
. तुमकां विशिश्ट प्लगइन दृष्टांत मेळोवपाक जाय जाल्यार, ती थेट एका घटका कडल्यान परत मेळोवची: $('[rel="popover"]').data('popover')
.
तुमी प्लगइनाची वस्तू बदलून प्लगइनाची मुलभूत मांडावळी बदलूंक शकतात Constructor.DEFAULTS
:
केन्ना केन्नाय हेर UI फ्रेमवर्कां वांगडा Bootstrap प्लगइन वापरप गरजेचें आसता. ह्या परिस्थितींत, नेमस्पेस टक्कर केन्ना केन्नाय जावंक शकता. अशें जाल्यार, तुमकां .noConflict
मोल परत करपाक जाय आशिल्ल्या प्लगइनाचेर तुमी कॉल करूंक शकतात.
बूटस्ट्रॅप चडशा प्लगइनांच्या खाशेल्या कृतींखातीर सानुकूल घडणुको पुरवण करता. सादारणपणान हीं अव्यय आनी भूतकाळांत येतात - जंय अव्यय (ex. show
) घडणुकेच्या सुरवेक सुरू जाता, आनी ताचें भूतकाळांतलें रूप (ex. shown
) क्रिया पुराय जातकच सुरू जाता.
3.0.0 प्रमाणें, सगळ्यो बूटस्ट्रॅप घडणुको नेमस्पेस केल्यात.
सगळ्यो अव्यय घडणुको preventDefault
कार्यक्षमता दितात. हाका लागून कृती सुरू जावचे पयलीं ताची कार्यान्वयन थांबवपाची तांक मेळटा.
Bootstrap च्या दरेक jQuery प्लगइनाची आवृत्ती VERSION
प्लगइनाच्या कंस्ट्रक्टराच्या गुणधर्मांतल्यान ऍक्सॅस करूंक शकता. देखीक, टूलटिप प्लगइन खातीर:
जावास्क्रिप्ट अक्षम केल्यार बूटस्ट्रॅपाचे प्लगइन खास करून सुंदरपणान फाटीं पडनात. ह्या प्रकरणांत तुमकां वापरप्याच्या अणभवाची काळजी आसल्यार, <noscript>
तुमच्या वापरप्यांक परिस्थिती स्पश्ट करपाक (आनी जावास्क्रिप्ट कशी परतून सक्षम करची) वापरात, आनी/वा तुमचे स्वताचे सानुकूल फॉलबॅक जोडात.
बूटस्ट्रॅप अधिकृतपणान प्रोटोटायप वा jQuery UI सारकिल्या तिसऱ्या पक्षाच्या जावास्क्रिप्ट लायब्ररींक तेंको दिना . घडणुको आसून लेगीत .noConflict
आनी नावस्पेस केल्लीं, सुसंगती समस्या आसूं येतात जी तुमकां स्वता सुटावी करची पडटली.
साद्या संक्रमण प्रभावां खातीर, transition.js
हेर JS फायलीं वांगडा एकदां समाविष्ट करात. तुमी संकलित (वा ल्हान केल्लें) वापरतात जाल्यार bootstrap.js
, हें समाविष्ट करपाची गरज ना-तें पयलींच आसा.
Transition.js हो transitionEnd
घडणुकांखातीर मुळावो मदतगार तशेंच CSS संक्रमण एमुलेटर आसा. CSS संक्रमण समर्थन तपासपाक आनी फांशी संक्रमण पकडपाक हेर प्लगइनांनी ताचो वापर केला.
सकयल दिल्लो जावास्क्रिप्ट स्निपेट वापरून संक्रमण जागतीक रितीन अक्षम करूंक शकतात, जो लोड केल्या उपरांत transition.js
(वा bootstrap.js
वा bootstrap.min.js
, प्रकरण प्रमाणें) येवंक जाय:
मोडल सुगम, पूण लवचीक, उण्यांत उणी गरज आशिल्ली कार्यक्षमताय आनी स्मार्ट मुलभूत आशिल्ले संवाद प्रॉम्प्ट आसात.
दुसरो दिसता आसतना मोडल उगडचो न्हय हाची खात्री करात. एका वेळार एका परस चड मोडल दाखोवपाक सानुकूल कोड जाय पडटा.
मोडलाच्या दिसपाचेर आनी/वा कार्यक्षमतेक परिणाम करपी हेर घटक टाळपाखातीर तुमच्या दस्तावेजांत मोडलाचो HTML कोड सदांच वयल्या पांवड्यावेल्या सुवातेर दवरपाचो यत्न करात.
मोबायल डिव्हायसांचेर मोडल वापरपा संबंदी कांय सावधानताय आसात. तपशीलां खातीर आमचे ब्राउझर आदार डॉक्स पळयात.
HTML5 आपली अर्थशास्त्र कशी व्याख्या करता ताका लागून, autofocus
HTML गुणधर्माचो बूटस्ट्रॅप मोडलांत कसलोच परिणाम जायना. तोच परिणाम मेळोवपाखातीर, कांय सानुकूल जावास्क्रिप्ट वापरात:
तळभागांत हेडर, बॉडी, आनी कृतीचो संच आशिल्लो रेंडर केल्लो मोडल.
सकयल दिल्ल्या बटणाचेर क्लिक करून जावास्क्रिप्ट वरवीं मोडल टॉगल करात. तो सकयल सरकतलो आनी पानाच्या वयल्या भागांतल्यान भितर फीको जातलो.
role="dialog"
आनी aria-labelledby="..."
, मोडल शीर्षकाचो संदर्भ दिवन, to , .modal
आनी स्वताक जोडपाची खात्री करात .role="document"
.modal-dialog
ते भायर, तुमी तुमच्या मोडल संवादाचें वर्णन aria-describedby
on कडेन दिवंक शकतात .modal
.
YouTube व्हिडियो मोडलांत एम्बेड करपाक आपोआप प्लेबॅक थांबवपाक Bootstrap त नाशिल्ली अतिरिक्त JavaScript जाय आनी हेर. चड म्हायती खातीर हें उपकाराचें स्टॅक ओव्हरफ्लो पोस्ट पळयात .
मोडलांक दोन पर्यायी आकार आसतात, एक चेर दवरपाक संशोधक वर्गांवरवीं उपलब्ध आसात .modal-dialog
.
पळोवपाक फिकट जावचे परस फकत दिसपी मोडलां खातीर, .fade
तुमच्या मोडल मार्कअपांतल्यान वर्ग काडून उडोवचो.
मोडला भितर Bootstrap ग्रिड प्रणालीचो फायदो घेवपाक, फकत .row
s भितर nest करात .modal-body
आनी मागीर सामान्य ग्रिड प्रणाली वर्ग वापरात.
सगळे एकूच मोडल ट्रिगर करपी बटणांचो एक गट आसा, फकत मात्सो वेगळो आशय आशिल्लो? खंयचें बटण क्लिक केलां ताचेर आदारून मोडलाची आशय बदलपाक वापरात event.relatedTarget
आनी HTML data-*
गुणधर्म ( कदाचित jQuery वरवीं ). ह्या विशीं तपशीलां खातीर मोडल इव्हेंट डॉक्स पळयात relatedTarget
, .
मोडल प्लगइन मागणी प्रमाणें, डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं तुमची लिपिल्ली सामुग्री टॉगल करता. तशेंच तो मुलभूत स्क्रोलिंग वर्तनाचेर अधिलिखित .modal-open
करपाक जोडटा आनी मोडला भायर क्लिक करतना दाखयल्ले मोडल काडून उडोवपाखातीर क्लिक क्षेत्र पुरवण करपाक a तयार करता.<body>
.modal-backdrop
जावास्क्रिप्ट बरयनासतना मोडल सक्रिय करात. data-toggle="modal"
बटणा सारकिल्या नियंत्रक घटकाचेर सेट करात , एक वा टॉगल करपाक विशिश्ट मोडलाक लक्ष्य करपाक data-target="#foo"
वा वांगडा सेट करात.href="#foo"
myModal
जावास्क्रिप्टाच्या एकाच ओळीन id आशिल्ल्या मोडलाक कॉल करात :
पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात 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 घडणुकेचो गुणधर्म म्हणून उपलब्ध आसा. |
दाखयलां.bs.modal | वापरप्याक मोडल दिसपाक लायल्यार ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले). क्लिकाक लागून जाल्यार, क्लिक केल्लो घटक relatedTarget घडणुकेचो गुणधर्म म्हणून उपलब्ध आसा. |
लिपोवप.बी.एस.मोडल | hide दृष्टांत पद्दत कॉल केल्या उपरांत ही घडणूक रोखडीच फायर जाता . |
लिपलां.बीएस.मोडल | वापरप्या कडल्यान मोडल लिपोवप सोंपतकच ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले). |
लोड केला.बीएस.मोडल | remote जेन्ना मोडलान पर्याय वापरून सामुग्री लोड केल्या तेन्ना ही घडणूक फायर जाता . |
ह्या साद्या प्लगइनान लागीं लागीं खंयच्याय वस्तूक ड्रॉपडावन मेनू जोडात, तातूंत नवबार, टॅब, आनी गोळ्यांचो आस्पाव आसा.
.open
डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं, ड्रॉपडावन प्लगइन पालक यादी आयटमाचेर वर्ग टॉगल करून लिपिल्ली सामुग्री (ड्रॉपडावन मेनू) टॉगल करता .
मोबायल डिव्हायसांचेर, ड्रॉपडावन उगडप .dropdown-backdrop
मेनू भायर टॅप करतना ड्रॉपडावन मेनू बंद करपा खातीर टॅप क्षेत्र म्हणून जोडटा, योग्य iOS आदाराची गरज. हाचो अर्थ उक्त्या ड्रॉपडावन मेनूंतल्यान वेगळ्या ड्रॉपडावन मेनूंत वचपाक मोबायलाचेर अतिरिक्त टॅप करचो पडटा.
टिप: data-toggle="dropdown"
ऍप्लिकेशन पातळेचेर ड्रॉपडावन मेनू बंद करपाखातीर गुणधर्माचेर आदारीत आसा, देखून तो सदांच वापरप ही एक बरी कल्पना.
data-toggle="dropdown"
ड्रॉपडावन टॉगल करपाक दुव्यांत वा बटणांत जोडात .
दुवो बटणां वरवीं URL अखंड दवरपाक, data-target
बदला गुणधर्म वापरात href="#"
.
जावास्क्रिप्ट वरवीं ड्रॉपडावनांक कॉल करात:
data-toggle="dropdown"
अजूनय गरज आसातुमी तुमच्या ड्रॉपडावनाक जावास्क्रिप्ट वरवीं कॉल करतात वा ताचे बदला डेटा-api वापरतात हाची पर्वा करिनासतना, data-toggle="dropdown"
ड्रॉपडावनाच्या ट्रिगर घटकाचेर सदांच हाजीर आसप गरजेचें आसा.
कांयच ना
$().dropdown('toggle')
दिल्ल्या नवबार वा टॅब केल्ल्या नेव्हिगेशनाचे ड्रॉपडावन मेनू टॉगल करता.
सगळ्यो ड्रॉपडावन घडणुको .dropdown-menu
's पालक घटकाचेर फायर करतात.
सगळ्या ड्रॉपडावन घडणुकांक एक relatedTarget
गुणधर्म आसता, जाचें मोल टॉगलिंग एंकर घटक आसा.
इव्हेंट प्रकार | वर्णन |
---|---|
show.bs.ड्रॉपडावन करचें | शो दृष्टांत पद्दत कॉल करतना ही घडणूक रोखडीच फायर जाता. |
दाखयलां.bs.ड्रॉपडावन | वापरप्याक ड्रॉपडावन दिसपाक लायल्यार ही घडणूक फायर जाता (CSS संक्रमणांची वाट पळयतले, पुराय जावपाक). |
hide.bs.ड्रॉपडावन करप | ही घडणूक रोखडीच फायर जाता जेन्ना hide instance पद्दत कॉल केल्या. |
लिपलां.बीएस.ड्रॉपडावन | वापरप्या कडल्यान लिपोवपाचें ड्रॉपडावन सोंपतकच ही घडणूक फायर जाता (CSS संक्रमणांची वाट पळयतले, पुराय जावपाक). |
ScrollSpy प्लगइन स्क्रोल स्थितीचेर आदारीत nav लक्ष्य आपोआप अद्ययावत करपा खातीर आसा. नवबाराच्या सकयल आशिल्लो वाठार स्क्रोल करात आनी सक्रिय वर्ग बदलप पळयात. ड्रॉपडावन उप आयटम तशेंच हायलाइट करतले.
जाहिरात लेगिंग keytar, ब्रंच आयडी कला पार्टी dolor laboure. पिचफोर्क yr enim लो-फाय ते विकून सोंपचे पयलीं qui. टम्बलर फार्म-टू-टेबल सायकल हक्क कितेंय आसूं. अनिम केफियेह कार्लेस कार्डिगन. Velit seitan mcsweeney च्या फोटो बूथ 3 वाग चंद्र irure. Cosby स्वेटर लोमो जीन शॉर्ट्स, विल्यम्सबर्ग हुडी मिनिम qui तुमी घडये तांचे विशीं आयकूं नात एट कार्डिगन ट्रस्ट फंड culpa बायोडीझेल wes anderson सौंदर्यशास्त्र. निहिल गोंदलेले accusamus, cred विडंबना बायोडीझेल keffiyeh कारागीर ullamco consequat.
वेनियम मार्फा मिश्यो स्केटबोर्ड, adipisicing fugiat velit पिचफोर्क दाढ़ी. फ्रीगन दाढी aliqua cupidatat mcsweeney च्या vero. कामदेवताट चार लोको निसी, ईए हेल्व्हेटिका नुल्ला कार्लेस. गोंदण केल्लो कॉस्बी स्वेटर फूड ट्रक, mcsweeney's quis नॉन फ्रीगन विनाइल. लो-फाय वेस अँडरसन +1 सार्टोरियल. कार्लेस बिगर सौंदर्य व्यायाम quis gentrify. ब्रुकलीन adipisicing क्राफ्ट बियर वाइस keytar deserunt.
ओकेकॅट कोमोडो अॅलिक्वा डेलेक्टस. फॅप क्राफ्ट बियर deserunt स्केटबोर्ड ईए. लोमो सायकल हक्क adipisicing बान्ह मी, velit ea sunt फुडले पातळे locavore एकल-मूल कॉफी in magna veniam. उच्च जीवन आयडी विनाइल, इको पार्क consequat quis aliquip बान्ह मी पिचफोर्क. वेरो व्हीएचएस एस्ट एडिपिसिसिंग. Consectetur nisi DIY किमान संदेशवाहक बॅग. Cred ex in, टिकावू delectus consectetur फॅनी पॅक आयफोन.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
केतार ट्वी ब्लॉग, कुलपा संदेशवाहक बॅग मार्फा कितेंय डिलेक्टस खाद्य ट्रक. सॅपिएंटे सिंथ आयडी अॅसुमेंडा. Locavore sed helvetica cliche विडंबना, थंडरकॅट्स तुमी घडये तांचे विशीं आयकूं नात consequat hoodie ग्लुटेन-मुक्त लो-फाय fap aliquip. Labore एलिट placeat ते विकले पयलीं, टेरी रिचर्डसन proident ब्रंच nesciunt quis cosby स्वेटर pariatur keffiyeh ut helvetica कारागीर. कार्डिगन क्राफ्ट बियर seitan रेडीमेड velit. व्हीएचएस चॅम्ब्रे लाबोरिस टेम्पोर व्हेनिअम. अनिम मोलिट मिनिमा कोमोडो उल्लमको थंडरकॅट्स.
नवबार दुव्यांक सोडोवपाक येवपी id लक्ष्य आसपाक जाय. देखीक, a <a href="#home">home</a>
DOM च्या कितें तरी सारकें अनुरूप आसूंक जाय <div id="home"></div>
.
:visible
लक्ष्य घटकांकडेन दुर्लक्ष केलें:visible
jQuery प्रमाणें नाशिल्ले लक्ष्य घटक दुर्लक्ष करतले आनी तांचे संबंदीत nav आयटम केन्नाच हायलाइट करचे नात.
कार्यान्वयन पद्दत कितेंय आसूं, scrollspy position: relative;
तुमकां गुप्तचर करतात त्या घटकाचेर वापरपाची गरज आसा. चडशा प्रकरणांनी हें <body>
. , सोडून हेर घटकांचेर स्क्रोलस्पाय करतना , एक संच आनी लागू <body>
करपाची खात्री करात .height
overflow-y: scroll;
तुमच्या टॉपबार नेव्हिगेशनांत scrollspy वर्तन सहज जोडपाक, data-spy="scroll"
तुमकां गुप्तचर करपाक जाय आशिल्ल्या घटकाक जोडात (चड करून हें आसतलें <body>
). मागीर data-target
खंयच्याय बूटस्ट्रॅप घटकाच्या पालक घटकाच्या ID वा वर्गा वांगडा गुणधर्म जोडात .nav
.
तुमच्या CSS मदीं जोडल्या उपरांत position: relative;
, जावास्क्रिप्ट वरवीं स्क्रोलस्पायक कॉल करात:
.scrollspy('refresh')
DOM वयल्यान घटक जोडपाक वा काडपा वांगडा scrollspy वापरतना, तुमकां रिफ्रेश पद्दत अशे तरेन कॉल करची पडटली:
पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-
, जशें data-offset=""
.
नांव | प्रकार | डिफॉल्ट | वर्णन |
---|---|---|---|
ऑफसेट करप | आंकडो | १० हें नांव | स्क्रोलाची सुवात मेजतना वयल्यान ऑफसेट करपाक पिक्सेल. |
इव्हेंट प्रकार | वर्णन |
---|---|
सक्रिय करप.bs.scrollspy | जेन्ना जेन्ना स्क्रोलस्पाय कडल्यान नवी वस्त सक्रिय जाता तेन्ना ही घडणूक फायर जाता. |
थळाव्या सामुग्रीच्या फलकांतल्यान संक्रमणाक जलद, गतिशील टॅब कार्यक्षमताय जोडात, ड्रॉपडावन मेनू वरवीं लेगीत. नेस्टेड टॅब समर्थीत नात.
कच्चो डेनिम तुमी घडये तांचे विशीं आयकूं नातल्ले जीन शॉर्ट्स ऑस्टिन. नेस्सिउंट टोफू स्टंपटाउन एलिक्वा, रेट्रो सिंथ मास्टर क्लींज. मिश्यो क्लिशी टेम्पोर, विल्यम्सबर्ग कार्ल्स वेगन हेल्व्हेटिका. Reprehenderit कसाई रेट्रो केफीयेह ड्रीमकैचर सिंथ. कॉस्बी स्वेटर ईयू बान्ह मी, क्यूई इरुरे टेरी रिचर्डसन पूर्व स्क्वीड. Aliquip placeat साल्विया सिलम आयफोन. Seitan aliquip quis कार्डिगन अमेरिकन परिधान, कसाई 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.
टॅब करपाक योग्य क्षेत्रां जोडपाक हें प्लगइन टॅब केल्ल्या नेव्हिगेशन घटकाचो विस्तार करता.
जावास्क्रिप्ट वरवीं टॅब करपाक येवपी टॅब सक्षम करात (दरेक टॅब वैयक्तीकपणान सक्रिय करपाची गरज आसा):
तुमी जायत्या तरांनी वैयक्तीक टॅब सक्रिय करूंक शकतात:
data-toggle="tab"
तुमी फकत स्पश्ट करून वा data-toggle="pill"
घटकाचेर कसलीच जावास्क्रिप्ट बरयनासतना टॅब वा पिल नेव्हिगेशन सक्रिय करूंक शकतात . nav
टॅबांत and nav-tabs
वर्ग जोडल्यार ul
बूटस्ट्रॅप टॅब स्टायलिंग लागू जातली , जाल्यार nav
and nav-pills
वर्ग जोडल्यार पिल स्टायलिंग लागू जातली .
टॅब फीके करपाक, .fade
दरेक जोडात .tab-pane
. पयल्या टॅब फलकांतय .in
सुरवातीची आशय दिसपाक जाय.
$().tab
टॅब घटक आनी सामुग्री कंटेनर सक्रिय करता. टॅबांत एक तर एक data-target
वा एक href
लक्ष्य करपी एक कंटेनर नोड DOM त आसपाक जाय. वयल्या उदाहरणांनी, टॅब हे गुणधर्म आशिल्ले <a>
s आसात.data-toggle="tab"
.tab('show')
दिल्लो टॅब निवडटा आनी ताचे संबंदीत आशय दाखयता. आदीं निवडिल्लो हेर खंयचोय टॅब निवडूंक नाशिल्लो जाता आनी ताची संबंदीत आशय लिपता. टॅब फलक प्रत्यक्षांत दाखोवचे पयलीं (म्हळ्यार shown.bs.tab
घडणूक घडचे पयलीं) कॉलराक परतता.
नवो टॅब दाखयतना, घडणुको सकयल दिल्ल्या क्रमांकान फायर करतात:
hide.bs.tab
(सद्याच्या सक्रिय टॅबाचेर)show.bs.tab
(दाखोवपाच्या टॅबाचेर)hidden.bs.tab
(फाटल्या सक्रिय टॅबाचेर, hide.bs.tab
घडणुके खातीर आशिल्लोच)shown.bs.tab
show.bs.tab
(नव्यान-सक्रीय नुस्तें दाखयल्ल्या टॅबाचेर, घडणुके खातीर तसोच )जर खंयचोच टॅब पयलींच सक्रिय नाशिल्लो जाल्यार, मागीर hide.bs.tab
आनी hidden.bs.tab
घडणुको फायर करच्यो नात.
इव्हेंट प्रकार | वर्णन |
---|---|
दाखोवचो.bs.टॅब | ही इव्हेंट टॅब शोचेर फायर करता, पूण नवो टॅब दाखोवचे पयलीं. सक्रिय टॅब आनी आदलो सक्रिय टॅब (उपलब्ध आसल्यार) अनुक्रमान लक्ष्य करपाक event.target आनी वापरात .event.relatedTarget |
दाखयलां.bs.टॅब | टॅब दाखयल्या उपरांत ही घडणूक टॅब शोचेर फायर जाता. सक्रिय टॅब आनी आदलो सक्रिय टॅब (उपलब्ध आसल्यार) अनुक्रमान लक्ष्य करपाक event.target आनी वापरात .event.relatedTarget |
लिपोवप.बी.एस.टॅब | नवो टॅब दाखोवपाचो आसता तेन्ना ही घडणूक फायर जाता (आनी अशे तरेन आदलो सक्रिय टॅब लिपोवपाचो आसता). सद्याचो सक्रिय टॅब आनी बेगीन सक्रिय जावपी नवो टॅब अनुक्रमान लक्ष्य करपाक event.target आनी वापरात .event.relatedTarget |
लिपलां.बीएस.टॅब | नवो टॅब दाखयल्या उपरांत ही घडणूक फायर जाता (आनी अशे तरेन आदलो सक्रिय टॅब लिपला). आदलो सक्रिय टॅब आनी नवो सक्रिय टॅब अनुक्रमान लक्ष्य करपाक event.target आनी वापरात .event.relatedTarget |
जेसन फ्रेम हांणी बरयल्ल्या उत्कृश्ट jQuery.tipsy प्लगइनांतल्यान प्रेरीत; साधनटिप ही एक अद्ययावत आवृत्ती आसा, जी प्रतिमांचेर आदारीत ना, एनिमेशनांखातीर CSS3 वापरतात, आनी थळाव्या शीर्षक सांठवणाखातीर डेटा-गुणधर्म वापरतात.
शून्य लांबाय शीर्षकां आशिल्लीं साधनटिप केन्नाच दाखयना.
साधनसुचोवण्यो पळोवपाक सकयल दिल्ल्या दुव्यांचेर होवर करात:
टाइट पॅंट नेक्स्ट लेव्हल केफीयेह तुमी घडये तांचे विशीं आयकूं नात. फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बॅग स्टंपटाउन. फार्म-टू-टेबल seitan, mcsweeney च्या fixie टिकावू क्विनोआ 8-बिट अमेरिकन परिधानांत एक टेरी रिचर्डसन vinyl chambray आसा. दाढी स्टंपटाउन, कार्डिगन बान्ह मी लोमो थंडरकॅट्स. टोफू बायोडीझेल विल्यम्सबर्ग मार्फा, चार लोको mcsweeney च्या निवळ वेगन chambray. एक खरोच विडंबनात्मक कारागीर whatever keytar , scenester शेत-ते-मेज banksy ऑस्टिन ट्विटर हाताळणी freegan cred कच्चो डेनिम एकल-मूल कॉफी व्हायरल.
चार पर्याय उपलब्ध आसात: वयर, उजवें, सकयल, आनी डावें संरेखित.
कार्यक्षमताय कारणांक लागून, Tooltip आनी Popover data-apis ऑप्ट-इन आसात, म्हळ्यार तुमी स्वता तांकां आरंभ करपाक जाय .
पानाचेर सगळ्यो टूलटिप्स आरंभ करपाचो एक मार्ग म्हणल्यार तांच्या data-toggle
गुणधर्मा प्रमाणें तीं निवडप:
साधन टिप प्लगइन मागणीचेर सामुग्री आनी मार्कअप तयार करता, आनी पूर्वनिर्धारीतपणान साधन टिपां तांच्या ट्रिगर घटका उपरांत दवरता.
जावास्क्रिप्ट वरवीं टूलटिप ट्रिगर करात:
टूलटिपा खातीर गरजेचो मार्कअप फकत एक data
गुणधर्म आसा आनी title
HTML घटकाचेर तुमकां टूलटिप आसपाक जाय. टूलटिपाचो निर्माण केल्लो मार्कअप मातसो सोपो आसा, जरी ताका एक सुवात जाय पडटा (मुळाव्यान, top
प्लगइनान सेट केला).
केन्ना केन्नाय तुमकां जायत्यो ओळी गुठलावपी हायपरलिंकांत टूलटिप जोडपाक जाय. टूलटिप प्लगइनाची मुलभूत वागणूक म्हळ्यार ताका आडवें आनी उबें केंद्रीत करप. white-space: nowrap;
हें टाळपा खातीर तुमच्या एंकरांत जोडचें .
.btn-group
a वा an भितरल्या घटकांचेर .input-group
, वा कोश्टक संबंदीत घटकांचेर ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, ) साधनसुचोवण्यो वापरतना <tfoot>
, तुमकां container: 'body'
नाका आशिल्ले दुश्परिणाम टाळपाक पर्याय निर्देशीत करचो पडटलो (सकयल दस्तावेजीत केला) (देखीक घटक रूंद वाडटा आनी/ वा टूलटिप ट्रिगर करतना ताचे वाटकुळे कोनशे गमावप).
tabindex="0"
कीबोर्डान नेव्हिगेट करपी वापरप्यां खातीर, आनी खासा करून सहाय्यक तंत्रज��ञानाच्या वापरप्यां खातीर, तुमी फकत दुवे, फॉर्म नियंत्रण, वा गुणधर्म आशिल्ल्या खंयच्याय मनमानी घटक अशा कीबोर्ड-केंद्रीत करपाक येवपी घटकांक साधनसुचोवण्यो जोडपाक जाय .
disabled
a वा .disabled
घटकाक टूलटिप जोडपाक , घटक a च्या भितर दवरात आनी ताचे बदला <div>
टूलटिप ताचेर लागू करात .<div>
पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-
, जशें data-animation=""
.
नांव | प्रकार | डिफॉल्ट | वर्णन |
---|---|---|---|
एनिमेशन करप | बूलियन हें नांव | खरें | साधनटिपाचेर CSS फेड संक्रमण लागू करात |
आयदनांत घालतात | तार | फट | फट | साधनटिप एका विशिश्ट घटकाक जोडटा. देखीक: |
कळाव | संख्या | ऑब्जॅक्ट | ० आनी ० | साधनटिप दाखोवपाक आनी लिपोवपाक कळाव (ms) - हाताळणी ट्रिगर प्रकाराक लागू जायना क्रमांक पुरवण केल्यार, लिपोवप/दाखोवप ह्या दोनूय गजालींक विलंब लागू जाता वस्तूची रचणूक अशी आसा: १. |
एचटीएमएल हें नांव | बूलियन हें नांव | फट | टूलटिपांत HTML घालात. text खोटें आसल्यार, DOM त सामुग्री घालपाखातीर jQuery ची पद्दत वापरतले. XSS हल्ल्याचो हुस्को आसल्यार मजकूर वापरात. |
प्लेसमेंट करप | तार | कार्य | 'वयर' | टूलटिप कशें स्थापन करचें - वयर | तळें | उवें | उजवें | ऑटो. जेन्ना प्लेसमेंट थारावपाखातीर फंक्शन वापरतात, तेन्ना ताका टूलटिप DOM नोड ताचो पयलो आर्ग्युमेंट आनी ट्रिगरिंग एलिमेंट DOM नोड दुसरो म्हणून कॉल करतात. संदर्भ |
निवडक अशें म्हण्टात | माळ | फट | निवडक पुरवण केल्यार, साधनटिप वस्तू निर्दिश्ट लक्ष्यांक प्रत्यायित करतले. वेव्हारांत, हाचो वापर डायनॅमिक एचटीएमएल सामुग्री कडेन साधनसूची जोडिल्ली आसपाक सक्षम करपाक जाता. हें आनी एक माहितीपूर्ण उदाहरण पळयात . |
साचा | माळ | '<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.टूलटिप दाखोवचो | show दृष्टांत पद्दत कॉल करतना ही घडणूक रोखडीच फायर जाता . |
दाखयलां.bs.tooltip | साधनटिप वापरप्याक दिसपी केल्या उपरांत ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले). |
hide.bs.टूलटिप हें नांव | hide दृष्टांत पद्दत कॉल केल्या उपरांत ही घडणूक रोखडीच फायर जाता . |
लिपलां.बीएस.टूलटिप | वापरप्या कडल्यान साधनटिप लिपोवप सोंपतकच ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले). |
घाल्लें.bs.tooltip | show.bs.tooltip साधनटिप साचा DOM कडेन जोडल्या उपरांत ही घडणूक घडणुके उपरांत फायर करतात. |
दुय्यम म्हायती दवरपा खातीर खंयच्याय घटकाक, iPad चेर आशिल्ल्या प्रमाणें, सामुग्रीचे ल्हान आच्छादन जोडात.
ज्या पोपोव्हरांचें शीर्षक आनी आशय दोनूय शून्य लांबायेचे आसतात, ते केन्नाच दाखोवंक नात.
Popovers तुमच्या Bootstrap आवृत्तींत टूलटिप प्लगइन समाविष्ट करपाची गरज आसा.
कार्यक्षमताय कारणांक लागून, Tooltip आनी Popover data-apis ऑप्ट-इन आसात, म्हळ्यार तुमी स्वता तांकां आरंभ करपाक जाय .
पानाचेर सगळे पॉपओव्हर आरंभ करपाचो एक मार्ग म्हणल्यार तांच्या data-toggle
गुणधर्मा प्रमाणें निवडप:
.btn-group
a वा an भितरल्या घटकांचेर .input-group
, वा कोश्टक संबंदीत घटकांचेर ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, ) पॉपओव्हर वापरतना <tfoot>
, तुमकां container: 'body'
नाका आशिल्ले दुश्परिणाम टाळपाक पर्याय निर्देशीत करचो पडटलो (सकयल दस्तावेजीत केला) (देखीक घटक रूंद वाडटा आनी/ वा पोपोव्हर सुरू जातकच ताचे वाटकुळे कोनशे वगडावप).
disabled
a वा .disabled
घटकाक पॉपओवर जोडपाक , a च्या भितर घटक दवरात आनी ताचे बदला <div>
ताचेर पॉपओवर लागू करात .<div>
केन्ना केन्नाय तुमकां जायतीं ओळीं गुठलायता अशा हायपरलिंकांत पॉपओवर जोडपाक जाय. पॉपओवर प्लगइनाची मुलभूत वागणूक म्हळ्यार ताका आडवें आनी उबें केंद्रीत करप. white-space: nowrap;
हें टाळपा खातीर तुमच्या एंकरांत जोडचें .
चार पर्याय उपलब्ध आसात: वयर, उजवें, सकयल, आनी डावें संरेखित.
लोबोर्टिस हांगा सेड पोसुएरे कॉन्सेक्टेचर एस्ट. एनियन यु लियो क्वाम. पेलेन्टेस्क ऑर्नारे सेम लॅसिनिया क्वाम व्हेनेनेटिस वेस्टिबुलम.
लोबोर्टिस हांगा सेड पोसुएरे कॉन्सेक्टेचर एस्ट. एनियन यु लियो क्वाम. पेलेन्टेस्क ऑर्नारे सेम लॅसिनिया क्वाम व्हेनेनेटिस वेस्टिबुलम.
लोबोर्टिस हांगा सेड पोसुएरे कॉन्सेक्टेचर एस्ट. एनियन यु लियो क्वाम. पेलेन्टेस्क ऑर्नारे सेम लॅसिनिया क्वाम व्हेनेनेटिस वेस्टिबुलम.
लोबोर्टिस हांगा सेड पोसुएरे कॉन्सेक्टेचर एस्ट. एनियन यु लियो क्वाम. पेलेन्टेस्क ऑर्नारे सेम लॅसिनिया क्वाम व्हेनेनेटिस वेस्टिबुलम.
focus
वापरपी केल्ल्या फुडल्या क्लिकाचेर पॉपओव्हर काडून उडोवपाक ट्रिगर वापरात .
<a>
योग्य क्रॉस-ब्राउझर आनी क्रॉस-प्लॅटफॉर्म वर्तना खातीर, तुमी टॅग वापरपाक जाय, टॅग न्हय , आनी तुमी आनी गुणधर्मांचोय <button>
आस्पाव करचो पडटलो .role="button"
tabindex
जावास्क्रिप्ट वरवीं पॉपओव्हर सक्षम करात:
पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-
, जशें data-animation=""
.
नांव | प्रकार | डिफॉल्ट | वर्णन |
---|---|---|---|
एनिमेशन करप | बूलियन हें नांव | खरें | पॉपओवराक CSS फेड संक्रमण लागू करात |
आयदनांत घालतात | तार | फट | फट | एका विशिश्ट घटकाक पोपोव्हर जोडटा. देखीक: |
सामुग्री | तार | कार्य | '' हें . |
फंक्शन दिल्लें आसल्यार, तें |
कळाव | संख्या | ऑब्जॅक्ट | ० आनी ० | पॉपओवर दाखोवपाक आनी लिपोवपाक कळाव (ms) - हाताळणी ट्रिगर प्रकाराक लागू जायना क्रमांक पुरवण केल्यार, लिपोवप/दाखोवप ह्या दोनूय गजालींक विलंब लागू जाता वस्तूची रचणूक अशी आसा: १. |
एचटीएमएल हें नांव | बूलियन हें नांव | फट | पॉपओवरांत एचटीएमएल घालात. 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 | वापरप्याक पॉपओव्हर दिसपाक लायल्यार ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले). |
hide.bs.popover हें नांव | hide दृष्टांत पद्दत कॉल केल्या उपरांत ही घडणूक रोखडीच फायर जाता . |
लिपलां.बीएस.गरीबी | वापरप्या कडल्यान लिपोवपाचें पॉपओवर सोंपतकच ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले). |
घालून.bs.popover | show.bs.popover जेन्ना पॉपओव्हर साचा DOM कडेन जोडला तेन्ना घडणुके उपरांत ही इव्हेंट फायर करतात. |
ह्या प्लगइनान सगळ्या सावधान संदेशांक डिसमिस कार्यक्षमताय जोडात.
बटण वापरतना .close
, तें पयलें भुरगें आसूंक जाय .alert-dismissible
आनी मार्कअपांत ताचे आदीं खंयचीच मजकूर आशय येवंक शकना.
हें आनी तें बदलून परतून यत्न करात. डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लॅसिनिया ओडियो सेम नेक एलिट. क्रास मॅटीस कॉन्सेक्टेतुर पुरस सिट अमेट फर्मेन्टम.
फकत data-dismiss="alert"
तुमच्या बंद बटणांत जोडात आपोआप एक इशारो बंद कार्यक्षमताय दिवपाक. इशारो बंद केल्यार तो DOM वयल्यान काडून उडयता.
तुमच्या सावधानताय बंद करतना एनिमेशन वापरपाक, तांकां पयलींच लागू केल्ले .fade
आनी वर्ग आसात हाची खात्री करात..in
$().alert()
data-dismiss="alert"
गुणधर्म आशिल्ल्या वंशज घटकांचेर क्लिक घडणुको आयकपाक एक इशारो करता . (डेटा-एपीआयचें ऑटो-इनिशियलायझेशन वापरतना गरजेचें ना.)
$().alert('close')
DOM वयल्यान काडून एक इशारो बंद करता. .fade
घटकाचेर and वर्ग हाजीर आसल्यार .in
, तो काडचे पयलीं इशारो फीको जातलो.
Bootstrap चें सावधान प्लगइन सावधान कार्यक्षमतेक हुक करपा खातीर कांय घडणुको उक्ती करता.
इव्हेंट प्रकार | वर्णन |
---|---|
बंद करचें.bs.alert | close दृष्टांत पद्दत कॉल करतना ही घडणूक रोखडीच फायर जाता . |
बंद.बीएस.अलर्ट | इशारो बंद जातकच ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले). |
बटणां वरवीं चड करचें. नियंत्रण बटण राज्य करता वा साधनपट्टी सारकिल्या चड घटकांखातीर बटणांचे गट तयार करतात.
Firefox पान लोडांतल्यान फॉर्म नियंत्रण स्थिती (अक्षमता आनी तपासणी) तिगून उरता . हाचे खातीर एक उपाय म्हणल्यार वापरप 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 कडेन .list-group
s स्वॅप करप शक्य आसा.
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
संकुचीत लागू करपाक CSS निवडक स्वीकारता. collapse
संकुचीत करपाक येवपी घटकांत वर्ग जोडपाची खात्री करात . तुमकां तो पूर्वनिर्धारीत उगडपाक जाय जाल्यार, अतिरिक्त वर्ग जोडात in
.
संकुचीत नियंत्रणांत अकॉर्डियन-सारकें गट वेवस्थापन जोडपाक, डेटा गुणधर्म जोडात data-parent="#selector"
. हें कृतींत पळोवपाक डेमो पळयात.
हाताळणी करून सक्षम करात:
पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-
, जशें data-parent=""
.
नांव | प्रकार | डिफॉल्ट | वर्णन |
---|---|---|---|
पालक | निवडक अशें म्हण्टात | फट | जर एक निवडपी पुरवण केला जाल्यार, मागीर ही संकुचीत करपाक येवपी वस्तू दाखयल्यार निर्दिश्ट पालकाच्या खाला सगळे संकुचीत घटक बंद जातले. (पारंपारीक अकॉर्डियन वर्तना सारकें - हें panel वर्गाचेर आदारून आसता) |
टॉगल करप | बूलियन हें नांव | खरें | आवाहनाचेर संकुचीत करपाक येवपी घटक टॉगल करता |
.collapse(options)
तुमची सामुग्री संकुचीत करपाक येवपी घटक म्हणून सक्रिय करता. एक पर्यायी पर्याय स्वीकारता object
.
.collapse('toggle')
दाखोवपाक वा लिपोवन दवरपाक संकुचीत करपाक येवपी घटक टॉगल करता. संकुचीत करपाक येवपी घटक प्रत्यक्षांत दाखोवचे पयलीं वा लिपोवचे पयलीं (म्हळ्यार वा घडणूक घडचे पयलीं) कॉलराक परतता .shown.bs.collapse
hidden.bs.collapse
.collapse('show')
संकुचीत करपाक येवपी घटक दाखयता. संकुचीत करपाक येवपी घटक प्रत्यक्षांत दाखोवचे पयलीं (म्हळ्यार shown.bs.collapse
घडणूक घडचे पयलीं) कॉलराक परतता.
.collapse('hide')
संकुचीत करपाक येवपी घटक लिपयता. संकुचीत करपाक येवपी घटक प्रत्यक्षांत लिपचे पयलीं (म्हळ्यार...hidden.bs.collapse
घडणूक घडचे पयलीं) कॉलराक परतता.
बूटस्ट्रॅपाचो कोसळपाचो वर्ग कोळसो कार्यक्षमतेक हुक करपाखातीर कांय घडणुको उक्ती करता.
इव्हेंट प्रकार | वर्णन |
---|---|
शो.बीएस.कोलाप्स करप | show दृष्टांत पद्दत कॉल करतना ही घडणूक रोखडीच फायर जाता . |
दाखयलां.bs.collapse | वापरप्याक कोसळपी घटक दिसपाक लायल्यार ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले). |
लिपोवप.bs.collapse करप | hide पद्दत आपयल्या उपरांत ही घडणूक रोखडीच फायर करतात . |
लिपलां.bs.collapse करप | वापरप्या कडल्यान संकुचीत घटक लिपला तेन्ना ही घडणूक फायर जाता (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
सगळ्यांत भायल्या आयदनाचेर (the ) वापरचो पडटा . .carousel
एका परस चड हिंडोळा जोडटना, वा हिंडो बदलतनाid
, संबंदीत नियंत्रणां अद्ययावत करपाची खात्री करात.
हिंडोलाची सुवात सहजपणान नियंत्रीत करपाक डेटा गुणधर्म वापरात. data-slide
कीवर्ड स्वीकारता prev
वा next
, जे स्लाइड स्थिती ताच्या सद्याच्या स्थितीच्या सापेक्ष बदलता. पर्यायीपणान, वापरात data-slide-to
एक कच्चो स्लाइड निर्देशांक हिंडोळाक पास करपाक data-slide-to="2"
, जो स्लाइड सुवात एका विशिश्ट निर्देशांकांत सुरू करता0
.
data-ride="carousel"
पान लोड जावपाचेर सुरू जावपी हिंडोला एनिमेट म्हणून चिन्न करपाखातीर गुणधर्म वापरतात . एकाच हिंडोळ्याच्या (अनावश्यक आनी गरजे भायर) स्पश्ट जावास्क्रिप्ट आरंभीकरणा वांगडा ताचो वापर करूंक मेळना.
हिंडोळाक हाताळणीन कॉल करात:
पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-
, जशें data-interval=""
.
नांव | प्रकार | डिफॉल्ट | वर्णन |
---|---|---|---|
अंतरांत आसता | आंकडो | ५००० इतले आसात | आपोआप वस्तू सायकल चलोवपा मदीं कळाव करपाचो वेळ. खोटें आसल्यार हिंडो आपोआप सायकल चलचो ना. |
रावप | तार | शुन्य | "होवर" हें . | जर सेट केल्यार "hover" , हिंडोला चालू सायकल विराम दिता mouseenter आनी हिंडोला सायकल चालू परतून सुरू करता mouseleave . जर सेट केला जाल्यार null , हिंडोला वयल्यान होव्हर करप ताका थांबवचो ना. |
गुठलावप | बूलियन हें नांव | खरें | हिंडोला सतत सायकल चलोवपाक जाय काय कठीण थांबपाक जाय. |
कीबोर्ड वापरतात | बूलियन हें नांव | खरें | कीबोर्ड घडणुकांचेर हिंडोळान प्रतिक्रिया दिवची काय ना. |
.carousel(options)
एक पर्यायी पर्यायां सयत हिंडोला आरंभ करता object
आनी आयटमांतल्यान सायकल चलोवंक सुरवात करता.
.carousel('cycle')
हिंडोळाच्या वस्तूंतल्यान डाव्यान उजव्यान सायकल करता.
.carousel('pause')
वस्तूंतल्यान सायकल चलोवपी हिंडोळाक आडायता.
.carousel(number)
हिंडोलाक एका विशिश्ट फ्रेमाक (0 आदारीत, ऍरे सारकें) चक्र करता.
.carousel('prev')
फाटल्या वस्तू कडेन चक्रां करता.
.carousel('next')
फुडल्या आयटमाचेर चक्रां करता.
बूटस्ट्रॅपाचो हिंडोला वर्ग हिंडोला कार्यक्षमतायांत हुक करपा खातीर दोन घडणुको उक्ती करता.
दोनूय घडणुकांक फुडले अतिरिक्त गुणधर्म आसात:
direction
: हिंडोला खंयचे दिकेन सरकता (एक तर "left"
वा"right"
).relatedTarget
: सक्रिय आयटम म्हणून जाग्यार सरकयल्लो DOM घटक.सगळ्यो हिंडोलाच्यो घडणुको हिंडोलाचेरूच (म्हळ्यार <div class="carousel">
) उडयतात.
इव्हेंट प्रकार | वर्णन |
---|---|
स्लाइड.बीएस.हिंडोला | slide दृष्टांत पद्दत आवाहन करतना ही घडणूक रोखडीच फायर जाता . |
स्लाइड.बीएस.हिंडोळ | हिंडोला आपलें स्लाइड संक्रमण पुराय जातकच ही इव्हेंट फायर करतात. |
ऍफिक्स प्लगइन position: fixed;
चालू आनी बंद टॉगल करता, कडेन मेळिल्ल्या परिणामाचें अनुकरण करता position: sticky;
. उजवे वटेन आशिल्लें उपनॅव्हिगेशन हें प्रत्यय प्लगइनाचें लायव्ह डेमो आसा.
डेटा गुणधर्मां वरवीं वा तुमच्या स्वताच्या जावास्क्रिप्टा वरवीं हाताळणी करून प्रत्यय प्लगइन वापरात.दोनूय परिस्थितींत, तुमच्या चिकटयल्ल्या सामुग्रीची सुवात आनी रुंदाये खातीर तुमी CSS दिवंक जाय.
टिप: Safari रेंडरींग बगाक लागून, तुलनात्मक रितीन स्थितींत आशिल्ल्या घटकांत आशिल्ल्या घटकाचेर, जशे की ओडून घेतिल्ल्या वा धक्को दिल्ल्या स्तंभाचेर, ऍफिक्स प्लगइन वापरूं नाकात .
ऍफिक्स प्लगइन तीन वर्गां मदीं टॉगल करता, दरेक एका विशिश्ट स्थितीचें प्रतिनिधित्व करता: .affix
, .affix-top
, आनी .affix-bottom
. तुमी शैली दिवंक जाय, position: fixed;
चालू सोडल्यार.affix
सोडल्यार , ह्या वर्गांखातीर स्वता (ह्या प्लगइनांतल्यान स्वतंत्र) प्रत्यक्ष स्थिती हाताळपाखातीर.
ऍफिक्स प्लगइन कशें काम करता तें पळयात:
.affix-top
घटक ताच्या सगळ्यांत वयल्या सुवातेर आसा हें दाखोवपाक जोडटा. ह्या वेळार कसलेंच CSS स्थिती करपाची गरज ना..affix
बदलता .affix-top
आनी सेट करता position: fixed;
(Botstrap च्या CSS कडल्यान पुरवण केल्ली)..affix
जाय .affix-bottom
. ऑफसेट पर्यायी आशिल्ल्यान, एक सेट करपाक तुमकां योग्य CSS सेट करपाची गरज आसा. position: absolute;
अशे स्थितींत गरज पडल्यार जोडचें . थंयच्यान घटक खंय दवरचो तें थारावपाखातीर प्लगइन डेटा गुणधर्म वा जावास्क्रिप्ट पर्याय वापरता.सकयल दिल्ल्या वापर पर्यायां मदल्या खंयच्याय एका खातीर तुमचो CSS सेट करपाक वयलीं पावलां पाळचीं.
खंयच्याय घटकाक सहजपणान affix वर्तन जोडपाक, फकत data-spy="affix"
तुमकां गुप्तचर करपाक जाय आशिल्ल्या घटकाक जोडात. घटकाचें पिनिंग केन्ना टॉगल करचें हाची व्याख्या करपाक ऑफसेट वापरात.
जावास्क्रिप्ट वरवीं प्रत्यय प्लगइनाक कॉल करात:
पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-
, जशें data-offset-top="200"
.
नांव | प्रकार | डिफॉल्ट | वर्णन |
---|---|---|---|
ऑफसेट करप | संख्या | कार्य | ऑब्जॅक्ट | १० हें नांव | स्क्रोलाची सुवात मेजतना पडद्यांतल्यान ऑफसेट करपाचे पिक्सेल. एकूच क्रमांक दिला जाल्यार ऑफसेट वयल्या आनी सकयल्या दोनूय दिकांनी लागू जातलो. एक खाशेली पुरवण करपाक, सकयल आनी वयलो ऑफसेट फकत एक वस्तू offset: { top: 10 } वा offset: { top: 10, bottom: 5 } . जेन्ना तुमकां ऑफसेट डायनॅमिक रितीन गणना करपाची गरज आसता तेन्ना फंक्शन वापरात. |
लक्ष्य | निवडक | नोड | jQuery घटक | window वस्तू _ |
प्रत्ययाचे लक्ष्य घटक निर्देशीत करता. |
.affix(options)
तुमची सामुग्री चिकटिल्ली सामुग्री म्हणून सक्रिय करता. एक पर्यायी पर्याय स्वीकारता object
.
.affix('checkPosition')
संबंदीत घटकांच्या परिमाण, सुवात आनी स्क्रोल स्थितीचेर आदारीत प्रत्ययाची स्थिती परतून मेजता. , .affix
, .affix-top
आनी .affix-bottom
वर्ग नव्या स्थिती प्रमाणें जोडिल्ल्या सामुग्रींत जोडटात वा काडून उडयतात. जेन्ना केन्नाय चिकटयल्ल्या आशयाचे वा लक्ष्य घटकाचे परिमाण बदलतात तेन्ना ही पद्दत आपोवपाची गरज आसता, चिकटयल्ल्या आशयाची योग्य सुवात सुनिश्चीत करपाखातीर.
Bootstrap चें affix प्लगइन affix कार्यक्षमतेक हुक करपाखातीर कांय घडणुको उक्ती करता.
इव्हेंट प्रकार | वर्णन |
---|---|
affix.bs.affix हें नांव | ही घडणूक घटक चिकटयचे पयलीं रोखडीच फायर जाता. |
चिकटयल्लें.bs.affix | घटक चिकटयल्या उपरांत ही घडणूक फायर करतात. |
affix-top.bs.अॅफिक्स | ही घडणूक घटक चिकटवचे पयलीं रोखडीच फायर जाता-टॉप. |
affixed-top.bs.अॅफिक्स | घटक चिकटयल्या उपरांत ही घडणूक फायर जाता-टॉप. |
affix-तळाक.bs.affix | ही घडणूक घटक चिकटयले-तळें जावचे पयलीं रोखडीच फायर जाता. |
संलग्न-सकयल.bs.affix | घटक affixed-bottom केल्या उपरांत ही घडणूक फायर करतात. |