जावास्क्रिप्ट
बूटस्ट्रैप दे घटकें गी इक दर्जन शा मते कस्टम 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
) इक घटना दे शुरू च शुरू होंदा ऐ , ते इसदा भूतकाल विभक्ति रूप (उदाहरण shown
) इक क्रिया दे पूरा होने पर शुरू होंदा ऐ ।
3.0.0 थमां, सारे बूटस्ट्रैप घटनाएं गी नेमस्पेस कीता गेदा ऐ.
सारे अव्यय घटनाएं preventDefault
कार्यक्षमता प्रदान करदियां न। इस कन्नै इक कार्रवाई शुरू होने थमां पैह् ले उसदे निष्पादन गी रोकने दी समर्थता दित्ती जंदी ऐ।
बूटस्ट्रैप दे हर इक jQuery प्लगइन दे संस्करण गी VERSION
प्लगइन दे कन्स्ट्रक्टर दी संपत्ति दे राहें एक्सेस कीता जाई सकदा ऐ. मसाल आस्तै, टूलटिप प्लगइन आस्तै:
बूटस्ट्रैप दे प्लगइन्स खास करियै शानदार तरीके कन्नै पिच्छें नेईं पौंदे जिसलै जावास्क्रिप्ट अक्षम कीता जंदा ऐ. जेकर तुस इस मामले च बरतूनी दे अनुभव दी परवाह करदे ओ तां अपने बरतूनी <noscript>
गी स्थिति गी समझाने आस्तै (ते जावास्क्रिप्ट गी दुबारा सक्षम कीता जा) ते/जां अपने खुद दे कस्टम फालबैक जोड़ने आस्तै इस्तेमाल करो.
बूटस्ट्रैप आधिकारिक तौर पर प्रोटोटाइप जां jQuery UI जनेह् तृतीय-पक्ष जावास्क्रिप्ट लाइब्रेरी गी समर्थन नेईं करदा ऐ . बावजूद .noConflict
ते नेमस्पेस घटनाएं, संगतता समस्यां हो सकदियां न जेह् ड़ियां तुसेंगी अपने आपै च ठीक करने दी लोड़ ऐ.
साधारण संक्रमण प्रभावें आस्तै, transition.js
इक बारी दूई जेएस फाइलें दे कन्नै-कन्नै शामल करो. जेकर तुस संकलित (जां मिनीफाइड) दा इस्तेमाल करा करदे ओ bootstrap.js
, तां इसगी शामल करने दी लोड़ नेईं ऐ—एह् पैह् ले थमां गै ऐ.
Transition.js घटनाएं आस्तै इक बुनियादी मददगार ऐ transitionEnd
ते कन्नै गै इक CSS संक्रमण एमुलेटर ऐ। एह् दूए प्लगइन्स आसेआ CSS संक्रमण समर्थन दी जांच करने ते लटकदे संक्रमणें गी पकड़ने आस्तै बरतेआ जंदा ऐ।
संक्रमणें गी निम्नलिखित जावास्क्रिप्ट स्निपेट दा इस्तेमाल करियै वैश्विक रूप कन्नै अक्षम कीता जाई सकदा ऐ , जेह् ड़ा लोड होने दे बाद transition.js
(जां bootstrap.js
जां bootstrap.min.js
, जिऱयां के मामले च होंदा ऐ ) औना चाहिदा ऐ :
मोडल सुव्यवस्थित, पर लचीले, संवाद प्रॉम्प्टें कन्नै घट्ट शा घट्ट लोड़चदी कार्यक्षमता ते स्मार्ट डिफाल्ट न।
इक मोडल गी उसलै नेईं खोह् लना ज़रूरी ऐ जिसलै कोई दूआ अजें बी दिक्खेआ जा करदा ऐ। इक बारी च इक थमां मते मोडल दस्सने लेई कस्टम कोड दी लोड़ होंदी ऐ।
मोडल दे रूप-रचना ते/जां कार्यक्षमता गी प्रभावित करने आह् ले होर घटकें थमां बचने आस्तै इक मोडल दे HTML कोड गी अपने दस्तावेज़ च शीर्शक-स्तरीय स्थिति च रक्खने दी कोशश करो.
मोबाइल डिवाइस पर मोडल दा इस्तेमाल करने दे बारे च किश चेतावनी ऐ। विस्तार लेई साढ़े ब्राउज़र समर्थन डॉक्स दिक्खो।
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
जावास्क्रिप्ट दी इक लाइन कन्नै आईडी कन्नै इक मोडल गी कॉल करो :
विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-
, च जोड़ो , जिऱयां data-backdrop=""
.
नां | किसम | डिफाल्ट | ब्यौरा |
---|---|---|---|
पृष्ठभूमि दा | बूलियन या स्ट्रिंग दा'static' |
सच्च | इक मोडल-बैकग्राउंड तत्व शामल ऐ। वैकल्पिक रूप कन्नै, static इक बैकग्राउंड आस्तै निर्दिश्ट करो जेह् ड़ी क्लिक पर मोडल गी बंद नेईं करदी ऐ. |
कीबोर्ड दा | बूलियन | सच्च | एस्केप कुंजी दबाने पर मोडल बंद करदा ऐ |
शो | बूलियन | सच्च | आरंभ करने पर मोडल दस्सदा ऐ। |
रिमोट | बत्त | गलत | एह् विकल्प v3.3.0 थमां गै लागू होई गेदा ऐ ते v4 च हटाई दित्ता गेआ ऐ. अस इसदे बजाय क्लाइंट-साइड टेम्पलेटिंग जां इक डेटा बाइंडिंग फ्रेमवर्क दा इस्तेमाल करने दी सलाह दिंदे न, जां अपने आप गी jQuery.load गी बुलाने दी सलाह दिंदे न. जेकर कोई दूरस्थ URL उपलब्ध करोआया गेदा ऐ तां सामग्री गी jQuery दी विधि दे राहें इक बारी लोड कीता जाग ते div |
.modal(options)
तुंदी सामग्री गी मोडल दे रूप च सक्रिय करदा ऐ। इक वैकल्पिक विकल्प स्वीकार करदा ऐ object
.
.modal('toggle')
मैन्युअल रूप कन्नै इक मोडल टॉगल करदा ऐ। मोडल गी असल च दस्सने जां छिपाने थमां पैह् ले (यानी shown.bs.modal
जां hidden.bs.modal
घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।
.modal('show')
मैन्युअल रूप कन्नै इक मोडल खोह् लदा ऐ। मोडल गी असल च दस्से जाने थमां पैह् ले (यानी shown.bs.modal
घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।
.modal('hide')
मैन्युअल रूप कन्नै इक मोडल छिपांदा ऐ। मोडल गी असल च छिपाने थमां पैह् ले (यानी hidden.bs.modal
घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।
.modal('handleUpdate')
इक स्क्रॉलबार दा मुकाबला करने आस्तै मोडल दी स्थिति गी दुबारा समायोजित करदा ऐ इस मामले च इक दिक्खने गी मिलदा ऐ, जेह् ड़ा मोडल गी बाएं आह् ली कूद करग।
तदूं गै लोड़ ऐ जदूं मोडल दी ऊंचाई च बदलाव औंदा ऐ जिसलै एह् खुल्ली जंदा ऐ।
बूटस्ट्रैप दा मोडल वर्ग मोडल कार्यक्षमता च हुक करने आस्तै किश घटनाएं गी उजागर करदा ऐ।
सारे मोडल घटनाएं गी मोडल पर गै (यानी पर <div class="modal">
) फायर कीता जंदा ऐ ।
घटना दा प्रकार | ब्यौरा |
---|---|
शो।बीएस.मोडल | show इंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ। जेकर कुसै क्लिक दे कारण ऐ तां क्लिक कीता गेदा तत्व relatedTarget घटना दी संपत्ति दे रूप च उपलब्ध ऐ. |
दिखाया।बीएस.मोडल | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै मोडल गी बरतूनी गी दिक्खने आह् ला बनाया गेआ ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)। जेकर कुसै क्लिक दे कारण ऐ तां क्लिक कीता गेदा तत्व relatedTarget घटना दी संपत्ति दे रूप च उपलब्ध ऐ. |
छिपाओ।बीएस.मोडल | इस घटना गी फौरन फायर कीता जंदा ऐ जिसलै hide इंस्टेंस विधि गी बुलाया गेआ ऐ. |
छिपे दा.बी.एस.मोडल | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै मोडल बरतूनी थमां छिपाना समाप्त होई जंदा ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)। |
लोड कीता।बीएस.मोडल | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै मोडल ने remote विकल्प दा उपयोग करदे होई सामग्री लोड कीती ऐ। |
इस साधारण प्लगइन कन्नै लगभग कुसै बी चीज़ च ड्रॉपडाउन मेनू जोड़ो, जिंदे च नवबार, टैब, ते गोलियां शामल न।
.open
डेटा विशेषताएं जां जावास्क्रिप्ट दे राहें, ड्रॉपडाउन प्लगइन पैरेंट सूची आइटम पर क्लास गी टॉगल करियै छिपी दी सामग्री (ड्रॉपडाउन मेनू) गी टॉगल करदा ऐ।
मोबाइल डिवाइस पर, इक ड्रॉपडाउन खोलने कन्नै .dropdown-backdrop
मेनू दे बाहर टैप करने पर ड्रॉपडाउन मेनू बंद करने आस्तै इक टैप क्षेत्र दे रूप च जोड़ेआ जंदा ऐ, जेह् ड़ा उचित आईओएस समर्थन आस्तै इक लोड़ ऐ। इसदा मतलब ऐ जे खुल्ले ड्रॉपडाउन मेनू थमां बक्ख-बक्ख ड्रॉपडाउन मेनू च बदलने लेई मोबाइल पर इक अतिरिक्त टैप दी लोड़ होंदी ऐ।
नोट: data-toggle="dropdown"
एप्लिकेशन स्तर पर ड्रॉपडाउन मेनू बंद करने आस्तै एट्रिब्यूट पर भरोसा कीता जंदा ऐ, इसलेई एह् हमेशा इसदा इस्तेमाल करना इक अच्छा विचार ऐ.
data-toggle="dropdown"
ड्रॉपडाउन टॉगल करने लेई इक लिंक जां बटन च जोड़ो ।
data-target
लिंक बटनें कन्नै URL गी बरकरार रखने आस्तै, href="#"
.
जावास्क्रिप्ट दे राहें ड्रॉपडाउन गी कॉल करो:
data-toggle="dropdown"
अजे बी लोड़ ऐइस गल्लै दी परवाह नेईं करदे होई जे तुस जावास्क्रिप्ट दे राहें अपने ड्रॉपडाउन गी कॉल करदे ओ जां इसदे बजाय डेटा-एपीआई दा इस्तेमाल करदे ओ, data-toggle="dropdown"
ड्रॉपडाउन दे ट्रिगर तत्व पर हमेशा मौजूद रौह् ने दी लोड़ ऐ.
कोई नेईं
$().dropdown('toggle')
दित्ते गेदे नवबार जां टैब कीते गेदे नेविगेशन दे ड्रॉपडाउन मेनू गी टॉगल करदा ऐ।
सारे ड्रॉपडाउन घटनाएं गी .dropdown-menu
's पैरेंट तत्व पर फायर कीता जंदा ऐ.
सारे ड्रॉपडाउन घटनाएं च इक relatedTarget
गुण होंदा ऐ, जिसदा मूल्य टॉगलिंग एंकर तत्व ऐ.
घटना दा प्रकार | ब्यौरा |
---|---|
शो.बीएस.ड्रॉपडाउन | शो इंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ. |
दिखाया।बीएस.ड्रॉपडाउन | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै ड्रॉपडाउन गी बरतूनी गी दिक्खने आह् ला बनाया गेआ ऐ (CSS संक्रमणें दा इंतजार करग, पूरा करने आस्तै)। |
छिपाओ।बीएस।ड्रॉपडाउन | इस घटना गी तुरत फायर कीता जंदा ऐ जिसलै हिड इंस्टेंस विधि गी बुलाया गेदा ऐ. |
छिपे दा.बी.एस.ड्रॉपडाउन | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै ड्रॉपडाउन बरतूनी थमां छिपाना समाप्त होई जंदा ऐ (CSS संक्रमणें दा इंतजार करग, पूरा करने आस्तै)। |
स्क्रॉलस्पाई प्लगइन स्क्रॉल स्थिति दे आधार उप्पर नेव लक्ष्यें गी स्वतः अपडेट करने आस्तै ऐ। नवबार दे हेठ दित्ते गेदे इलाके गी स्क्रॉल करो ते सक्रिय वर्ग बदलदे दिक्खो। ड्रॉपडाउन उप आइटमें गी बी हाइलाइट कीता जाग।
विज्ञापन लेगिंग keytar, ब्रंच आईडी कला पार्टी dolor laboure। पिचफोर्क yr एनिम लो-फाई पहले वे बिक चुके qui। टम्बलर फार्म-टू-टेबल साइकिल अधिकार जो भी हो। अनिम केफ्फीएह कार्लेस कार्डिगन। Velit seitan mcsweeney दा फोटो बूथ 3 भेड़िया चंद्रमा irure। कोस्बी स्वेटर लोमो जीन शॉर्ट्स, विलियम्सबर्ग हुडी न्यूनतम क्यूई तुसें शायद उन्हें एट कार्डिगन ट्रस्ट फंड culpa बायोडीजल वेस एंडरसन सौंदर्यशास्त्र दे बारे च नेईं सुनेआ ऐ। निहिल टैटू accusamus, cred विडंबना बायोडीजल केफियेह कारीगर उल्लमको consequat।
वेनियम मार्फा मूंछ स्केटबोर्ड, adipisicing fugiat velit पिचफोर्क दाढ़ी। फ्रीगन दाढ़ी aliqua cupidat mcsweeney दा वेरो। कामदेवताट चार लोको निसी, ईए हेल्वेटिका नुल्ला कार्लेस। टैटू कोस्बी स्वेटर खाद्य ट्रक, mcsweeney दा quis गैर freegan विनाइल। लो-फाई वेस एंडरसन +1 सार्टोरियल। कार्लेस गैर सौंदर्य व्यायाम क्विस जेंट्रीफाई। ब्रुकलिन adipisicing शिल्प बीयर वाइस केतार 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.
केतार ट्वी ब्लॉग, कुलपा मैसेंजर बैग मारफा जो भी डेलेक्टस फूड ट्रक। सपिएंटे सिंथ आईडी असुमेंडा। Locavore sed helvetica क्लिच विडंबना, थंडरकैट्स तुसें शायद उंदे बारे च नेईं सुनेआ ऐ consequat हुडी लस मुक्त लो-फाई फैप aliquip। Labore कुलीन placeat पहले वे बिक गया, टेरी रिचर्डसन proident ब्रंच nesciunt quis cosby स्वेटर pariatur keffiyeh उत helvetica कारीगर। कार्डिगन शिल्प बीयर seitan रेडीमेड velit। वीएचएस चम्ब्रे लैबोरिस टेम्पोर वेनियम। एनिम मोलिट मिनी कोमोडो उल्लमको थंडरकैट्स।
नवबार लिंक च हल करने योग्य आईडी लक्ष्य होन चाहिदे न। मसाल आस्तै, इक <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=""
.
नां | किसम | डिफाल्ट | ब्यौरा |
---|---|---|---|
ऑफसेट करना | नंबर | १० | स्क्रॉल दी स्थिति दी गणना करदे बेल्लै शीर्शक थमां ऑफसेट करने आस्तै पिक्सेल। |
घटना दा प्रकार | ब्यौरा |
---|---|
सक्रिय करना.बी.एस.स्क्रॉलस्पी | एह् घटना उस बेल्लै फायर करदी ऐ जिसलै कोई नमीं आइटम स्क्रॉलस्पी आसेआ सक्रिय होई जंदी ऐ। |
स् थानीय सामग्री दे फलक दे राहें संक्रमण च त्वरित, गतिशील टैब फ़ंक्शनलटी जोड़ो, इत्थूं तगर जे ड्रॉपडाउन मेनू दे राहें बी। नेस्टेड टैब समर्थत नेईं न।
कच्चे डेनिम तुसें शायद उन्हें जीन शॉर्ट्स ऑस्टिन दे बारे च नेईं सुनेआ ऐ। नेस्सिउंट टोफू स्टंपटाउन एलिक्वा, रेट्रो सिंथ मास्टर सफाई। मूंछ क्लिच अस्थायी, विलियम्सबर्ग कार्ल्स शाकाहारी हेल्वेटिका। Reprehenderit कसाई रेट्रो केफीएह ड्रीमकैचर सिंथ। कोस्बी स्वेटर ईयू बान्ह मी, क्यूई इरुरे टेरी रिचर्डसन पूर्व स्क्वीड। एलिक्विप प्लेसैट साल्विया सिलम आईफोन। Seitan aliquip quis कार्डिगन अमेरिकी परिधान, कसाई voluptate निसी क्यू।
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
एह् प्लगइन टैब कीते गेदे नेविगेशन घटक गी टैब कीते जाने आह् ले क्षेत्रें गी जोड़ने आस्तै विस्तार दिंदा ऐ।
जावास्क्रिप्ट दे राहें टैब करने योग्य टैबें गी सक्षम करो (हर टैब गी व्यक्तिगत रूप कन्नै सक्रिय करने दी लोड़ ऐ):
तुस बक्ख-बक्ख टैबें गी केईं तरीके कन्नै सक्रिय करी सकदे ओ:
data-toggle="tab"
तुस इक तत्व गी निर्दिश्ट करियै जां कुसै बी तत्व पर बिना कुसै जावास्क्रिप्ट लिखे दे टैब जां गोली नेविगेशन गी सक्रिय करी सकदे ओ data-toggle="pill"
। nav
टैब च ते nav-tabs
क्लासें गी जोड़ने ul
कन्नै बूटस्ट्रैप टैब स्टाइलिंग लागू होग , जिसलै के nav
ते nav-pills
क्लासें गी जोड़ने कन्नै गोली स्टाइलिंग लागू होग .
टैबें गी फीके करने आस्तै, .fade
हर इक च जोड़ो .tab-pane
. पैह् ले टैब फलक गी बी .in
शुरूआती सामग्री गी दिक्खने आह् ला बनाना होग।
$().tab
इक टैब तत्व ते सामग्री कंटेनर गी सक्रिय करदा ऐ। टैब च डीओएम च इक data-target
जां इक href
कंटेनर नोड गी लक्ष्य बनाना चाहिदा ऐ. उपर्युक्त उदाहरनें च, टैब विशेषताएं <a>
कन्नै एस न।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 |
दिखाया।बीएस.टैब | एह् घटना इक टैब दस्सने दे बाद टैब शो पर फायर करदी ऐ. सक्रिय टैब ते पिछले सक्रिय टैब (जेकर उपलब्ध ऐ तां) गी क्रमशः निशाना बनाने लेई 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 जां इक दे अंदर तत्वें पर टूलटिप्स दा इस्तेमाल करदे बेल्लै .input-group
, जां तालिका कन्नै सरबंधत तत्वें ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
) पर, तुसेंगी container: 'body'
अनचाहे दुष्प्रभावें (जि’यां तत्व व्यापक बधना ते/ या टूलटिप ट्रिगर होने पर अपने गोल कोने खोना)।
कीबोर्ड कन्नै नेविगेट करने आह् ले बरतूनी आस्तै, ते खास करियै सहायक तकनीकें दे बरतूनी आस्तै, तुसेंगी सिर्फ कीबोर्ड-केंद्रित तत्वें जि’यां लिंक, फार्म नियंत्रण, जां इक tabindex="0"
विशेषता आह् ले कुसै बी मनमानी तत्व च टूलटिप्स जोड़ना चाहिदा ऐ।
disabled
इक जां तत्व च इक टूलटिप जोड़ने आस्तै .disabled
, तत्व गी a दे अंदर रक्खो <div>
ते इसदे बजाय उस पर टूलटिप लागू <div>
करो।
विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-
, च जोड़ो , जिऱयां data-animation=""
.
नां | किसम | डिफाल्ट | ब्यौरा |
---|---|---|---|
एनीमेशन दा | बूलियन | सच्च | टूलटिप पर इक सीएसएस फीड संक्रमण लागू करो |
कंटेनर दा | तार | गलत | गलत | टूलटिप गी इक विशिष्ट तत्व कन्नै जोड़दा ऐ। उदाहरण : |
चिर | नंबर | चीज | ० ऐ | टूलटिप (ms) गी दस्सने ते छिपाने च देरी - मैन्युअल ट्रिगर प्रकार पर लागू नेईं होंदा ऐ जेकर कोई नंबर सप्लाई कीता जंदा ऐ तां छुपा/दिखाने दोनें पर देरी लागू कीती जंदी ऐ वस्तु संरचना ऐ : |
एचटीएमएल ऐ | बूलियन | गलत | टूलटिप च एचटीएमएल सम्मिलित करो। जेकर गलत ऐ तां jQuery दी text विधि दा इस्तेमाल DOM च सामग्री गी सम्मिलित करने लेई कीता जाग. जेकर तुस XSS हमले दे बारे च चिंतित ओ तां पाठ दा इस्तेमाल करो. |
प्लेसमेंट दा | तार | फंक्शन | 'उप्पर' | टूलटिप गी किस चाल्ली पोजीशन देना ऐ - टॉप | नीचे | बाईं ओर | सही | ऑटो। जदूं कुसै फंक्शन दा इस्तेमाल प्लेसमेंट निर्धारत करने आस्तै कीता जंदा ऐ तां इसगी टूलटिप DOM नोड गी अपने पैह् ले तर्क दे रूप च ते ट्रिगर करने आह् ले तत्व DOM नोड गी अपने दुए दे रूप च बुलाया जंदा ऐ। |
चयनकर्ता ऐ | डोर | गलत | जेकर कोई चयनकर्ता उपलब्ध करोआया गेआ ऐ तां टूलटिप वस्तुएं गी निर्दिश्ट लक्ष्यें गी सौंपेआ जाग. व्यवहार च, इसदा इस्तेमाल गतिशील HTML सामग्री गी टूलटिप्स जोड़ने च सक्षम बनाने लेई कीता जंदा ऐ। एह् ते इक जानकारीपूर्ण उदाहरण दिक्खो . |
टेम्पलेट ऐ | डोर | '<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 इंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ। |
दिखाया।बीएस.टूलटिप | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै टूलटिप गी बरतूनी गी दिक्खने आह् ला बनाया गेआ ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)। |
छिपाओ.बीएस.टूलटिप | इस घटना गी फौरन फायर कीता जंदा ऐ जिसलै hide इंस्टेंस विधि गी बुलाया गेआ ऐ. |
छिपे दा.बी.एस.टूलटिप | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै टूलटिप बरतूनी थमां छिपाना समाप्त होई जंदा ऐ (CSS संक्रमणें गी पूरा होने दा इंतजार करग)। |
सम्मिलित कीता।बीएस.टूलटिप | एह् घटना उस show.bs.tooltip घटना दे बाद फायर कीती जंदी ऐ जिसलै टूलटिप टेम्पलेट गी DOM च जोड़ेआ गेआ ऐ. |
हाउसिंग सेकेंडरी जानकारी आस्तै कुसै बी तत्व च सामग्री दे छोटे ओवरले गी जोड़ो, जि’यां आईपैड पर।
पोपोवर जिंदा शीर्षक ते सामग्री दोनों शून्य-लंबाई होंदी ऐ, कदें बी प्रदर्शत नेईं कीती जंदी।
पोपोवर्स गी टूलटिप प्लगइन गी बूटस्ट्रैप दे तुंदे संस्करण च शामल करने दी लोड़ ऐ.
प्रदर्शन कारणें कन्नै, टूलटिप ते पोपोवर डेटा-एपीआई ऑप्ट-इन न , मतलब तुसेंगी अपने आपै गी उनेंगी आरंभ करना होग .
इक पृष्ठ पर सारे पॉपओवरें गी शुरू करने दा इक तरीका एह् होग जे उ'नेंगी उंदी data-toggle
विशेषता कन्नै चुनना:
.btn-group
a जां इक दे अंदर तत्वें पर पोपोवरें दा इस्तेमाल करदे बेल्लै .input-group
, जां तालिका कन्नै सरबंधत तत्वें ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
) पर, तुसेंगी container: 'body'
अनचाहे दुष्प्रभावें (जि’यां तत्व व्यापक बधना ते/ या पोपोवर ट्रिगर होने पर अपने गोल कोने खोना)।
disabled
ए या तत्व च इक पोपोवर जोड़ने लेई .disabled
, तत्व गी इक दे अंदर रक्खो <div>
ते इसदे बजाय उस पर पोपोवर लागू <div>
करो।
कदें-कदें तुस इक हाइपरलिंक च इक पॉपओवर जोड़ना चांह् दे ओ जेह् ड़ा मते सारे लाइनें गी लपेटदा ऐ। पॉपओवर प्लगइन दा डिफाल्ट व्यवहार इसगी क्षैतिज ते लंबवत केंद्रत करना ऐ. white-space: nowrap;
इस थमां बचने आस्तै अपने लंगरें च जोड़ो ।
चार विकल्प उपलब्ध न: ऊपर, दाएं, थल्ले, ते बाएं संरेखित।
लोबोर्टिस पर सेड पोसुएरे कन्सेक्टेतुर एस्ट। एनियन ईयू लियो क्वाम। पेलेन्टेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम।
लोबोर्टिस पर सेड पोसुएरे कन्सेक्टेतुर एस्ट। एनियन ईयू लियो क्वाम। पेलेन्टेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम।
लोबोर्टिस पर सेड पोसुएरे कन्सेक्टेतुर एस्ट। एनियन ईयू लियो क्वाम। पेलेन्टेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम।
लोबोर्टिस पर सेड पोसुएरे कन्सेक्टेतुर एस्ट। एनियन ईयू लियो क्वाम। पेलेन्टेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम।
focus
अगले क्लिक पर पॉपओवर गी खारिज करने आस्तै ट्रिगर दा इस्तेमाल करो जेह् ड़ा बरतूनी करदा ऐ .
उचित क्रॉस-ब्राउज़र ते क्रॉस-प्लेटफार्म व्यवहार आस्तै, तुसें टैग दा इस्तेमाल करना होग <a>
, टैग नेईं<button>
, ते तुसेंगी role="button"
ते tabindex
विशेषताएं गी बी शामल करना होग.
जावास्क्रिप्ट दे राहें पोपोवर सक्षम करो:
विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-
, च जोड़ो , जिऱयां data-animation=""
.
नां | किसम | डिफाल्ट | ब्यौरा |
---|---|---|---|
एनीमेशन दा | बूलियन | सच्च | पोपोवर पर इक सीएसएस फीड संक्रमण लागू करो |
कंटेनर दा | तार | गलत | गलत | पोपोवर गी इक विशिष्ट तत्व कन्नै जोड़दा ऐ। उदाहरण : |
समग्गरी | तार | फंक्शन | '' ऐ। |
|
चिर | नंबर | चीज | ० ऐ | पोपोवर गी दस्सने ते छिपाने च देरी (ms) - मैन्युअल ट्रिगर प्रकार पर लागू नेईं होंदा ऐ जेकर कोई नंबर सप्लाई कीता जंदा ऐ तां छुपा/दिखाने दोनें पर देरी लागू कीती जंदी ऐ वस्तु संरचना ऐ : |
एचटीएमएल ऐ | बूलियन | गलत | पोपोवर च एचटीएमएल सम्मिलित करो। जेकर गलत ऐ तां jQuery दी text विधि दा इस्तेमाल DOM च सामग्री गी सम्मिलित करने लेई कीता जाग. जेकर तुस XSS हमले दे बारे च चिंतित ओ तां पाठ दा इस्तेमाल करो. |
प्लेसमेंट दा | तार | फंक्शन | 'स्हेई' | पोपोवर गी किस चाल्ली पोजीशन देना ऐ - टॉप | नीचे | बाईं ओर | सही | ऑटो। जदूं कुसै फंक्शन दा इस्तेमाल प्लेसमेंट निर्धारत करने आस्तै कीता जंदा ऐ तां इसगी पोपोवर डीओएम नोड गी अपने पैह् ले तर्क दे रूप च ते ट्रिगर करने आह् ले तत्व डीओएम नोड गी अपने दुए दे रूप च बुलाया जंदा ऐ। |
चयनकर्ता ऐ | डोर | गलत | जेकर कोई चयनकर्ता उपलब्ध करोआया गेआ ऐ तां पोपोवर वस्तुएं गी निर्दिश्ट लक्ष्यें गी सौंपेआ जाग। व्यवहार च, इसदा इस्तेमाल गतिशील HTML सामग्री गी पॉपओवर जोड़ने च सक्षम बनाने लेई कीता जंदा ऐ। एह् ते इक जानकारीपूर्ण उदाहरण दिक्खो . |
टेम्पलेट ऐ | डोर | '<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 इंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ। |
दिखाया।बी.एस.पोपोवर | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै पोपओवर गी बरतूनी गी दिक्खने आह् ला बनाया गेआ ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)। |
छिपाओ।बीएस.पोपोवर | इस घटना गी फौरन फायर कीता जंदा ऐ जिसलै hide इंस्टेंस विधि गी बुलाया गेआ ऐ. |
छिपा।बीएस.गरीबी | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै पोपोवर बरतूनी थमां छिपाना समाप्त होई जंदा ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)। |
डाला।बीएस.गरीबी | इस घटना गी उस show.bs.popover घटना दे बाद फायर कीता जंदा ऐ जिसलै पोपोवर टेम्पलेट गी डीओएम च जोड़ेआ गेआ ऐ. |
इस प्लगइन कन्नै सारे अलर्ट संदेशें च खारिज फ़ंक्शनलटी जोड़ो.
बटन दा इस्तेमाल करदे बेल्लै .close
एह् दा पैह् ला बच्चा होना चाहिदा ऐ .alert-dismissible
ते मार्कअप च इसदे पैह् ले कोई बी पाठ सामग्री नेईं आई सकदी।
इस ते उस गी बदलो ते दुबारा कोशश करो। डुइस मोलिस, एस्ट गैर कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेसी एलिट। क्रास मैटिस कन्सेक्टेतुर पुरुस बैठना अमेट फर्मेन्टम।
बस data-dismiss="alert"
अपने बंद बटन च जोड़ो तां जे स्वचालित रूप कन्नै इक अलर्ट बंद कार्यक्षमता दित्ती जाई सकै। अलर्ट बंद करने कन्नै एह् डीओएम थमां हटाई दित्ता जंदा ऐ।
बंद होने पर अपने अलर्टें गी एनीमेशन दा इस्तेमाल करने आस्तै, सुनिश्चत करो जे उंदे कोल पैह् ले थमां गै .fade
ते .in
क्लासें गी लागू कीता गेदा ऐ.
$().alert()
वंशज तत्वें पर क्लिक घटनाएं आस्तै इक अलर्ट सुनने आस्तै बनांदा ऐ जिंदे च data-dismiss="alert"
एट्रिब्यूट ऐ. (डेटा-एपीआई दे ऑटो-इनिशियलाइजेशन दा इस्तेमाल करदे बेल्लै जरूरी नेईं ऐ।)
$().alert('close')
डीओएम थमां इक अलर्ट गी हटाइयै बंद करदा ऐ। जेकर तत्व पर .fade
ते .in
क्लास मौजूद न तां अलर्ट गी हटाने थमां पैह् ले फीका होई जाग.
बूटस्ट्रैप दा अलर्ट प्लगइन अलर्ट कार्यक्षमता च हुक करने आस्तै किश घटनाएं गी उजागर करदा ऐ।
घटना दा प्रकार | ब्यौरा |
---|---|
बंद करो।बीएस।अलर्ट | 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
एस दे कन्नै एस गी स्वैप करना बी संभव ऐ .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"
ते इक जोड़ो। एट्रिब्यूट इक CSS चयनकर्ता गी स्वीकार करदा ऐ जिस पर संकुचन लागू कीता जाई सकदा ऐ data-target
. संकुचित तत्व data-target
च वर्ग गी ज़रूर जोड़ो । collapse
जेकर तुस इसगी डिफाल्ट रूप कन्नै खुल्लना चांह् दे ओ तां अतिरिक्त वर्ग जोड़ो in
.
इक संकुचित नियंत्रण च अकॉर्डियन-जैसे समूह प्रबंधन गी जोड़ने आस्तै, डेटा विशेषता जोड़ो data-parent="#selector"
. इसगी एक्शन च दिक्खने लेई डेमो दा संदर्भ लैओ।
कन्नै मैन्युअल रूप कन्नै सक्षम करो:
विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-
, च जोड़ो , जिऱयां data-parent=""
.
नां | किसम | डिफाल्ट | ब्यौरा |
---|---|---|---|
माता-पिता | चयनकर्ता ऐ | गलत | जेकर कोई चयनकर्ता उपलब्ध करोआया गेदा ऐ तां निर्दिश्ट माता-पिता दे हेठ दित्ते गेदे सारे संकुचित तत्व बंद होई जांगन जिसलै एह् संकुचित आइटम दस्सी जाह् ग. (परंपरागत अकॉर्डियन व्यवहार दे समान - एह् panel वर्ग उप्पर निर्भर करदा ऐ) |
टॉगल करदे | बूलियन | सच्च | आह्वान पर संकुचित तत्व गी टॉगल करदा ऐ |
.collapse(options)
तुंदी सामग्री गी इक संकुचित तत्व दे रूप च सक्रिय करदा ऐ। इक वैकल्पिक विकल्प स्वीकार करदा ऐ object
.
.collapse('toggle')
इक संकुचित तत्व गी दस्से गेदे जां छिपाने आस्तै टॉगल करदा ऐ। संकुचित तत्व गी असल च दस्सेआ गेआ जां छिपाने थमां पैह् ले (यानी shown.bs.collapse
जां hidden.bs.collapse
घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।
.collapse('show')
इक संकुचित तत्व दस्सदा ऐ। संकुचित तत्व गी असल च दस्से जाने थमां पैह् ले (यानी shown.bs.collapse
घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।
.collapse('hide')
इक संकुचित तत्व गी छुपांदा ऐ। संकुचित तत्व गी असल च छिपाने थमां पैह् ले (यानी hidden.bs.collapse
घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।
बूटस्ट्रैप दा पतन वर्ग पतन कार्यक्षमता च हुक करने आस्तै किश घटनाएं गी उजागर करदा ऐ.
घटना दा प्रकार | ब्यौरा |
---|---|
दिखाओ।बीएस.कलाप्स | show इंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ। |
दिखाया।बीएस.कलाप्स | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै इक संकुचन तत्व गी बरतूनी गी दिक्खने आह् ला बनाया गेआ ऐ (CSS संक्रमणें गी पूरा होने दा इंतजार करग)। |
छिपाओ।बीएस.संकुचित करो | इस घटना गी फौरन फायर कीता जंदा ऐ जिसलै hide विधि गी बुलाया गेआ ऐ। |
छिपे दा.बी.एस.कलाप्स | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै कोई संकुचन तत्व बरतूनी थमां छुपाया गेदा ऐ (CSS संक्रमणें गी पूरा होने दा इंतजार करग)। |
तत्वें दे माध्यम कन्नै साइकिल चलाने आस्तै इक स्लाइड शो घटक, जि’यां इक हिंडोला। नेस्टेड हिंडोला समर्थन नेईं कीता जंदा ऐ।
हिंडोला घटक आमतौर पर सुलभता मानकें दे अनुरूप नेईं ऐ। जेकर तुसेंगी अनुपालन करने दी लोड़ ऐ तां कृपा करियै अपनी सामग्री गी पेश करने आस्तै होर विकल्पें पर विचार करो।
बूटस्ट्रैप अपने एनीमेशनें लेई खास तौर पर CSS3 दा उपयोग करदा ऐ, पर इंटरनेट एक्सप्लोरर 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=""
.
नां | किसम | डिफाल्ट | ब्यौरा |
---|---|---|---|
अंतराल दा | नंबर | 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;
. दाएं पास्से दा सबनेविगेशन एफिक्स प्लगइन दा लाइव डेमो ऐ।
डेटा विशेषताएं दे राहें जां अपने खुद दे जावास्क्रिप्ट कन्नै मैन्युअल रूप कन्नै एफिक्स प्लगइन दा इस्तेमाल करो. दौनें स्थितियें च, तुसेंगी अपनी चिपकाई गेदी सामग्री दी स्थिति ते चौड़ाई आस्तै CSS उपलब्ध करोआना होग।
नोट: सफारी रेंडरिंग बग दे कारण इक तुलनात्मक रूप कन्नै स्थित तत्व च निहित तत्व पर एफिक्स प्लगइन दा इस्तेमाल नेईं करो .
एफिक्स प्लगइन त्रै वर्गें दे बीच टॉगल करदा ऐ, हर इक इक खास स्थिति दा प्रतिनिधित्व करदा ऐ: .affix
, .affix-top
, ते .affix-bottom
. position: fixed;
असल स्थिति गी संभालने आस्तै तुसें गी शैलियां, on गी छोड़ियै .affix
, अपने आपै च (इस प्लगइन थमां स्वतंत्र) इनें वर्गें आस्तै उपलब्ध करोआनी होग.
एह्दे च एफिक्स प्लगइन किस चाल्ली कम्म करदा ऐ:
.affix-top
दस्सने आस्तै जोड़दा ऐ जे तत्व अपनी शीर्शक-सबने शा मती स्थिति च ऐ. इस बिंदु पर कुसै बी सीएसएस स्थिति दी लोड़ नेईं ऐ।.affix
बदलदा ऐ .affix-top
ते सेट करदा ऐ position: fixed;
(बूटस्ट्रैप दे सीएसएस आसेआ उपलब्ध करोआया गेदा ऐ)।.affix
कन्नै .affix-bottom
. चूंकि ऑफसेट वैकल्पिक न, इसलेई इक गी सेट करने लेई तुसेंगी उचित CSS सेट करने दी लोड़ ऐ. इस मामले च position: absolute;
जरूरत पौने पर जोड़ना। प्लगइन डेटा एट्रिब्यूट जां जावास्क्रिप्ट विकल्प दा उपयोग करदा ऐ तां जे एह् निर्धारत कीता जाई सकै जे उत्थै थमां तत्व गी कुत्थें रक्खेआ जा।हेठ दित्ते गेदे किसे बी उपयोग विकल्पें लेई अपने CSS गी सेट करने लेई उप्पर दित्ते गेदे चरणें दा पालन करो.
किसी भी तत्व च एफिक्स व्यवहार गी आसानी कन्नै जोड़ने लेई, बस data-spy="affix"
उस तत्व च जोड़ो जिस पर तुस जासूसी करना चांह् दे ओ। इक तत्व दी पिनिंग गी कदूं टॉगल करना ऐ इसगी परिभाशत करने आस्तै ऑफसेट दा इस्तेमाल करो.
जावास्क्रिप्ट दे राहें एफिक्स प्लगइन गी कॉल करो:
विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-
, च जोड़ो , जिऱयां data-offset-top="200"
.
नां | किसम | डिफाल्ट | ब्यौरा |
---|---|---|---|
ऑफसेट करना | नंबर | फंक्शन | चीज | १० | स्क्रॉल दी स्थिति दी गणना करदे बेल्लै स्क्रीन थमां ऑफसेट करने आस्तै पिक्सेल। जेकर इक गै नंबर दित्ता गेआ ऐ तां ऑफसेट उप्पर ते थल्लै दोनें दिशाएं च लागू कीता जाग। इक अनोखा, निचले ते शीर्शक ऑफसेट प्रदान करने लेई बस इक वस्तु प्रदान offset: { top: 10 } करो जां offset: { top: 10, bottom: 5 } . जदूं तुसेंगी इक ऑफसेट दी गतिशील रूप कन्नै गणना करने दी लोड़ होंदी ऐ तां इक फंक्शन दा इस्तेमाल करो। |
नशाना | चयनकर्ता दा | नोड | जे क्वेरी तत्व | window वस्तु दा |
प्रत्यय दा लक्ष्य तत्व निर्दिश्ट करदा ऐ। |
.affix(options)
तुंदी सामग्री गी चिपकने आह् ली सामग्री दे रूप च सक्रिय करदा ऐ। इक वैकल्पिक विकल्प स्वीकार करदा ऐ object
.
.affix('checkPosition')
संबद्ध तत्वें दे आयाम, स्थिति, ते स्क्रॉल स्थिति दे आधार उप्पर प्रत्यय दी स्थिति दी पुनर्गणना करदा ऐ। , .affix
, .affix-top
ते .affix-bottom
कक्षाएं गी नमीं स्थिति दे अनुसार संलग्न सामग्री च जोड़ेआ जंदा ऐ जां हटाया जंदा ऐ। इस पद्धति गी उस बेल्लै बी बुलाने दी लोड़ होंदी ऐ जिसलै बी चिपकने आह् ली सामग्री जां लक्ष्य तत्व दे आयाम बदले जंदे न, तां जे चिपकी दी सामग्री दी सही स्थिति गी सुनिश्चित कीता जाई सकै।
बूटस्ट्रैप दा एफिक्स प्लगइन एफिक्स फ़ंक्शनलटी च हुक करने आस्तै किश घटनाएं गी उजागर करदा ऐ.
घटना दा प्रकार | ब्यौरा |
---|---|
affix.bs.affix करना | एह् घटना तत्व गी चिपकने थमां फौरन पैह् ले फायर करदी ऐ। |
चिपकाया।बीएस.अफिक्स | इस घटना गी तत्व गी चिपकने दे बाद फायर कीता जंदा ऐ। |
affix-top.bs.affix ऐ | एह् घटना तत्व गी चिपकने-टॉप होने थमां तुरंत पैह् ले फायर करदी ऐ। |
चिपकया-टॉप.बीएस.चिढ़ाया | इस घटना गी तत्व गी चिपकने दे बाद फायर कीता जंदा ऐ-टॉप। |
affix-bottom.bs.affix ऐ | एह् घटना तत्व गी चिपकने थमां पैह् ले गै फायर करदी ऐ-नीचे। |
चिपकया-नीचे.बीएस.अनुकूलित | इस घटना गी तत्व गी चिपकने दे बाद फायर कीता जंदा ऐ-नीचे। |