जावास्क्रिप्ट
एक दर्जन सं बेसि कस्टम jQuery प्लगइन कें साथ बूटस्ट्रैप कें घटक कें जीवन मे लाउ. सहजहि सभ केँ शामिल करू, वा एक-एक कए।
एक दर्जन सं बेसि कस्टम jQuery प्लगइन कें साथ बूटस्ट्रैप कें घटक कें जीवन मे लाउ. सहजहि सभ केँ शामिल करू, वा एक-एक कए।
प्लगइन कें व्यक्तिगत रूप सं शामिल कैल जा सकय छै (बूटस्ट्रैप कें व्यक्तिगत *.js
फाइल कें उपयोग करयत), या एकहि बेर मे सबटा (उपयोग करयत bootstrap.js
या मिनीफाइड करयत) शामिल कैल जा सकय छै bootstrap.min.js
.
दुनू bootstrap.js
आओर bootstrap.min.js
एकटा फाइल मे सभ प्लगइन समाहित अछि. एकटा मात्र शामिल करू।
किछु प्लगइन आ सीएसएस घटक अन्य प्लगइन पर निर्भर करैत अछि । यदि अहां प्लगइन कें व्यक्तिगत रूप सं शामिल करय छी, त डॉक्स मे इ निर्भरताक कें जांच करनाय सुनिश्चित करूं. इहो ध्यान राखू जे सभ प्लगइन jQuery पर निर्भर करैत अछि (एकर मतलब अछि जे प्लगइन फाइल सभसँ पहिने jQueryकेँ शामिल करबाक चाही)। jQuery के कोन संस्करण समर्थित अछि से देखय लेल हमर परामर्श करू .bower.json
अहां सब बूटस्ट्रैप प्लगइन के उपयोग विशुद्ध रूप सं मार्कअप एपीआई के माध्यम सं बिना जावास्क्रिप्ट के एकटा लाइन लिखने क सकय छी. ई बूटस्ट्रैप केरऽ प्रथम श्रेणी केरऽ एपीआई छै आरू प्लगइन केरऽ उपयोग करतें समय ई आपकऽ पहिलऽ विचार होना चाहियऽ ।
कहल गेल अछि जे किछु परिस्थिति मे एहि कार्यक्षमता केँ बंद करब वांछनीय भ' सकैत अछि. अतः, हम कें साथ नामस्थान करल गेलय दस्तावेज पर सब घटनाक कें अनबाइंड करय कें द्वारा डाटा विशेषता एपीआई कें अक्षम करय कें क्षमता सेहो प्रदान करय छै data-api
. ई एना लगैत अछि : १.
वैकल्पिक रूप सं, कोनों विशिष्ट प्लगइन कें लक्षित करय कें लेल, बस प्लगइन कें नाम कें एकटा नेमस्पेस कें रूप मे डाटा-एपीआई नेमस्पेस कें साथ अइ तरह शामिल करूं:
एकहि तत्व पर अनेक प्लगइन सं डेटा विशेषताक उपयोग नहि करू. जेना कि बटन मे टूलटिप आ मोडल टॉगल दुनू नहि भ सकैत अछि । एकरा पूरा करय लेल एकटा रैपिंग तत्व के प्रयोग करू.
हमरऽ ई भी मानना छै कि आहाँ क॑ विशुद्ध रूप स॑ जावास्क्रिप्ट एपीआई के माध्यम स॑ सब बूटस्ट्रैप प्लगइन के उपयोग करै म॑ सक्षम होना चाहियऽ । सबटा सार्वजनिक एपीआई एकल, श्रृंखलाबद्ध विधियक छै, आ संग्रहण कें वापस करयत छै जइ पर कार्य कैल गेल छै.
सब विधियक कें एकटा वैकल्पिक विकल्प वस्तु, एकटा स्ट्रिंग जे कोनों विशेष विधि कें लक्षित करयत छै, या किछु नहि (जे डिफ़ॉल्ट व्यवहार कें साथ एकटा प्लगइन कें आरंभ करयत छै) कें स्वीकार करबाक चाहि:
Constructor
प्रत्येक प्लगइन एकटा गुण पर अपन कच्चा कंस्ट्रक्टर सेहो उजागर करैत अछि: $.fn.popover.Constructor
. यदि अहाँ कोनो विशेष प्लगइन इंस्टेंस प्राप्त करय चाहैत छी, त' ओकरा सीधा कोनो तत्व सँ पुनः प्राप्त करू: $('[rel="popover"]').data('popover')
.
Constructor.DEFAULTS
अहां प्लगइन कें ऑब्जेक्ट कें संशोधित कयर कोनों प्लगइन कें लेल डिफ़ॉल्ट सेटिंग्स बदल सकय छी :
कखनो काल अन्य यूआई फ्रेमवर्क के साथ बूटस्ट्रैप प्लगइन के उपयोग करनाय आवश्यक भ जायत छै. एहि परिस्थिति मे नेमस्पेस टक्कर कखनो काल भ सकैत अछि । यदि एहन भ' गेल त' अहाँ .noConflict
ओहि प्लगइन पर कॉल क' सकैत छी जकर मान वापस करय चाहैत छी.
बूटस्ट्रैप अधिकांश प्लगइन कें अद्वितीय क्रियाक कें लेल कस्टम घटना प्रदान करयत छै. सामान्यतः ई सब अव्यय आ भूतकाल रूप मे अबैत अछि - जतय show
कोनो घटनाक आरम्भ मे अव्यय (ex. ) ट्रिगर होइत अछि , आ ओकर भूतपूर्व कर्मधारय रूप (ex. shown
) कोनो क्रियाक पूर्णता पर ट्रिगर होइत अछि |
3.0.0 क' रूप मे, सभ बूटस्ट्रैप इवेंट नाम स्पेस कएल गेल अछि.
सब अव्यय घटना preventDefault
कार्यक्षमता प्रदान करैत अछि। एहि स कोनो क्रिया क शुरू होएबा स पहिने ओकर निष्पादन कए रोकबाक क्षमता भेटैत अछि ।
बूटस्ट्रैप कें प्रत्येक jQuery प्लगइन कें संस्करण कें VERSION
प्लगइन कें कंस्ट्रक्टर कें गुण कें माध्यम सं एक्सेस कैल जा सकय छै. जेना, टूलटिप प्लगइन क लेल:
बूटस्ट्रैप केरऽ प्लगइन विशेष रूप स॑ शानदार ढंग स॑ पाछू नै गिरै छै जब॑ जावास्क्रिप्ट अक्षम करलऽ जाय छै । यदि अहां अइ मामला मे उपयोगकर्ता अनुभव कें चिंता करय छी, त अपन उपयोगकर्ताक कें <noscript>
स्थिति कें समझाबय कें लेल (आ जावास्क्रिप्ट कें पुनः सक्षम करय कें तरीका) कें उपयोग करूं, आ/अथवा अपन खुद कें कस्टम फॉलबैक जोड़ूं.
बूटस्ट्रैप आधिकारिक तौर पर प्रोटोटाइप या जेक्वेरी यूआई जैना तृतीय पक्ष जावास्क्रिप्ट लाइब्रेरी कें समर्थन नहि करएयत छै . बावजूद .noConflict
आओर नामस्थान कएल गेल घटना, संगतता समस्या भ' सकैत अछि जकरा अहाँकेँ अपन दम पर ठीक करबाक आवश्यकता अछि.
सरल संक्रमण प्रभावक कें लेल, transition.js
अन्य जेएस फाइल कें साथ एक बेर शामिल करूं. यदि अहाँ संकलित (अथवा लघुकृत) क' प्रयोग कए रहल छी bootstrap.js
, तँ एकरा शामिल करबाक कोनो आवश्यकता नहि अछि-ई पहिनेसँ अछि ।
Transition.js घटनाक कें लेल एकटा बुनियादी सहायक कें transitionEnd
साथ-साथ एकटा CSS संक्रमण एमुलेटर छै. एकरऽ उपयोग अन्य प्लगइन द्वारा CSS संक्रमण समर्थन केरऽ जांच करै लेली आरू लटकलऽ संक्रमण क॑ पकड़ै लेली करलऽ जाय छै ।
संक्रमण कें निम्नलिखित जावास्क्रिप्ट स्निपेट कें उपयोग करयत वैश्विक रूप सं अक्षम कैल जा सकय छै, जे लोड करय कें बाद transition.js
(या bootstrap.js
या bootstrap.min.js
, जैना की मामला भ सकय छै) आनाय आवश्यक छै:
मोडल सुव्यवस्थित, मुदा लचीला, संवाद संकेत न्यूनतम आवश्यक कार्यक्षमता आ स्मार्ट डिफ़ॉल्ट कें साथ छै.
जाबत दोसर एखनो देखाइत अछि ताबत कोनो मोडल नहि खोलब सुनिश्चित करू। एक बेर मे एक सं बेसि मोडल देखाबय कें लेल कस्टम कोड कें आवश्यकता होयत छै.
हमेशा कोनों मोडल कें एचटीएमएल कोड कें अपन दस्तावेज मे शीर्ष-स्तरीय स्थिति मे रखय कें कोशिश करूं ताकि मोडल कें रूप आ/अथवा कार्यक्षमता कें प्रभावित करय वाला अन्य घटक सं बचल जा सकय.
मोबाइल डिवाइस पर मोडल के उपयोग के संबंध मे किछ चेतावनी अछि. विस्तार सँ जानकारी लेल हमर ब्राउज़र समर्थन डॉक्स देखू.
HTML5 अपनऽ शब्दार्थ क॑ कोना परिभाषित करै छै, एकरऽ कारण, autofocus
HTML विशेषता केरऽ बूटस्ट्रैप मोडल म॑ कोनो प्रभाव नै पड़ै छै । समान प्रभाव प्राप्त करबाक लेल, किछु कस्टम जावास्क्रिप्ट क उपयोग करू:
हेडर, बॉडी, आ पाद लेख मे क्रियाक सेट के संग एकटा रेंडर मोडल.
नीचा देल गेल बटन पर क्लिक कए जावास्क्रिप्ट क माध्यम स कोनो मोडल कए टॉगल करू। ई नीचाँ सरकि क' पन्नाक ऊपरसँ फीका भ' जायत।
role="dialog"
आओर aria-labelledby="..."
, मोडल शीर्षक के संदर्भित करैत, .modal
, आओर स्वयं role="document"
मे अवश्य जोड़ू ..modal-dialog
एकर अतिरिक्त, अहाँ अपन मोडल संवादक विवरण aria-describedby
on केर संग द' सकैत छी .modal
.
यूट्यूब वीडियो क॑ मोडल म॑ एम्बेड करै लेली बूटस्ट्रैप म॑ नै हुअ॑ अतिरिक्त जावास्क्रिप्ट के जरूरत छै ताकि प्लेबैक क॑ स्वचालित रूप स॑ बंद करलऽ जाय सक॑ आरू बहुत कुछ । अधिक जानकारी के लेल ई सहायक स्टैक ओवरफ्लो पोस्ट देखू ।
मोडल कें दूटा वैकल्पिक आकार होयत छै, जे संशोधक वर्गक कें माध्यम सं उपलब्ध छै जे एकटा पर राखल जैतय .modal-dialog
.
मोडल के लेल जे देखय लेल फीका पड़य के बजाय बस देखाइत अछि, .fade
अपन मोडल मार्कअप सं क्लास हटाउ.
एकटा मोडल कें भीतर बूटस्ट्रैप ग्रिड सिस्टम कें लाभ उठावय कें लेल, बस .row
कें भीतर s कें नेस्ट .modal-body
करूं आ ओकर बाद सामान्य ग्रिड सिस्टम वर्गक कें उपयोग करूं.
बटन के एकटा गुच्छा अछि जे सब एकहि मोडल के ट्रिगर करैत अछि, बस कनि अलग सामग्री के संग? उपयोग event.relatedTarget
आरू HTML data-*
विशेषता (संभवतः jQuery के माध्यम स॑ ) मोडल केरऽ सामग्री म॑ बदलाव करै लेली ई आधार प॑ कि कोन बटन प॑ क्लिक करलऽ गेलऽ छेलै । पर विवरण के लेल मोडल इवेंट डॉक्स देखू relatedTarget
, .
मोडल प्लगइन मांग पर, डाटा विशेषता या जावास्क्रिप्ट कें माध्यम सं, अहां कें छिपल सामग्री कें टॉगल करयत छै. .modal-open
इ डिफ़ॉल्ट स्क्रॉलिंग व्यवहार कें ओवरराइड करय कें लेल सेहो जोड़य छै आ मोडल कें बाहर क्लिक करय कें समय दिखायल गेलय मोडल कें खारिज करय कें लेल एकटा क्लिक क्षेत्र प्रदान करय कें लेल एकटा <body>
उत्पन्न करय छै..modal-backdrop
जावास्क्रिप्ट लिखने बिना कोनो मोडल सक्रिय करू। एकटा नियंत्रक तत्व पर सेट करू data-toggle="modal"
, जेना एकटा बटन, एकटा data-target="#foo"
या href="#foo"
टॉगल करय कें लेल एकटा विशिष्ट मोडल कें लक्षित करय कें लेल.
myModal
जावास्क्रिप्ट के एकल लाइन के साथ id के साथ एक मोडल कॉल करें:
विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-
, मे संलग्न करू , जेना data-backdrop=""
.
नाम | प्रकार | चुकनाइ | वर्णन |
---|---|---|---|
पृष्ठभूमि | बूलियन या स्ट्रिंग'static' |
सत्य | एकटा मोडल-बैकग्राउंड तत्व शामिल अछि। वैकल्पिक रूप सँ, static एकटा एहन पृष्ठभूमि क लेल निर्दिष्ट करू जे क्लिक पर मोडल बंद नहि करैत अछि. |
कीबोर्ड | बूलियन | सत्य | एस्केप कुंजी दबाए पर मोडल बंद करैत अछि |
प्रदर्शन | बूलियन | सत्य | आरंभ करबा पर मोडल देखाबैत अछि. |
दूर सँ | रास्ता | झूठ | ई विकल्प v3.3.0 सँ पदावनत अछि आओर v4 मे हटा देल गेल अछि. हम एकर बदला मे क्लाइंट-साइड टेम्पलेटिंग या एकटा डाटा बाइंडिंग फ्रेमवर्क क उपयोग करबाक सलाह दैत छी, अथवा jQuery.load केँ स्वयं कॉल करू. यदि कोनों दूरस्थ यूआरएल उपलब्ध करायल गेल छै, त सामग्री jQuery कें विधि कें माध्यम सं एक बेर लोड कैल जेतय आ div |
.modal(options)
एकटा मोडल के रूप मे अपन सामग्री के सक्रिय करैत अछि. एकटा वैकल्पिक विकल्प स्वीकार करैत अछि object
.
.modal('toggle')
मैन्युअल रूप स एकटा मोडल टॉगल करैत अछि। मोडल कें वास्तव मे दिखायल गेलय या नुकाएलय सं पहिले (अर्थात shown.bs.modal
या hidden.bs.modal
घटना घटित हुअ सं पहिले) कॉलर कें पास वापस आबै छै.
.modal('show')
मैन्युअल रूप स एकटा मोडल खोलैत अछि। मोडल कें वास्तव मे दिखाएय सं पहिले (अर्थात shown.bs.modal
घटना घटित हुअ सं पहिले) कॉलर कें वापस आबै छै.
.modal('hide')
मैन्युअल रूप स एकटा मोडल नुकाबैत अछि। मोडल कें वास्तव मे नुकाएय सं पहिले (अर्थात hidden.bs.modal
घटना घटित हुअ सं पहिले) कॉलर कें पास वापस आबि जायत छै.
.modal('handleUpdate')
मोडल केरऽ स्थिति क॑ पुनः समायोजित करै छै ताकि कोनों स्क्रॉलबार केरऽ मुकाबला करलऽ जाय सक॑ अगर एकरा दिखाय देलऽ जाय, जेकरा स॑ मोडल क॑ बायां तरफ कूद पड़तै ।
केवल तखन आवश्यकता जखन मोडल खुजल रहैत ओकर ऊँचाई बदलैत अछि ।
बूटस्ट्रैप केरऽ मोडल क्लास मोडल कार्यक्षमता म॑ हुक करै लेली कुछ घटना क॑ उजागर करै छै ।
सब मोडल घटना मोडल पर स्वयं (अर्थात <div class="modal">
) पर फायर कयल जाइत अछि |
घटना प्रकार | वर्णन |
---|---|
शो.बीएस.मोडल | show इंस्टेंस मेथड कें कॉल करय पर इ घटना तुरंत फायर भ जायत छै. यदि क्लिक के कारण छै, त क्लिक करलौ गेलौ तत्व relatedTarget घटना के गुण के रूप मँ उपलब्ध छै. |
देखाओल गेल.bs.modal | इ घटना तखन फायर कैल जायत छै जखन मोडल कें उपयोगकर्ता कें लेल दृश्यमान बना देल गेल छै (सीएसएस संक्रमण पूरा हुअ कें इंतजार करतय). यदि क्लिक के कारण छै, त क्लिक करलौ गेलौ तत्व relatedTarget घटना के गुण के रूप मँ उपलब्ध छै. |
छिपाएँ.बीएस.मोडल | ई घटना तुरंत फायर कएल जाइत अछि जखन hide इंस्टेंस मेथड कॉल कएल गेल अछि. |
छिपल.बीएस.मोडल | ई घटना तखन फायर कएल जाइत अछि जखन मोडल उपयोगकर्ता सँ नुकाएब समाप्त भ' जाइत अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)। |
लोड कएल गेल.bs.modal | ई घटना तखन फायर कएल जाइत अछि जखन मोडल remote विकल्प क उपयोग कए सामग्री लोड कएने अछि । |
एहि सरल प्लगइन सं लगभग कोनो चीज मे ड्रॉपडाउन मेनू जोड़ू, जाहि मे नवबार, टैब, आ गोली शामिल अछि.
.open
डाटा विशेषताक या जावास्क्रिप्ट कें माध्यम सं, ड्रॉपडाउन प्लगइन मूल सूची आइटम पर वर्ग कें टॉगल करयत छिपल सामग्री (ड्रॉपडाउन मेनू) कें टॉगल करयत छै.
मोबाइल डिवाइस पर, ड्रॉपडाउन खोलला सं .dropdown-backdrop
मेनू सं बाहर टैप करय कें समय ड्रॉपडाउन मेनू बंद करय कें लेल एकटा टैप क्षेत्र कें रूप मे जोड़य छै, जे उचित आईओएस समर्थन कें लेल एकटा आवश्यकता छै. मतलब जे खुला ड्रॉपडाउन मेनू सं अलग ड्रॉपडाउन मेनू मे बदलय लेल मोबाइल पर एकटा अतिरिक्त टैप करय पड़त.
नोट: data-toggle="dropdown"
कोनों एप्लीकेशन स्तर पर ड्रॉपडाउन मेनू बंद करय कें लेल विशेषता पर निर्भर छै, अइ कें लेल एकर उपयोग हमेशा करनाय एकटा नीक विचार छै.
data-toggle="dropdown"
ड्रॉपडाउन टॉगल करय लेल कोनो लिंक या बटन मे जोड़ू .
लिंक बटन क संग यूआरएल कए बरकरार रखबाक लेल, क data-target
बजाय विशेषता क उपयोग करू href="#"
.
जावास्क्रिप्ट के माध्यम स ड्रॉपडाउन के कॉल करू:
data-toggle="dropdown"
एखनो आवश्यक अछिचाहे अहां जावास्क्रिप्ट कें माध्यम सं अपन ड्रॉपडाउन कें कॉल करूं या एकर बजाय डाटा-एपीआई कें उपयोग करूं, data-toggle="dropdown"
ड्रॉपडाउन कें ट्रिगर तत्व पर हमेशा मौजूद रहनाय आवश्यक छै.
कोनो नहि
$().dropdown('toggle')
कोनों देल गेल नवबार या टैब नेविगेशन कें ड्रॉपडाउन मेनू कें टॉगल करयत छै.
सभ ड्रॉपडाउन घटना .dropdown-menu
's मूल तत्व पर फायर कएल जाइत अछि.
सब ड्रॉपडाउन इवेंट मे एकटा relatedTarget
गुण होयत छै, जेकर मान टॉगलिंग एंकर तत्व छै.
घटना प्रकार | वर्णन |
---|---|
शो.बीएस.ड्रॉपडाउन | शो इंस्टेंस मेथड कॉल करबा पर ई इवेंट तुरंत फायर भ' जाइत अछि. |
देखाओल गेल.bs.dropdown | ई घटना तखन फायर कएल जाइत अछि जखन ड्रॉपडाउन उपयोगकर्ताक लेल दृश्यमान बनाओल गेल अछि (सीएसएस संक्रमणक प्रतीक्षा करत, पूरा करबाक लेल)। |
छिपाएँ.bs.ड्रॉपडाउन | ई घटना तुरंत फायर कएल जाइत अछि जखन hide instance मेथड कॉल कएल गेल अछि. |
छिपल.बीएस.ड्रॉपडाउन | ई घटना तखन फायर कएल जाइत अछि जखन ड्रॉपडाउन उपयोगकर्ता सँ नुकाएब समाप्त भ' जाइत अछि (CSS संक्रमणक प्रतीक्षा करत, पूरा करबाक लेल)। |
स्क्रॉलस्पाई प्लगइन स्क्रॉल स्थिति कें आधार पर स्वचालित रूप सं nav लक्ष्य अपडेट करय कें लेल छै. नवबार के नीचा के क्षेत्र के स्क्रॉल करू आ सक्रिय वर्ग बदलैत देखू. ड्रॉपडाउन सब आइटम के सेहो हाइलाइट कएल जाएत.
विज्ञापन लेगिंग keytar, ब्रंच आईडी कला पार्टी dolor labore। पिचफोर्क yr enim लो-फाई से पहले वे बिक चुके qui. टम्बलर फार्म-टू-टेबल साइकिल अधिकार जे किछु। अनिम केफियेह कार्लेस कार्डिगन। Velit seitan mcsweeney के फोटो बूथ 3 भेड़िया चंद्रमा irure. Cosby स्वेटर लोमो जीन शॉर्ट्स, विलियम्सबर्ग हुडी न्यूनतम qui आप शायद उनके एट कार्डिगन ट्रस्ट फंड culpa बायोडीजल वेस एंडरसन सौंदर्यशास्त्र के बारे में नहीं सुनने हैं | निहिल गोदना accusamus, cred विडंबना बायोडीजल keffiyeh कारीगर ullamco consequat |
वेनियम मार्फा मूंछ स्केटबोर्ड, adipisicing fugiat velit पिचफोर्क दाढ़ी | फ्रीगन दाढ़ी aliqua cupidat mcsweeney के वेरो। कामदेवताट चार लोको निसी, ईए हेल्वेटिका नुल्ला कार्लेस। गोदना गोदना कॉस्बी स्वेटर खाद्य ट्रक, mcsweeney के quis गैर freegan विनाइल। लो-फाई वेस एंडरसन +1 सार्टोरियल। कार्लेस गैर सौंदर्य व्यायाम quis gentrify। ब्रुकलिन adipisicing शिल्प बियर वाइस keytar deserunt।
ओकेकैट कोमोडो एलिक्वा डेलेक्टस। फैप शिल्प बियर deserunt स्केटबोर्ड ईए। लोमो साइकिल अधिकार adipisicing बान्ह मी, वेलिट ईए सुंट अगला स्तर locavore एकल-मूल कॉफी में मैग्ना वेनियम | उच्च जीवन आईडी विनाइल, इको पार्क consequat quis aliquip बान्ह मी पिचफोर्क। वेरो वीएचएस एस्ट एडिपिसिसिंग। Consectetur nisi DIY न्यूनतम दूत बैग। Cred पूर्व में, टिकाऊ 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.
केतार ट्वी ब्लॉग, कुलपा मैसेंजर बैग मारफा जे किछु डेलेक्टस फूड ट्रक। Sapiente सिंथ आईडी assumenda। Locavore sed helvetica क्लिच विडंबना, थंडरकैट्स अहाँ शायद हुनका सब के बारे में नै सुनने होयब consequat hoodie लस मुक्त लो-फाई फैप aliquip. Labore अभिजात placeat से पहले वे बिक चुके, टेरी रिचर्डसन proident ब्रंच nesciunt quis cosby स्वेटर pariatur keffiyeh उत helvetica कारीगर | कार्डिगन शिल्प बियर seitan रेडीमेड velit। वीएचएस चैम्ब्रे लैबोरिस टेम्पोर वेनियम। एनिम मोलिट न्यूनतम कमोडो उल्लमको थंडरकैट्स।
नवबार लिंक मे हल करय योग्य आईडी टारगेट होबाक चाही. जेना, a <a href="#home">home</a>
डीओएम मे किछु एहन सँ मेल खाएब आवश्यक अछि जेना <div id="home"></div>
.
:visible
लक्ष्य तत्वों की अनदेखीलक्ष्य तत्व जे :visible
jQuery के अनुसार नै छै ओकरा अनदेखी करलऽ जैतै आरू ओकरऽ संबंधित nav आइटम कभियो हाइलाइट नै करलऽ जैतै ।
कोनो भी कार्यान्वयन विधि, scrollspy के उपयोग के आवश्यकता छै position: relative;
पर तत्व पर जेकरा पर आप जासूसी करी रहलऽ छै. अधिकांश मामला मे इ <body>
. , के अलावा अन्य तत्वों पर स्क्रॉलस्पाइइंग करते समय , एक सेट <body>
अवश्य रखें और लागू करें |height
overflow-y: scroll;
अपनऽ टॉपबार नेविगेशन म॑ स्क्रॉलस्पी व्यवहार क॑ आसानी स॑ जोड़ै लेली, data-spy="scroll"
वू तत्व म॑ जोड़ऽ जेकरा प॑ आप जासूसी करना चाहै छियै (सबसे आम तौर प॑ ई होतै <body>
). तखन कोनों बूटस्ट्रैप घटक कें data-target
मूल तत्व कें आईडी या वर्ग कें साथ विशेषता कें जोड़ूं..nav
अपन CSS मे जोड़लाक बाद position: relative;
जावास्क्रिप्ट क माध्यम स स्क्रॉलस्पाई कए कॉल करू:
.scrollspy('refresh')
DOM स तत्व जोड़ै या हटाबै के साथ scrollspy क उपयोग करला पर, आहाँ क रिफ्रेश विधि क ऐन्हऽ कॉल करै के जरूरत होतै:
विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-
, मे संलग्न करू , जेना data-offset=""
.
नाम | प्रकार | चुकनाइ | वर्णन |
---|---|---|---|
ऑफसेट | संख्या | १० | स्क्रॉल के स्थिति की गणना करते समय ऊपर से ऑफसेट करने के लिये पिक्सेल | |
घटना प्रकार | वर्णन |
---|---|
सक्रिय.बीएस.स्क्रॉलस्पी | ई घटना तखनहि फायर करैत अछि जखन कोनो नव आइटम स्क्रॉलस्पी द्वारा सक्रिय भ' जाइत अछि. |
स्थानीय सामग्री कें फलक कें माध्यम सं संक्रमण कें लेल त्वरित, गतिशील टैब कार्यक्षमता जोड़ूं, ड्रॉपडाउन मेनू कें माध्यम सं सेहो. नेस्टेड टैब समर्थित नहि अछि.
कच्चा डेनिम अहाँ शायद हुनका सब के बारे में नै सुनने होयब जीन शॉर्ट्स ऑस्टिन। Nesciunt टोफू स्टंपटाउन aliqua, रेट्रो सिंथ मास्टर सफाई। मूंछ क्लिच अस्थायी, विलियम्सबर्ग कार्ल्स शाकाहारी helvetica. Reprehenderit कसाई रेट्रो keffiyeh ड्रीमकैचर सिंथ। कोस्बी स्वेटर ईयू बान्ह मी, क्यूई इरुरे टेरी रिचर्डसन पूर्व स्क्वीड। 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
टैब में आ 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.tab | एकटा टैब देखाओल गेलाक बाद ई घटना टैब शो पर फायर करैत अछि. क्रमशः सक्रिय टैब आ पिछला सक्रिय टैब (यदि उपलब्ध छै) कें लक्षित करय कें लेल event.target आ कें उपयोग करूं .event.relatedTarget |
छिपाएँ.बीएस.टैब | ई घटना तखन फायर करैत अछि जखन कोनो नव टैब देखाओल जेबाक अछि (आ एहि तरहें पिछला सक्रिय टैब केँ नुकाएबाक अछि) । वर्तमान सक्रिय टैब आ नव जल्द सक्रिय होबय बला टैब कें लक्षित करय कें लेल क्रमशः event.target आ कें उपयोग करूं .event.relatedTarget |
छिपल.बीएस.टैब | ई घटना एकटा नव टैब देखाओल गेलाक बाद फायर करैत अछि (आ एहि तरहें पिछला सक्रिय टैब नुका जाइत अछि) । क्रमशः पिछला सक्रिय टैब आ नव सक्रिय टैब कें लक्षित करय कें लेल event.target आ कें उपयोग करूं .event.relatedTarget |
जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tipsy प्लगइन स प्रेरित; टूलटिप्स एकटा अपडेट संस्करण छै, जे छवि पर निर्भर नै छै, एनीमेशन लेली CSS3 के उपयोग करै छै, आरू स्थानीय शीर्षक भंडारण लेली डाटा-विशेषता के उपयोग करै छै.
शून्य-लंबाई शीर्षक वाला टूलटिप कहियो प्रदर्शित नहि कएल जाएत अछि.
टूलटिप्स देखबाक लेल नीचा देल गेल लिंक पर माउस करू:
टाइट पैंट नेक्स्ट लेवल केफ्फीएह अहाँ शायद एकर नाम नहि सुनने होयब। फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बैग स्टंपटाउन। फार्म-टू-टेबल seitan, mcsweeney के fixie टिकाऊ quinoa 8-बिट अमेरिकी परिधान एक टेरी रिचर्डसन विनाइल chambray अछि. दाढ़ी स्टंपटाउन, कार्डिगन बान्ह मी लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, चार लोको mcsweeney के साफ शाकाहारी chambray | एक वास्तव में विडंबना कारीगर जो भी keytar , scenester खेत-टू-टेबल banksy ऑस्टिन ट्विटर संभाल freegan cred कच्चा डेनिम एकल-मूल कॉफी वायरल |
चारि विकल्प उपलब्ध अछि : ऊपर, दाहिना, नीचाँ, आ बामा संरेखित ।
प्रदर्शन कारण सं, टूलटिप आ पॉपओवर डाटा-एपीआई ऑप्ट-इन छै, मतलब अहां कें ओकरा स्वयं आरंभ करनाय होयत .
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) कें देखएय आ नुकाएय मे देरी - मैनुअल ट्रिगर प्रकार पर लागू नहि होयत छै यदि कोनों नंबर सप्लाई कैल गेल छै, त नुका/देखाउ दूनू पर विलंब लागू कैल जायत छै वस्तु संरचना अछि : १. |
एचटीएमएल | बूलियन | झूठ | टूलटिप मे एचटीएमएल डालू। यदि गलत छै, त jQuery कें text विधि कें उपयोग DOM मे सामग्री डालय कें लेल करल जैतय. यदि अहाँ XSS हमला के बारे में चिंतित छी त पाठ के प्रयोग करू. |
प्लेसमेंट के लिये | तार | आयोजन | 'शिखर' | टूलटिप को कैसे पोजीशन दें - टॉप | नीचे | बाएँ | सही | ऑटो। जब॑ कोनों फंक्शन क॑ प्लेसमेंट निर्धारित करै लेली प्रयोग करलऽ जाय छै त॑ ओकरा टूलटिप DOM नोड क॑ ओकरऽ पहिलऽ आर्गुमेंट के रूप म॑ आरू ट्रिगरिंग एलिमेंट DOM नोड क॑ ओकरऽ दोसरऽ के रूप म॑ कॉल करलऽ जाय छै । |
चयनकर्ता | डोरी | झूठ | यदि कोनों चयनकर्ता उपलब्ध करायल गेल छै, त टूलटिप वस्तुअक कें निर्दिष्ट लक्ष्यक कें लेल प्रत्यायोजित कैल जेतय. व्यवहार म॑ एकरऽ उपयोग डायनामिक एचटीएमएल सामग्री क॑ टूलटिप्स जोड़ै लेली सक्षम करै लेली करलऽ जाय छै । ई आ एकटा जानकारीपूर्ण उदाहरण देखू . |
टेम्पलेट | डोरी | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
टूलटिप बनाबय के समय उपयोग करय लेल एचटीएमएल के आधार बनाउ. टूलटिप के
सबसँ बाहरी रैपर तत्व मे |
शीर्षक | तार | आयोजन | '' . |
यदि कोनो फंक्शन देल गेल अछि त ओकरा अपन |
उत्प्रेरक | डोरी | 'होवर फोकस'। | टूलटिप कोना ट्रिगर होइत अछि - क्लिक करू | मंडराइत | फोकस | हाथ सं कएल गेल. अहाँ अनेक ट्रिगर पास क सकैत छी; एकरा सभकेँ एकटा रिक्त स्थानसँ अलग करू। manual कोनों अन्य ट्रिगर कें साथ संयोजित नहि कैल जा सकय छै. |
दृश्यपोर्ट | तार | वस्तु | आयोजन | { चयनकर्ता: 'शरीर', गद्दी: 0 } | टूलटिप कए एहि तत्व क सीमा क भीतर रखैत अछि । जेना : यदि कोनों फंक्शन देल गेल छै, त ओकरा ट्रिगरिंग एलिमेंट DOM नोड कें साथ ओकर एकमात्र आर्गुमेंट कें रूप मे कॉल करल जाय छै. |
व्यक्तिगत टूलटिप्स कें लेल विकल्प वैकल्पिक रूप सं डेटा विशेषताक कें उपयोग कें माध्यम सं निर्दिष्ट कैल जा सकय छै, जैना की ऊपर व्याख्या कैल गेल छै.
$().tooltip(options)
एकटा तत्व संग्रह मे एकटा टूलटिप हैंडलर संलग्न करैत अछि.
.tooltip('show')
कोनो तत्व के टूलटिप के उजागर करैत अछि. टूलटिप कें वास्तव मे दिखाएय सं पहिले (अर्थात shown.bs.tooltip
घटना घटित हुअ सं पहिले) कॉलर कें पास वापस आबि जायत छै. एकरा टूलटिप केरऽ "मैनुअल" ट्रिगरिंग मानलऽ जाय छै । शून्य-लंबाई शीर्षक वाला टूलटिप कहियो प्रदर्शित नहि कएल जाएत अछि.
.tooltip('hide')
कोनो तत्वक टूलटिपकेँ नुकाबैत अछि। टूलटिप कें वास्तव मे नुकाएय सं पहिले (अर्थात hidden.bs.tooltip
घटना घटित हुअ सं पहिले) कॉलर कें वापस आबि जायत छै. एकरा टूलटिप केरऽ "मैनुअल" ट्रिगरिंग मानलऽ जाय छै ।
.tooltip('toggle')
कोनो तत्वक टूलटिप टॉगल करैत अछि. टूलटिप कें वास्तव मे दिखायल गेलय या नुकाएलय सं पहिले (अर्थात shown.bs.tooltip
या hidden.bs.tooltip
घटना घटित हुअ सं पहिले) कॉलर कें पास वापस आबै छै. एकरा टूलटिप केरऽ "मैनुअल" ट्रिगरिंग मानलऽ जाय छै ।
.tooltip('destroy')
कोनो तत्वक टूलटिपकेँ नुकाबैत अछि आ नष्ट करैत अछि । टूलटिप्स जे प्रत्यायोजन कें उपयोग करयत छै (जे विकल्प कें उपयोग करयतselector
बनायल गेल छै ) कें वंशज ट्रिगर तत्वक पर व्यक्तिगत रूप सं नष्ट नहि कैल जा सकय छै.
घटना प्रकार | वर्णन |
---|---|
शो.बीएस.टूलटिप | show इंस्टेंस मेथड कें कॉल करय पर इ घटना तुरंत फायर भ जायत छै. |
देखाओल गेल अछि.bs.tooltip | ई घटना तखन फायर कएल जाइत अछि जखन टूलटिप उपयोगकर्ताक लेल दृश्यमान बनाओल गेल अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)। |
छिपाएँ.बीएस.टूलटिप | ई घटना तुरंत फायर कएल जाइत अछि जखन hide इंस्टेंस मेथड कॉल कएल गेल अछि. |
छिपल.बीएस.टूलटिप | ई घटना तखन फायर कएल जाइत अछि जखन टूलटिप उपयोगकर्ता सँ नुकाएब समाप्त भ' जाइत अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)। |
सम्मिलित.बी.एस.टूलटिप | ई घटना घटना के बाद फायर करलऽ जाय छै show.bs.tooltip जब॑ टूलटिप टेम्पलेट क॑ DOM म॑ जोड़लऽ गेलऽ छै । |
द्वितीयक जानकारी कें आवास कें लेल कोनों तत्व मे सामग्री कें छोट-छोट ओवरले जोड़ूं, जेना कि आईपैड पर छै.
पोपोवर जिनकर शीर्षक आ सामग्री दुनू शून्य-लंबाई अछि, कहियो प्रदर्शित नहि होइत अछि ।
पोपोवर्स कें लेल टूलटिप प्लगइन कें बूटस्ट्रैप कें अहां कें संस्करण मे शामिल करनाय आवश्यक छै.
प्रदर्शन कारण सं, टूलटिप आ पॉपओवर डाटा-एपीआई ऑप्ट-इन छै, मतलब अहां कें ओकरा स्वयं आरंभ करनाय होयत .
कोनो पृष्ठ पर सभ पॉपओवर के आरंभ करबाक एकटा तरीका ई होयत जे ओकरा ओकर data-toggle
विशेषता द्वारा चुनल जाय:
.btn-group
एक या एक के भीतर तत्वों पर .input-group
, या तालिका-संबंधित तत्वों पर ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
) पर पोपोवरों का उपयोग करते समय , आपको container: 'body'
अवांछित दुष्प्रभावों (जैसे तत्व व्यापक बढ़ना और/ या पोपोवर ट्रिगर भेला पर ओकर गोल-गोल कोन खोएब)।
disabled
कोनो या .disabled
तत्व मे पोपोवर जोड़बाक लेल , तत्व के a के अंदर राखू आ ओकर बदला <div>
मे ओहि पर पोपोवर लगाउ ।<div>
कखनो काल अहां कोनो हाइपरलिंक मे पॉपओवर जोड़य चाहय छी जे कईटा लाइन लपेटैत अछि. पॉपओवर प्लगइन केरऽ डिफ़ॉल्ट व्यवहार एकरा क्षैतिज आरू लंबवत रूप स॑ केंद्रित करना छै. white-space: nowrap;
एहि स बचबाक लेल अपन लंगर मे जोड़ू ।
चारि विकल्प उपलब्ध अछि : ऊपर, दाहिना, नीचाँ, आ बामा संरेखित ।
लोबोर्टिस पर सेड posuere consectetur एस्ट। एनियन ईउ लियो क्वाम। Pellentesque ornare सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम।
लोबोर्टिस पर सेड posuere consectetur एस्ट। एनियन ईउ लियो क्वाम। Pellentesque ornare सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम।
लोबोर्टिस पर सेड posuere consectetur एस्ट। एनियन ईउ लियो क्वाम। Pellentesque ornare सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम।
लोबोर्टिस पर सेड posuere consectetur एस्ट। एनियन ईउ लियो क्वाम। Pellentesque ornare सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम।
focus
अगिला क्लिक पर जे उपयोगकर्ता करय छै ओकरा पर पॉपओवर कें खारिज करय कें लेल ट्रिगर कें उपयोग करूं .
उचित क्रॉस-ब्राउजर आरू क्रॉस-प्लेटफॉर्म व्यवहार के लेलऽ, आपक॑ टैग के उपयोग करना चाहियऽ, <a>
टैग के नै ,<button>
आरू आपक॑ role="button"
आरू tabindex
विशेषता क॑ भी शामिल करना चाहियऽ ।
जावास्क्रिप्ट के माध्यम स पॉपओवर सक्षम करू:
विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-
, मे संलग्न करू , जेना data-animation=""
.
नाम | प्रकार | चुकनाइ | वर्णन |
---|---|---|---|
एनीमेशन | बूलियन | सत्य | पोपोवर पर एकटा CSS फेड संक्रमण लागू करू |
पात्र | तार | झूठ | झूठ | एकटा विशिष्ट तत्व मे पोपोवर जोड़ैत अछि। जेना : |
सामग्री | तार | आयोजन | '' . |
यदि कोनो फंक्शन देल गेल अछि त' ओकरा अपन |
देरी | नम्बर | वस्तु | ० | पोपोवर (ms) कें देखएय आ नुकाएय मे देरी - मैनुअल ट्रिगर प्रकार पर लागू नहि होयत छै यदि कोनों नंबर सप्लाई कैल गेल छै, त नुका/देखाउ दूनू पर विलंब लागू कैल जायत छै वस्तु संरचना अछि : १. |
एचटीएमएल | बूलियन | झूठ | पोपोवर मे एचटीएमएल डालू। यदि गलत छै, त jQuery कें text विधि कें उपयोग DOM मे सामग्री डालय कें लेल करल जैतय. यदि अहाँ XSS हमला के बारे में चिंतित छी त पाठ के प्रयोग करू. |
प्लेसमेंट के लिये | तार | आयोजन | 'ठीक' | पोपोवर के पोजीशन कैसे करे - टॉप | नीचे | बाएँ | सही | ऑटो। जब॑ कोनों फंक्शन क॑ प्लेसमेंट निर्धारित करै लेली प्रयोग करलऽ जाय छै त॑ ओकरा पॉपओवर डीओएम नोड क॑ ओकरऽ पहिलऽ आर्गुमेंट के रूप म॑ आरू ट्रिगरिंग एलिमेंट डीओएम नोड क॑ ओकरऽ दोसरऽ के रूप म॑ कॉल करलऽ जाय छै । |
चयनकर्ता | डोरी | झूठ | यदि कोनों चयनकर्ता उपलब्ध करायल गेल छै, त पोपोवर वस्तुअक कें निर्दिष्ट लक्ष्यक कें लेल प्रत्यायोजित कैल जेतय. व्यवहार म॑ एकरऽ उपयोग डायनामिक एचटीएमएल सामग्री क॑ पॉपओवर जोड़ै लेली सक्षम करै लेली करलऽ जाय छै । ई आ एकटा जानकारीपूर्ण उदाहरण देखू . |
टेम्पलेट | डोरी | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
पोपोवर बनाबय काल उपयोग करबाक लेल एचटीएमएल बेस करू. पोपोवर के पोपोवर के
सबसँ बाहरी रैपर तत्व मे |
शीर्षक | तार | आयोजन | '' . |
यदि कोनो फंक्शन देल गेल अछि त' ओकरा अपन |
उत्प्रेरक | डोरी | 'क्लिक' करू। | पोपोवर कोना ट्रिगर होइत अछि - क्लिक करू | मंडराइत | फोकस | हाथ सं कएल गेल. अहाँ अनेक ट्रिगर पास क सकैत छी; एकरा सभकेँ एकटा रिक्त स्थानसँ अलग करू। manual कोनों अन्य ट्रिगर कें साथ संयोजित नहि कैल जा सकय छै. |
दृश्यपोर्ट | तार | वस्तु | आयोजन | { चयनकर्ता: 'शरीर', गद्दी: 0 } | पोपोवर के एहि तत्व के सीमा के भीतर रखैत अछि. जेना : यदि कोनों फंक्शन देल गेल छै, त ओकरा ट्रिगरिंग एलिमेंट DOM नोड कें साथ ओकर एकमात्र आर्गुमेंट कें रूप मे कॉल करल जाय छै. |
व्यक्तिगत पॉपओवर कें लेल विकल्प वैकल्पिक रूप सं डेटा विशेषताक कें उपयोग कें माध्यम सं निर्दिष्ट कैल जा सकय छै, जैना की ऊपर व्याख्या कैल गेल छै.
$().popover(options)
एक तत्व संग्रह के लिये पोपोवर आरंभ करता है |
.popover('show')
एक तत्व के पोपोवर के खुलासा करैत अछि। पॉपओवर कें वास्तव मे दिखाएय सं पहिले (अर्थात shown.bs.popover
घटना घटित हुअ सं पहिले) कॉलर कें वापस आबै छै. एकरा पोपोवर केरऽ "मैनुअल" ट्रिगरिंग मानलऽ जाय छै । पोपोवर जिनकर शीर्षक आ सामग्री दुनू शून्य-लंबाई अछि, कहियो प्रदर्शित नहि होइत अछि ।
.popover('hide')
कोनो तत्वक पोपोवर नुकाबैत अछि। पॉपओवर कें वास्तव मे नुकाएय सं पहिले (अर्थात hidden.bs.popover
घटना घटित हुअ सं पहिले) कॉलर कें पास वापस आबि जायत छै. एकरा पोपोवर केरऽ "मैनुअल" ट्रिगरिंग मानलऽ जाय छै ।
.popover('toggle')
कोनो तत्व के पॉपओवर टॉगल करैत अछि. पॉपओवर कें वास्तव मे देखायल गेलय या नुकाएलय सं पहिले (अर्थात shown.bs.popover
या hidden.bs.popover
घटना घटित हुअ सं पहिले) कॉलर कें वापस आबै छै. एकरा पोपोवर केरऽ "मैनुअल" ट्रिगरिंग मानलऽ जाय छै ।
.popover('destroy')
कोनो तत्व के पोपोवर के नुका क नष्ट क दैत अछि। प्रतिनिधिमंडल कें उपयोग करय वाला पोपोवर (जे विकल्प कें उपयोग करयतselector
बनायल गेलय छै ) कें वंशज ट्रिगर तत्वक पर व्यक्तिगत रूप सं नष्ट नहि कैल जा सकय छै.
घटना प्रकार | वर्णन |
---|---|
शो.बीएस.पोपओवर | show इंस्टेंस मेथड कें कॉल करय पर इ घटना तुरंत फायर भ जायत छै. |
देखाओल गेल.bs.popover | ई घटना तखन फायर कएल जाइत अछि जखन पॉपओवर केँ उपयोगकर्ता केँ दृश्यमान बनाओल गेल अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)। |
छिपाएँ.बीएस.पोपोवर | ई घटना तुरंत फायर कएल जाइत अछि जखन hide इंस्टेंस मेथड कॉल कएल गेल अछि. |
छिपल.बीएस.गरीबी | ई घटना तखन फायर कएल जाइत अछि जखन पॉपओवर उपयोगकर्ता सँ नुकाएब समाप्त भ' जा���त अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)। |
डालल गेल.bs.popover | ई घटना घटना के बाद फायर करलऽ जाय छै show.bs.popover जब॑ पॉपओवर टेम्पलेट क॑ डीओएम म॑ जोड़लऽ गेलऽ छै । |
एहि प्लगइन क संग सभ अलर्ट संदेश मे खारिज कार्यक्षमता जोड़ू.
बटन कें उपयोग करय कें समय .close
, इ कें पहिल संतान होबाक चाही .alert-dismissible
आ मार्कअप मे ओकरा सं पहिने कोनों पाठ सामग्री नहि आबि सकय छै.
ई आ ओ बदलू आ फेरसँ प्रयास करू। डुइस मोलिस, एस्ट गैर कोमोडो लक्टस, निसी एरेट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेसी एलिट। क्रास मैटिस कॉन्सेक्टेतुर पुरुस बैठा अमेट फर्मेन्टम |
बस data-dismiss="alert"
अपन बंद बटन पर जोड़ू जे स्वचालित रूप सं एकटा अलर्ट बंद कार्यक्षमता देबय. अलर्ट बंद करला सं ओकरा डीओएम सं हटा देल जायत.
बंद करय कें समय अहां कें अलर्ट एनीमेशन कें उपयोग करय कें लेल, सुनिश्चित करूं कि ओकरा पर .fade
आ .in
क्लास पहिने सं लागू छै.
$().alert()
वंशज तत्वक पर क्लिक घटनाक कें लेल एकटा अलर्ट सुनय कें लेल बनायत छै जइ मे data-dismiss="alert"
विशेषता छै. (डेटा-एपीआई कें ऑटो-इनिशियलाइजेशन कें उपयोग करय कें समय आवश्यक नहि.)
$().alert('close')
कोनों अलर्ट कें डीओएम सं हटा क बंद करएयत छै. यदि तत्व पर .fade
आरू .in
वर्ग मौजूद छै, त॑ अलर्ट हटाबै स॑ पहल॑ फीका होय जैतै ।
बूटस्ट्रैप कें अलर्ट प्लगइन अलर्ट कार्यक्षमता मे हुक करय कें लेल किच्छू घटनाक कें उजागर करयत छै.
घटना प्रकार | वर्णन |
---|---|
बंद करू.bs.alert | 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"
आओर एकटा जोड़ू. data-target
विशेषता एकटा CSS चयनकर्ता कें स्वीकार करयत छै जइ data-target
पर संकुचन लागू करयत छै. collapse
संकुचित तत्व मे क्लास अवश्य जोड़ू । जँ अहाँ चाहैत छी जे ई पूर्वनिर्धारित रूपसँ खुजए, तँ अतिरिक्त वर्ग जोड़ू in
.
एक संकुचित नियंत्रण मे अकॉर्डियन-जैसा समूह प्रबंधन जोड़बाक लेल, डेटा विशेषता जोड़ू data-parent="#selector"
. एकरा क्रिया मे देखबाक लेल डेमो देखू।
के साथ मैन्युअल रूप स सक्षम करू:
विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-
, मे संलग्न करू , जेना data-parent=""
.
नाम | प्रकार | चुकनाइ | वर्णन |
---|---|---|---|
माता-पिता | चयनकर्ता | झूठ | यदि कोनों चयनकर्ता उपलब्ध करायल गेल छै, तखन निर्दिष्ट अभिभावक कें अंतर्गत सबटा संकुचित तत्व बंद भ जेतय जखन इ संकुचित आइटम दिखाएल जैतय. (पारंपरिक अकॉर्डियन व्यवहार के समान - ई panel वर्ग पर निर्भर करैत अछि) |
टॉगल करब | बूलियन | सत्य | आह्वान पर संकुचन योग्य तत्व टॉगल करैत अछि |
.collapse(options)
एकटा संकुचित तत्व के रूप मे अपन सामग्री के सक्रिय करैत अछि. एकटा वैकल्पिक विकल्प स्वीकार करैत अछि object
.
.collapse('toggle')
कोनो संकुचन योग्य तत्व केँ देखाओल गेल अथवा नुकाएल मे टॉगल करैत अछि. संकुचित तत्व कें वास्तव मे दिखायल गेलय या नुकाएलय सं पहिले (अर्थात shown.bs.collapse
या hidden.bs.collapse
घटना घटित हुअ सं पहिले) कॉलर कें पास वापस आबै छै.
.collapse('show')
एकटा संकुचित तत्व देखाबैत अछि। संकुचित तत्व कें वास्तव मे दिखाएय सं पहिले (अर्थात shown.bs.collapse
घटना घटित हुअ सं पहिले) कॉलर कें वापस आबै छै.
.collapse('hide')
एकटा संकुचित तत्वकेँ नुकाबैत अछि। संकुचित तत्व कें वास्तव मे नुकाएय सं पहिले (अर्थात hidden.bs.collapse
घटना घटित हुअ सं पहिने) कॉलर कें वापस आबै छै.
बूटस्ट्रैप केरऽ कोलैप्स क्लास कोलैप्स कार्यक्षमता म॑ हुक करै लेली कुछ घटना क॑ उजागर करै छै ।
घटना प्रकार | वर्णन |
---|---|
show.bs.collapse करब | show इंस्टेंस मेथड कें कॉल करय पर इ घटना तुरंत फायर भ जायत छै. |
देखाओल गेल.bs.collapse | इ घटना तखन फायर कैल जायत छै जखन कोनों संकुचन तत्व कें उपयोगकर्ता कें लेल दृश्यमान बना देल गेल छै (सीएसएस संक्रमण पूरा हुअ कें इंतजार करतय). |
छिपाएँ.bs.collapse | hide विधि बजाओल गेलाक बाद ई घटना तुरंत फायर कएल जाइत अछि । |
छिपल.bs.collapse | ई घटना तखन फायर कएल जाइत अछि जखन कोनो संकुचन तत्व उपयोगकर्ता सँ नुका देल गेल अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत) । |
तत्वों के माध्यम स॑ साइकिल चलाबै लेली एगो स्लाइड शो घटक, जेना कि हिंडोला । नेस्टेड हिंडोला समर्थित नहि अछि।
हिंडोला घटक आम तौर पर सुलभता मानक कें अनुरूप नहि छै. यदि अहां कें अनुपालन करय कें जरूरत छै, त कृपया अपन सामग्री प्रस्तुत करय कें लेल अन्य विकल्प पर विचार करूं.
बूटस्ट्रैप विशेष रूप स अपन एनीमेशन क लेल CSS3 क उपयोग करैत अछि, मुदा इंटरनेट एक्सप्लोरर 8 & 9 आवश्यक CSS गुण कए समर्थन नहि करैत अछि । एहि तरहें, एहि ब्राउज़र सभक उपयोग करबा काल कोनो स्लाइड संक्रमण एनीमेशन नहि होइत अछि । हम जानबूझ क' निर्णय लेने छी जे संक्रमणक लेल jQuery-आधारित फॉलबैक शामिल नहि करब.
क्लास कें .active
एकटा स्लाइड मे जोड़य कें जरूरत छै. नहि त हिंडोला देखबा मे नहि आओत।
नियंत्रणक कें लेल .glyphicon .glyphicon-chevron-left
आ .glyphicon .glyphicon-chevron-right
वर्गक कें आवश्यकता जरूरी नहि छै. बूटस्ट्रैप प्रदान करैत अछि .icon-prev
आओर .icon-next
सादा यूनिकोड विकल्प के रूप मे.
.carousel-caption
कोनो के भीतर तत्व के साथ अपन स्लाइड में कैप्शन आसानी स जोड़ू .item
. ओतय भीतर लगभग कोनो वैकल्पिक एचटीएमएल राखू आ ओ स्वतः संरेखित आ प्रारूपित भ' जायत.
हिंडोला नियंत्रण कें सही ढंग सं काज करय कें लेल id
सबसे बाहरी कंटेनर (the ) पर एकटा कें उपयोग कें आवश्यकता होयत छै . .carousel
एक सं बेसि हिंडोला जोड़य कें समय, या एकटा हिंडोला कें बदलय कें समय id
, संबंधित नियंत्रणक कें अपडेट करनाय सुनिश्चित करूं.
हिंडोला कें स्थिति कें आसानी सं नियंत्रित करय कें लेल डाटा विशेषताक कें उपयोग करूं. data-slide
कीवर्ड स्वीकार करय छै prev
या next
, जे स्लाइड स्थिति कें ओकर वर्तमान स्थिति कें सापेक्ष बदलय छै. वैकल्पिक रूप स, data-slide-to
एक कच्चा स्लाइड सूचकांक क॑ हिंडोला म॑ पास करै लेली प्रयोग करलऽ जाय छै data-slide-to="2"
, जे स्लाइड केरऽ स्थिति क॑ एक विशेष अनुक्रमणिका म॑ शिफ्ट करै छै जे स॑ शुरू होय छै 0
।
विशेषता क॑ data-ride="carousel"
पृष्ठ लोड स॑ शुरू होय क॑ एक हिंडोला क॑ एनिमेटिंग के रूप म॑ चिह्नित करै लेली प्रयोग करलऽ जाय छै । एकरऽ उपयोग एक ही हिंडोला केरऽ (अनावश्यक आरू अनावश्यक) स्पष्ट जावास्क्रिप्ट आरंभीकरण के साथ संयोजन म॑ नै करलऽ जाब॑ सकै छै ।
मैन्युअल रूप स हिंडोला के कॉल करू:
विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-
, मे संलग्न करू , जेना data-interval=""
.
नाम | प्रकार | चुकनाइ | वर्णन |
---|---|---|---|
अंतराल | संख्या | 5000 के अछि | कोनों वस्तु कें स्वचालित रूप सं साइकिल चलावय कें बीच देरी करय कें लेल समय कें मात्रा. जँ झूठ अछि तँ हिंडोला स्वतः साइकिल नहि चलत। |
रोकनाइ | तार | सुन्ना | "होवर"। | यदि पर सेट कैल गेल छै "hover" , त हिंडोला कें साइकिल चलानाय कें रोकयत छै mouseenter आ हिंडोला कें साइकिल चलानाय कें चालू करयत छै mouseleave . जँ , पर सेट कएल गेल अछि null , तँ हिंडोला पर मंडराइत रहलासँ एकरा विराम नहि कएल जाएत. |
मोड़नाइ | बूलियन | सत्य | हिंडोला के लगातार साइकिल चलाबय के चाही या हार्ड स्टॉप होबाक चाही. |
कीबोर्ड | बूलियन | सत्य | कीबोर्ड के घटना पर हिंडोला के प्रतिक्रिया देबाक चाही कि नहि. |
.carousel(options)
एकटा वैकल्पिक विकल्पक कें साथ हिंडोला कें आरंभ करयत छै object
आ आइटम कें माध्यम सं साइकिल चलानाय शुरू करयत छै.
.carousel('cycle')
हिंडोला आइटम के माध्यम स बामा स दाहिना दिस चक्र।
.carousel('pause')
हिंडोला के आइटम के माध्यम सं साइकिल चलाबय सं रोकैत अछि.
.carousel(number)
हिंडोला क॑ एक विशेष फ्रेम (0 आधारित, एक सरणी के समान) प॑ चक्र करै छै ।
.carousel('prev')
पिछला आइटम पर चक्र।
.carousel('next')
अगिला आइटम पर चक्र।
बूटस्ट्रैप केरऽ हिंडोला वर्ग हिंडोला क���र्यक्षमता म॑ हुक करै लेली दू घटना क॑ उजागर करै छै ।
दुनू घटनाक निम्नलिखित अतिरिक्त गुण अछि:
direction
: हिंडोला जाहि दिशा मे फिसल रहल अछि (या त "left"
या "right"
) ।relatedTarget
: DOM तत्व जे सक्रिय आइटम के रूप मे जगह पर फिसल जा रहल अछि.सब हिंडोला घटना हिंडोला पर स्वयं (अर्थात <div class="carousel">
) पर फायर कयल जाइत अछि |
घटना प्रकार | वर्णन |
---|---|
स्लाइड.बीएस.हिंडोला | slide इंस्टेंस विधि कें आह्वान करय पर इ घटना तुरंत फायर भ जायत छै. |
स्लाइड.बीएस.हिंडोला | ई घटना तखन फायर कएल जाइत अछि जखन हिंडोला अपन स्लाइड संक्रमण पूरा कए लैत अछि । |
प्रत्यय प्लगइन position: fixed;
चालू आओर बंद टॉगल करैत अछि, position: sticky;
. दाहिना तरफ केरऽ सबनेविगेशन एफिक्स प्लगइन केरऽ लाइव डेमो छै ।
डेटा विशेषताक कें माध्यम सं या मैन्युअल रूप सं अपन जावास्क्रिप्ट कें साथ प्रत्यय प्लगइन कें उपयोग करूं. दूनू स्थिति मे, अहां कें अपन चिपकल सामग्री कें स्थिति आ चौड़ाई कें लेल सीएसएस उपलब्ध करावा कें होयत.
नोट: सफारी रेंडरिंग बग क कारण अपेक्षाकृत स्थिति मे निहित तत्व, जेना खींचल या धक्का देल गेल कॉलम, पर प्रत्यय प्लगइन क उपयोग नहि करू .
प्रत्यय प्लगइन तीन वर्गक कें बीच टॉगल करयत छै, प्रत्येक एकटा विशेष स्थिति कें प्रतिनिधित्व करयत छै: .affix
, .affix-top
, आ .affix-bottom
. position: fixed;
अहां कें शैलीक कें उपलब्ध करावा कें होयत, on कें अपवाद कें साथ .affix
, इ वर्गक कें लेल स्वयं (एहि प्लगइन सं स्वतंत्र) वास्तविक स्थितियक कें संभालएय कें लेल.
एहि ठाम एफिक्स प्लगइन कोना काज करैत अछि:
.affix-top
ई दर्शाबै लेली जोड़ै छै कि तत्व अपनऽ सबसें ऊपरी-सबसे ऊपरी स्थिति म॑ छै । एहि बिन्दु पर कोनो सीएसएस पोजीशनिंगक आवश्यकता नहि अछि..affix
बदलैत अछि .affix-top
आ सेट करैत अछि position: fixed;
(बूटस्ट्रैप के सीएसएस द्वारा उपलब्ध कराओल गेल अछि) ।.affix
केँ .affix-bottom
. चूँकि ऑफसेट वैकल्पिक छै, एकटा सेट करय कें लेल अहां कें उचित सीएसएस सेट करय कें आवश्यकता छै. position: absolute;
एहन मे जरूरत पड़ला पर जोड़ू । प्लगइन डाटा एट्रिब्यूट या जावास्क्रिप्ट विकल्प कें उपयोग करयत छै जे इ निर्धारित करयत छै की ओतय सं तत्व कें कतय पोजीशन देनाय छै.नीचा देल गेल कोनों उपयोग विकल्प कें लेल अपन CSS सेट करय कें लेल उपरोक्त चरणक कें पालन करूं.
कोनो भी तत्व म॑ आसानी स॑ एफिक्स व्यवहार जोड़ै data-spy="affix"
लेली, बस वू तत्व म॑ जोड़ै छै जेकरा प॑ आपने जासूसी करना चाहै छियै । कोनों तत्व कें पिनिंग कें कहिया टॉगल करनाय कें परिभाषित करय कें लेल ऑफसेट कें उपयोग करूं.
जावास्क्रिप्ट के माध्यम स प्रत्यय प्लगइन के कॉल करू:
विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-
, मे संलग्न करू , जेना data-offset-top="200"
.
नाम | प्रकार | चुकनाइ | वर्णन |
---|---|---|---|
ऑफसेट | नम्बर | फंक्शन | वस्तु | १० | स्क्रॉल के स्थिति के गणना करय के समय स्क्रीन सं ऑफसेट करय लेल पिक्सेल. यदि एकटा नंबर देल गेल छै त ऑफसेट ऊपर आ नीचा दूनू दिशा मे लागू कैल जेतय. एकटा अद्वितीय, नीचा आ ऊपर ऑफसेट प्रदान करबाक लेल बस एकटा वस्तु offset: { top: 10 } वा offset: { top: 10, bottom: 5 } . जखन अहां कें कोनों ऑफसेट कें गतिशील रूप सं गणना करय कें जरूरत होयत छै तखन कोनों फंक्शन कें उपयोग करूं. |
निशाना | चयनकर्ता | नोड | jQuery तत्व | window वस्तु _ |
प्रत्यय के लक्ष्य तत्व निर्दिष्ट करैत अछि. |
.affix(options)
चिपकल सामग्री के रूप मे अपन सामग्री के सक्रिय करैत अछि. एकटा वैकल्पिक विकल्प स्वीकार करैत अछि object
.
.affix('checkPosition')
संबंधित तत्वो के आयाम, स्थिति, आरू स्क्रॉल स्थिति के आधार पर प्रत्यय के स्थिति के पुनर्गणना करै छै. , .affix
, .affix-top
आरू .affix-bottom
वर्ग क॑ नया अवस्था के अनुसार संलग्न सामग्री म॑ जोड़लऽ जाय छै या हटाय देलऽ जाय छै । जखन कखनो संलग्न सामग्री या लक्ष्य तत्व कें आयाम बदलल जायत छै तखन इ विधि कें कॉल करय कें जरूरत छै, ताकि संलग्न सामग्री कें सही स्थिति सुनिश्चित कैल जा सकय.
बूटस्ट्रैप कें एफिक्स प्लगइन एफिक्स कार्यक्षमता मे हुक करय कें लेल किछ घटनाक कें उजागर करय छै.
घटना प्रकार | वर्णन |
---|---|
affix.bs.affix के लिये | ई घटना तत्व के चिपकय सं तुरंत पहिने फायर क दैत अछि. |
संलग्न.बी.एस.संलग्न | तत्व लगाबय के बाद ई घटना फायर कएल जाइत अछि. |
affix-top.bs.affix के लिये | ई घटना तत्व के चिपकय-टॉप करय सं तुरंत पहिने फायर करैत अछि. |
संलग्न-शीर्ष.bs.affix | ई घटना तत्व के चिपकल-टॉप करला के बाद फायर करलऽ जाय छै. |
प्रत्यय-नीचे.bs.प्रत्यय | ई घटना तत्व के चिपकय-नीचा करय सं तुरंत पहिने फायर करैत अछि. |
संलग्न-नीचे.bs.affix | ई घटना तत्व के चिपकल-नीचाँ करला के बाद फायर करलऽ जाय छै. |